上面的3个方法分别做了：添加聊天人到List，发送信息到客户端，某个连接失效后通知各个有效的聊天人重新加载信息；这里值得关注的是通过重新 public override System.Threading.Tasks.Task OnDisconnected(bool stopCalled) 方法来实现捕获并移除失效连接（这里是聊天人的信息）;整篇测试用例通过Context.ConnectionId来保证连接的唯一性，只要有新的链接请求，那么服务端就会分配一个唯一串给这个链接，当客户端关闭页面或关闭链接这个是有就能在OnDisconnected方法中捕获到这个失效的链接的ConnectionId，这样就达到了移除失效聊天人的要求了；为了代码的方便性，这里创建了一个聊天人信息类：
public class MoHubUser { public string Id { get; set; } public string NickName { get; set; } public string TransportMethod { get; set; } }
到这里后台的聊天室代码就完成了就是这么简单；我们再来看试图中如何来写代码，这里我先给出我的html布局代码：
@{ ViewBag.Title = "神牛聊天室 - SignalR"; } <style type="text/css"> .div_left { width: 70%; float: left; } .div_right { width: 28%; float: left; } .ul { list-style: none; border: 1px solid #ccc; height: 500px; overflow-y: scroll; color: black; } .ul li { padding-top: 5px; padding-right: 25px; } .ul_user { list-style: none; } .ul_user li { padding-top: 5px; } .send { position: relative; background: #eae7e7; border-radius: 5px; /* 圆角 */ padding-top: 4px; padding-left: 5px; margin-top: 13px; } .send .arrow { position: absolute; top: -16px; font-size: 0; border: solid 8px; border-color: #fff #fff #eae7e7 #fff; } </style> <h3>@ViewBag.Title 在线人数：<span>0</span>人</h3> <div> <div> <ul></ul> <textarea rows="5" maxlength="500" placeholder="开始聊天. . ."></textarea><br /> <input type="button" value="发 送" /> <input type="hidden" /> </div> <div> <ul></ul> </div> </div> <script src="https://www.jb51.net/~/Scripts/jquery.signalR-2.2.2.min.js"></script> @*<script src="https://www.jb51.net/~/chat/hubs"></script>*@
客户端这里写法大致有两种选择，一种直接使用生成的代理来操作，一种不用自动生成的代理采用手动创建代理的方式；为了内容的简洁性，这里只简单讲解下自动生成的代理方式，而更多的是分享手动创建代理链接的方式；
使用生成的代理获取链接
首先，我们需要通过Script标签来引用一下自动生成代理的路径： <script src="https://www.jb51.net/~/chat/hubs"></script> ，注意啦这里的路径/chat对应的就是咋们在前面Startup.cs文件中配置 app.MapSignalR("/chat" 路径，而后面/hubs固定的写法(至少目前我还没更多的试验过)，只有先应用了这个~/chat/hubs，才能在后面使用生成的代理，先上段代码：
var chat = $.connection.chatHub; chat.client.newUser = function (user) { $("#users").append(' <li><strong>' + user.NickName + '[' + user.TransportMethod + ']</strong></li>'); }; chat.client.userList = function (users) { console.log(users); $("#sapnUserTotal").html(users.length); $.each(users, function (i, item) { $("#users").append(' <li>[' + item.TransportMethod + '] <strong>' + item.NickName + '</strong>(' + item.Id + ')</li>'); }); }; chat.client.addNewMessageToPage = function (user, message) { console.log(user); $("#discussion").append(' <li ><span><strong>' + user.NickName + '[' + user.TransportMethod + ']</strong>：</span><div>' + message + '<div></div></div></li>'); }; //connection.hub.start({ transport: ['webSockets', 'longPolling'] }).done(function () { // my.TransportMethod = connection.hub.transport.name; // chat.server.addUser(my); // $('#sendmessage').click(function () { // //console.log(chat); // var content = $.trim($('#message').val()); // if (content.length <= 0) { $('#message').val('').focus(); return; } // chat.server.sendAll(my, content); // $('#message').val('').focus(); // }); //}).fail(function () { // alert("链接聊天室失败，请重新刷新页面。"); //});
咋们逐步来解析下代码注意点：
1. var chat = $.connection.chatHub; 这里的chatHub对应的就是咋们创建的并继承Hub的ChatHub类，由于js变量开头都是小写，所以这里是chatHub，这句活就表示链接到咋们后端了ChatHub类了，然后就可以使用里面的方法啦（这种有点类似于早期的webform中某种ajax请求的写法）