SignalR的简单实现消息广播

之前由于一个项目的需要（简单说一下，一个网页游戏，裁判的页面点击开始按钮，玩家便可以开始游戏），研究了很久，最终一个同事跟我推荐了SignalR。距离项目结束已经有一段时间了，再来回顾一下SignalR的简单实现吧。

1.什么 SignalR？

　　ASP.NET SignalR 是为.NET 开发者提供即时通讯Web 应用的类库。即时通讯Web服务就是服务器将内容自动推送到已经连接的客户端，而不是服务器等待客户端发起一个新的数据请求。简单来说，就是实现即时通信的功能，里面很多的功能都已经封装好了，只需要配置相关的功能即可，然后通过js实现功能。

2.Singal的代码实现

　　1.首先在VS中创建一个MVC项目

2.通过NuGet安装SignalR的包并引用到项目

　　3.成功安装后，会在Scripts文件夹下面添加JS脚本库

　　

　　4.向项目中添加一个SignalR集线器(v2)并命名为ServerHub。

　　

　　5.将如下代码写入到刚刚添加的ServerHub类中：

　　

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Web;
 using Microsoft.AspNet.SignalR;

 namespace SignalRDemo
 {
     public class ServerHub : Hub
     {
         private static readonly char[] Constant =
         {
             '', '', '', '', '', '', '', '', '', '',
             '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 name="message"></param>
         public void Send(string message)
         {
             var name = GenerateRandomName();

             // 调用所有客户端的sendMessage方法
             Clients.All.sendMessage(name, message);
         }

         /// <summary>
         /// 产生随机用户名函数
         /// </summary>
         /// <param name="length">用户名长度</param>
         /// <returns></returns>
         public static string GenerateRandomName(int length)
         {
             var newRandom = new System.Text.StringBuilder();
             var rd = new Random();
             for (var i = ; i < length; i++)
             {
                 newRandom.Append(Constant[rd.Next()]);
             }
             return newRandom.ToString();
         }
     }
 }

　　6.将如下代码覆盖原有的Startup的类中：

　　

 using Microsoft.Owin;
 using Owin;

 [assembly: OwinStartupAttribute(typeof(SignalRDemo.Startup))]
 namespace SignalRDemo
 {
     public partial class Startup
     {
         #region MyRegion
         public void Configuration(IAppBuilder app)
         {
             app.MapSignalR();
             ConfigureAuth(app);
         }
         #endregion
     }
 }

　　7.在Home控制器创建一个Chat Action方法：

　　

 public ActionResult Chat()
         {
             return View();
         }

ActionResult Chat

　　8.在Views中创建Chat视图，文件代码如下：

　　

 @{
     ViewBag.Title = "Chat";
 }

 <h2>Chat</h2>

 <div class="container">
     <input type="text" id="message" />
     <input type="button" id="sendmessage" value="Send" />
     <input type="hidden" id="displayname" />
     <ul id="discussion"></ul>
 </div>

 @section scripts
 {
     <!--引用SignalR库. -->
     <script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script>
     <!--引用自动生成的SignalR 集线器(Hub)脚本.在运行的时候在浏览器的Source下可看到 -->
     <script src="~/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>');
                 //if (message == "1") {
                 //    alert('已收到消息' + message);
                 //}
             };
             // 设置焦点到输入框
             $('#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>
 }

Chat.cshtml

　　9.将App_Start下面的RouteConfig文件做如下修改，以便程序运行时直接打开Chat页面：

　　

　　10.运行程序，然后打开两个窗口，即可得到如下运行结果：

　　

3.结束语

　　正是由于项目的需要，让我无意中学习了这个SignalR，个人觉得，真的是非常好用。至于底层的具体实现，以及如何在客户端中使用，推荐阅读：https://www.cnblogs.com/aaaaq/p/5929104.html，我的项目Demo亦是借鉴于此。