Asp.net用法SignalR实现酷炫端对端谈天功能_

A用法SignalR实现酷炫端对端谈天功能_ 这篇文章主要为大家具体介绍了A用法SignalR实现酷炫端对端谈天功能，感爱好的小伙伴们可以参考一下 一、引言 在前一篇文章已经具体介绍了SignalR了，并且简洁介绍它在A MVC 和WPF中的应用在上篇博文介绍的都是群发消息的实现，然而，对于SignalR是为了实时谈天而生的，自然少了不像一样的端对端的谈天了本篇博文将介绍如何用法SignalR来实现类似谈天的功能 二、用法SignalR实现端对端谈天的思路 在介绍具体实现之前，我先来介绍了用法SignalR实现端对端谈天的思路信任大家在前篇文章已经看到过Clients.All.sendMessage(name, message);这样的代码，其表示调用全部客户端的SendMessageSignalR的集线器使得客户端和服务端可以进行实时通信那要实现端对端的谈天，自然就不能像全部客户端发送消息了，而只能向特定的客户端发送消息才可以，不然不就乱套了，没有任何隐私权了那怎样才可以向特定的客户端发送消息呢？这个问题也就是我们实现端对端谈天功能的关键 我们发送Clients对象除了All属性外，还具有其他属性，你可以在VS中按F12来查看Clients对象的全部属性或方法，具体的定义如下： public interface IHubConnectionContextT { T All { get; } // 代表全部客户端 T AllExcept(params string[] excludeConnectionIds); // 除了参数中的全部客户端 T Client(string connectionId); // 特定的客户端，这个方法也就是我们实现端对端谈天的关键 T Clients(IListstring connectionIds); // 参数中的客户端端 T Group(string groupName, params string[] excludeConnectionIds); // 指定客户端组，这个也是实现群聊的关键所在 T Groups(IListstring groupNames, params string[] excludeConnectionIds); T User(string userId); // 特定的用户 T Users(IListstring userIds); // 参数中的用户 } 在SignalR中，每一个客户端为标记其唯一性，SignalR都会安排它一个ConnnectionId，这样我们就可以通过ConnnectionId来找到特定的客户端了。

这样，我们在向某个客户端发送消息的时候，除了要将消息传入，也需要将发送给对方的ConnectionId输入，这样服务端就能依据传入的ConnectionId来转发对应的消息给对应的客户端了这样也就完成了端对端谈天的功能另外，假如用户假如不在线的话，服务端可以把消息保存到数据库中，等对应的客户端上线的时候，再从数据库中查看该客户端是否有消息需要推送，有的话，从数据库取出数据，将该数据推送给该客户端不过这点，服务端缓存数据的功能本篇博文没有实现，在这里介绍就是让大家明白一个实现原理） 下面我们来梳理下端对端谈天功能的实现思路： 客户端登入的时候记录下客户端的ConnnectionId，并将用户加入到一个静态数组中，该数据为了记录全部在线用户 用户可以点击在线用户中的用户谈天，在发送消息的时候，需要将ConnectionId一并传入到服务端 服务端依据传入的消息内容和ConnectionId调用Clients.Client(connnection).sendMessage方法来进行转发到对应的客户端 三、实现酷炫谈天功能核心代码 有了实现思路，实现功能也就得心应手了，接下来，让我们先看下集线器ChatHub中的代码： public class ChatHub : Hub { // 静态属性 public static ListUserInfo OnlineUsers = new ListUserInfo(); // 在线用户列表 /// summary /// 登录连线 /// /summary /// param name="userId"用户Id/param /// param name="userName"用户名/param public void Connect(string userId, string userName) { var connnectId = Context.ConnectionId; if (OnlineUsers.Count(x = x.ConnectionId == connnectId) == 0) { if (OnlineUsers.Any(x = x.UserId == userId)) { var items = OnlineUsers.Where(x = x.UserId == userId).ToList(); foreach (var item in items) { Clients.AllExcept(connnectId).onUserDisconnected(item.ConnectionId, item.UserName); } OnlineUsers.RemoveAll(x = x.UserId == userId); } //添加在线人员 OnlineUsers.Add(new UserInfo { ConnectionId = connnectId, UserId = userId, UserName = userName, LastLoginTime = DateTime.Now }); } // 全部客户端同步在线用户 Clients.All.onConnected(connnectId, userName, OnlineUsers); } /// summary /// 发送私聊 /// /summary /// param name="toUserId"接收方用户连接ID/param /// param name="message"内容/param public void SendPrivateMessage(string toUserId, string message) { var fromUserId = Context.ConnectionId; var toUser = OnlineUsers.FirstOrDefault(x = x.ConnectionId == toUserId); var fromUser = OnlineUsers.FirstOrDefault(x = x.ConnectionId == fromUserId); if (toUser != null fromUser != null) { // send to Clients.Client(toUserId).receivePrivateMessage(fromUserId, fromUser.UserName, message); // send to caller user // Clients.Caller.sendPrivateMessage(toUserId, fromUser.UserName, message); } else { //表示对方不在线 Clients.Caller.absentSubscriber(); } } /// summary /// 断线时调用 /// /summary /// param name="stopCalled"/param /// returns/returns public override Task OnDisconnected(bool stopCalled) { var user = OnlineUsers.FirstOrDefault(u = u.ConnectionId == Context.ConnectionId); // 推断用户是否存在,存在则删除 if (user == null) return base.OnDisconnected(stopCalled); Clients.All.onUserDisconnected(user.ConnectionId, user.UserName); //调用客户端用户离线通知 // 删除用户 OnlineUsers.Remove(user); return base.OnDisconnected(stopCalled); } } 上面是服务端主要的实现，接下来看看客户端的实现代码： script type="text/javascript" var systemHub = $.connection.chatHub; / 连接IM服务器胜利 // 主要是更新在线用户 systemHub.client.onConnected = function (id, userName, allUsers) { var node = chatCore.node, myf = node.list.eq(0), str = , i = 0; myf.addClass(loading); onlinenum = allUsers.length; if (onlinenum 0) { str += li class="ChatCore_parentnode ChatCore_liston" + h5i/ispan class="ChatCore_parentname"在线用户/spanem class="ChatCore_nums"（ + onlinenum + ）/em/h5 + ul id="ChatCore_friend_list" class="ChatCore_chatlist"; for (; i onlinenum; i++) { str += li id="userid- + allUsers[i].UserID + " data-id=" + allUsers[i].ConnectionId + " class="ChatCore_childnode" type="one"img src="/Content/Images/001.jpg? + allUsers[i].UserID + " class="ChatCore_oneface"span class="ChatCore_onename" + allUsers[i].UserName + ( + )/spanem class="ChatCore_time" + allUsers[i].LoginTime + /em/li; } str += /ul/li; myf.html(str); } else { myf.html(li class="ChatCore_errormsg"没有任何数据/li); } myf.removeClass(loading); }; //消息传输 chatCore.transmit = function () { var node = chatCore.node, log = {}; node.sendbtn = $(#ChatCore_sendbtn); node.imwrite = $(#ChatCore_write); //发送 log.send = function () { var data = { content: node.imwrite.val(), id: chatCore.nowchat.id, sign_key: , //密匙 _: +new Date }; if (data.content.replace(/\s/g, ) === ) { layer.tips(说点啥呗！, #ChatCore_write, 2); node.imwrite.focus(); } else { //此处皆为模拟 var keys = chatCore.nowchat.type + chatCore.nowchat.id; //谈天模版 log.html = function (param, type) { return li class=" + (type === me ? ChatCore_chateme : ) + " + div class="ChatCore_chatuser" + function () { if (type === me) { return span class="ChatCore_chattime" + param.time + /span + span class="ChatCore_chatname" + param.name + /span + img src=" + param.face + " ; } else { return img src=" + param.face + " + span class="ChatCore_chatname" + param.name + /span + span class="ChatCore_chattime" + param.time + /span; } }() + /div + div class="ChatCore_chatsay" + param.content + em class="ChatCore_zero"/em/div + /li; }; log.imarea = chatCore.chatbox.find(#ChatCore_area + keys); log.imarea.append(log.html({ time: new Date().toLocaleString(), name: config.user.name, face: config.user.face, content: data.content }, me)); node.imwrite.val().focus(); log.imarea.scrollTop(log.imarea[0].scrollHeight); // 调用服务端sendPrivateMessage方法来转发消息 systemHub.server.sendPrivateMessage(chatCore.nowchat.id, data.content); } }; node.sendbtn.on(click, log.send); node.imwrite.keyup(function (e) { if (e.keyCode === 13) { log.send(); } }); }; //用户离线 systemHub.client.onUserDisconnected = function (id, userName) { onlinenum = onlinenum - 1; $(".ChatCore_nums").html("（" + onlinenum + "）"); $("#ChatCore_friend_list li[data-id=" + id + "]").remove(); }; // 启动连接 $.connection.hub.start().done(function () { systemHub.server.connect(userid, username); // 调用服务端connect方法 }); /script 上面只是列出了一些核心代码实现。

另外，为了实现的酷炫的效果，这里采纳了一个Jquery插件：layer,官方网址为： 四、最终效果 介绍完了实现思路和实现代码之后，既然就到了我们感动人心的一刻了，那就是看看我们实现功能是否可以满足需求，另外，除了满足基本的谈天功能外，还需要看看界面是不是够酷炫 五、总结 看完上面的效果，是不是很炫呢到此，本文的内容就结束了，在接下来的一篇文章中我会连续介绍如何用法A SignalR来实现谈天室的功能 ... 。