用SignalR 2.0开发客服系统[系列3:实现点对点通讯]

来源：互联网发布：中二网络意思编辑：程序博客网时间：2024/05/16 01:56

前言

用SignalR 2.0开发客服系统[系列1:实现群发通讯]

用SignalR 2.0开发客服系统[系列2:实现聊天室]

真的很感谢大家的支持,今天发表系列3,我们的正菜马上就要来了..

开发环境

开发工具:VS2013 旗舰版

数据库:未用

操作系统:WIN7旗舰版

正文开始

首先我们来看看实现的效果:

所用到的方法和类(重要):

其实细心的朋友应该早就发现了,在上篇博客我们就已经用到了这个方法:

//调用指定连接对象的JS               Clients.Client(连接对象的唯一标识).addMessage("");//调用指定集合中所有连接对象的JSClients.Clients(集合).addMessage("")

下面上代码:

首先实体类:

很简单,只有一个用户类

using System;using System.Collections.Generic;using System.ComponentModel.DataAnnotations;using System.Linq;using System.Web;namespace SignalRTest{  /// <summary>  /// 用户类  /// </summary>  public class UserInfo  {    [Key]    public string ContextID { get; set; }    public string Name { get; set; }  }}

Hub的源码(同样,注释很全,我就不单独的拿出来讲了):

using Microsoft.AspNet.SignalR;using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Threading.Tasks;using Microsoft.AspNet.SignalR.Hubs;using Newtonsoft.Json;namespace SignalRTest{  [HubName("ptopHub")]  public class PTPHub : Hub  {     public static List<UserInfo> UserList = new List<UserInfo>();     //public static List<RoomInfo> RoomList = new List<RoomInfo>();    /// <summary>    /// 重写链接事件    /// </summary>    /// <returns></returns>     public override Task OnConnected()     {       // 查询用户。       var user = UserList.SingleOrDefault(u => u.ContextID == Context.ConnectionId);       //判断用户是否存在,否则添加进集合       if (user == null)       {         user = new UserInfo()         {           Name = "",           ContextID = Context.ConnectionId         };         UserList.Add(user);       }       return base.OnConnected();     }    /// <summary>    /// 获取用户名和自己的唯一编码    /// </summary>    /// <param name="name"></param>     public void GetName(string name)     {       // 查询用户。       var user = UserList.SingleOrDefault(u => u.ContextID == Context.ConnectionId);       if (user != null)       {         user.Name = name;         Clients.Client(Context.ConnectionId).showID(Context.ConnectionId);       }       GetUserList();     }    /// <summary>    /// 重写断开的事件    /// </summary>    /// <returns></returns>     public override Task OnDisconnected()     {       var user =UserList.Where(u => u.ContextID == Context.ConnectionId).FirstOrDefault();       //判断用户是否存在,存在则删除       if (user != null)       {         //删除用户         UserList.Remove(user);       }       //更新所有用户的列表       GetUserList();       return base.OnDisconnected();     }     /// <summary>     /// 更新所有用户的在线列表     /// </summary>     private void GetUserList()     {       var itme = from a in UserList            select new { a.Name, a.ContextID };       string jsondata = JsonConvert.SerializeObject(itme.ToList());       Clients.All.getUserlist(jsondata);     }    /// <summary>    /// 发送消息    /// </summary>    /// <param name="contextID"></param>    /// <param name="Message"></param>     public void SendMessage(string contextID, string Message)     {       var user = UserList.Where(u => u.ContextID == contextID).FirstOrDefault();       //判断用户是否存在,存在则发送       if (user != null)       {         //给指定用户发送,把自己的ID传过去         Clients.Client(contextID).addMessage(Message + " " + DateTime.Now,Context.ConnectionId);         //给自己发送,把用户的ID传给自己         Clients.Client(Context.ConnectionId).addMessage(Message + " " + DateTime.Now, contextID);       }       else       {         Clients.Client(Context.ConnectionId).showMessage("该用户已离线");       }     }  }}

前端HTML+JS(上次有朋友吐槽JS没注释 - -,实在不好意思,呃..这次加上了..):

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  <title>点对点聊天</title>  <script src="Scripts/jquery-1.10.2.min.js"></script>  <script src="Scripts/jquery.signalR-2.0.0.min.js"></script>  <!--这里要注意,这是虚拟目录,也就是你在OWIN Startup中注册的地址-->  <script src="signalr/hubs"></script>  <script type="text/javascript">    var Clients = [];    $(function () {      chat = $.connection.ptopHub;      //注册提示信息方法      chat.client.showMessage = function (Message) {        alert(Message);      }      //注册显示信息的方法      chat.client.addMessage = function (Message,contextID) {        if ($.inArray(contextID,Clients) == -1) {          AddRoom(contextID);        }           $("#" + contextID).find("ul").each(function () {            $(this).append('<li>' + Message + '</li>')          })      }      //注册查询房间列表的方法      chat.client.getUserlist = function (data) {        if (data) {          var jsondata = $.parseJSON(data);          $("#roomlist").html(" ");          for (var i = 0; i < jsondata.length; i++) {            var html = ' <li>用户名:' + jsondata[i].Name + '<button roomname="' + jsondata[i].ContextID + '" onclick="PtoPSendStart(this)">与他聊天</button></li>';            $("#roomlist").append(html);          }        }      }      //注册显示个人信息的方法      chat.client.showID = function (data) {        $("#ConID").html(data);        Clients.push(data);      }      // 获取用户名称。      $('#username').html(prompt('请输入您的名称:', ''));      //连接成功后获取自己的信息      $.connection.hub.start().done(function () {        chat.server.getName($('#username').html());      });    });    //开始聊天    function PtoPSendStart(data) {      var val = $(data).attr('roomname');      AddRoom(val);    }    //显示聊天窗口    function AddRoom(val) {      Clients.push(val)      var html = '<div style="float:left; margin-left:30px; border:double" id="' + val + '" roomname="' + val + '"><button onclick="RemoveRoom(this)">退出</button>\                  ' + val + '房间\                        聊天记录如下:<ul>\                        </ul>\                  <input type="text" /> <button onclick="SendMessage(this)">发送</button>\                  </div>'      $("#RoomList").append(html);    }    //发送消息    function SendMessage(data) {      var message = $(data).prev().val();      var room = $(data).parent();      var username = $("#username").html();      message = username + ":" + message;      var roomname = $(room).attr("roomname");      chat.server.sendMessage(roomname, message);    }  </script></head><body>  <div>    <div>名称:<p id="username"></p></div>    <div>用户唯一编码:<p id="ConID"></p></div>  </div>  <div style="float:left;border:double">    <div>在线用户列表</div>    <ul id="roomlist"></ul>  </div>  <div id="RoomList">  </div></body></html>

至此就完成了基本的点对点聊天的功能,真心很感谢大家的支持,希望能对大家有帮助.

我会坚持写完本系列..

0 0