前言
目錄:
用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 + '" οnclick="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 οnclick="RemoveRoom(this)">退出</button>\ ' + val + '房間\ 聊天記錄如下:<ul>\ </ul>\ <input type="text" /> <button οnclick="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>
至此就完成了基本的點對點聊天的功能,真心很感謝大家的支持,希望能對大家有幫助.
我會堅持寫完本系列..