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 =
        {
            '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 name="message"></param>
        public void Send(string message)
        {
            var name = GenerateRandomName(4);

            // 調用所有客戶端的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(62);
            var rd = new Random();
            for (var i = 0; i < length; i++)
            {
                newRandom.Append(Constant[rd.Next(62)]);
            }
            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();
        }

　　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>
}

　　9.將App_Start下面的RouteConfig文件做如下修改，以便程序運行時直接打開Chat頁面：

　　

　　10.運行程序，然后打開兩個窗口，即可得到如下運行結果：

　　

 

3.結束語

　　正是由於項目的需要，讓我無意中學習了這個SignalR，個人覺得，真的是非常好用。至於底層的具體實現，以及如何在客戶端中使用，推薦閱讀：https://www.cnblogs.com/aaaaq/p/5929104.html，我的項目Demo亦是借鑒於此。