前言
交流群:195866844
目录:
用SignalR 2.0开发客服系统[系列1:实现群发通讯]
用SignalR 2.0开发客服系统[系列2:实现聊天室]
真的很感谢大家的支持,今天发表系列3,我们的正菜马上就要来了..
开发环境
开发工具:VS2013 旗舰版
数据库:未用
操作系统:WIN7旗舰版
正文开始
首先我们来看看实现的效果:
所用到的方法和类(重要):
其实细心的朋友应该早就发现了,在上篇博客我们就已经用到了这个方法:
//调用指定连接对象的JS Clients.Client(连接对象的唯一标识).addMessage(""); //调用指定集合中所有连接对象的JS Clients.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>
至此就完成了基本的点对点聊天的功能,真心很感谢大家的支持,希望能对大家有帮助.
我的Q :524808775 加我请注明来源 - -,我们共同讨论.
我会坚持写完本系列..