![用SignalR 2.0开发客服系统[系列3:实现点对点通讯]](https://700zi.400zi.cn/uploadfile/img/14/776/09bb0668628d79c01d2c891569c626b4.jpg)
用SignalR 2.0开发客服系统[系列3:实现点对点通讯] 原文:用SignalR 2.0开发客服系统[系列3:实现点对点通讯]前言
目录:
用SignalR 2.0开发客服系统[系列1:实现群发通讯]
用SignalR 2.0开发客服系统[系列2:实现聊天室]
真的很感谢大家的支持,今天发表系列3,我们的正菜马上就要来了..
开发环境
开发工具:VS 旗舰版
数据库:未用
操作系统:WIN7旗舰版
正文开始
首先我们来看看实现的效果:
所用到的方法和类(重要):
其实细心的朋友应该早就发现了,在上篇博客我们就已经用到了这个方法:
//调用指定连接对象的JSClients.Client(连接对象的唯一标识).addMessage("");//调用指定集合中所有连接对象的JSClients.Clients(集合).addMessage("")
下面上代码:
首先实体类:
很简单,只有一个用户类
using System;using System.Collections.Generic;using ponentModel.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="/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 -07-09 16:20 NET未来之路 阅读(...) 评论(...) 编辑 收藏
