@{ ViewBag.Title = "聊天窗口"; } <h2>Chat</h2> <div> <input type="text" /> <input type="button" value="Send" /> <input type="hidden" /> <ul></ul> </div> @section scripts { <!--引用SignalR库. --> <script src="https://www.jb51.net/~/Scripts/jquery.signalR-2.2.0.min.js"></script> <!--引用自动生成的SignalR 集线器(Hub)脚本.在运行的时候在浏览器的Source下可看到 --> <script src="https://www.jb51.net/~/signalr/hubs"></script> <script> $(function () { // 引用自动生成的集线器代理 var chat = $.connection.serverHub; // 定义服务器端调用的客户端sendMessage来显示新消息 chat.client.sendMessage = function (name, message) { // 向页面添加消息 $('#discussion').append('<li><strong>' + htmlEncode(name) + '</strong>: ' + htmlEncode(message) + '</li>'); }; // 设置焦点到输入框 $('#message').focus(); // 开始连接服务器 $.connection.hub.start().done(function () { $('#sendmessage').click(function () { // 调用服务器端集线器的Send方法 chat.server.send($('#message').val()); // 清空输入框信息并获取焦点 $('#message').val('').focus(); }); }); }); // 为显示的消息进行Html编码 function htmlEncode(value) { var encodedValue = $('<div />').text(value).html(); return encodedValue; } </script> }
9. 修改App_Start文件夹内的RoutConfig类，将Action方法默认设置为Chat.
public class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}", defaults: new { controller = "Home", action = "Chat", id = UrlParameter.Optional } ); } }
到此，我们的例子就实现完成了，接下来我们先来看看运行效果，之后再来解释到底SignalR是如何来完成广播消息的。运行的运行结果如下。
从运行结果，你可以发现，在任何一个窗口输入信息并发送，所有客户端将收到该消息。这样的效果在实际应用中很多，如QQ，一登录QQ的时候都会推送腾讯广告消息。
看完了运行结果，接下来我们来分析下代码，进而来剖析下SignalR到底是如何工作的。
按照B/S模式来看，运行程序的时候，Web页面就与SignalR的服务建立了连接，具体的建立连接的代码就是：$.connection.hub.start()。这句代码的作用就是与SignalR服务建立连接，后面的done函数表明建立连接成功后为发送按钮注册了一个click事件，当客户端输入内容点击发送按钮后，该Click事件将会触发，触发执行的操作为： chat.server.send($('#message').val())。这句代码表示调用服务端的send函数，而服务端的Send韩式又是调用所有客户端的sendMessage函数，而客户端中sendMessage函数就是将信息添加到对应的消息列表中。这样就实现了广播消息的功能了。
看到这里，有人是否会有疑问，前面的实现都只用到了集线器对象，而没有用到持久连接对象。其实并不是如此，$.connection这句代码就是使用持久连接对象，当然你也可以在重新OnConnected方法来查看监控客户端的连接情况，更新的代码如下所示：
public class ServerHub : Hub { private static readonly char[] Constant = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z' }; /// <summary> /// 供客户端调用的服务器端代码 /// </summary> /// <param></param> public void Send(string message) { var name = GenerateRandomName(4); // 调用所有客户端的sendMessage方法 Clients.All.sendMessage(name, message); } /// <summary> /// 客户端连接的时候调用 /// </summary> /// <returns></returns> public override Task OnConnected() { Trace.WriteLine("客户端连接成功"); return base.OnConnected(); } /// <summary> /// 产生随机用户名函数 /// </summary> /// <param>用户名长度</param> /// <returns></returns> public static string GenerateRandomName(int length) { var newRandom = new System.Text.StringBuilder(62); var rd = new Random(); for (var i = 0; i < length; i++) { newRandom.Append(Constant[rd.Next(62)]); } return newRandom.ToString(); } }
这样在运行页面的时候，将在输出窗口看到“客户端连接成功”字样。运行效果如下图所示：
