用SignalR 2.0开发客服系统[系列3:实现点对点通讯]
生活随笔
收集整理的這篇文章主要介紹了
用SignalR 2.0开发客服系统[系列3:实现点对点通讯]
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
用SignalR 2.0開發客服系統[系列3:實現點對點通訊] 原文:用SignalR 2.0開發客服系統[系列3:實現點對點通訊]前言
目錄:
用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 UserListselect 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>至此就完成了基本的點對點聊天的功能,真心很感謝大家的支持,希望能對大家有幫助.
我的Q :524808775 加我請注明來源 - -,我們共同討論.
我會堅持寫完本系列..
?
posted on 2015-07-09 16:20 NET未來之路 閱讀(...) 評論(...) 編輯 收藏轉載于:https://www.cnblogs.com/lonelyxmas/p/4633520.html
總結
以上是生活随笔為你收集整理的用SignalR 2.0开发客服系统[系列3:实现点对点通讯]的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： for语句之打印三角形问题
- 下一篇： 用imageNamed加载图片产生的问题