史上最全面的SignalR系列教程-三、SignalR 實現推送功能-集線器類實現方式

時間 2019-11-05

標籤史上全面 signalr 系列教程實現推送功能集線器方式简体版

原文原文鏈接

一、概述

經過前兩篇jquery

史上最全面的SignalR系列教程-二、SignalR 實現推送功能-永久鏈接類實現方式github

RDIFramework.NET敏捷開發框架經過SignalR技術整合即時通信(IM)數組

文章對SignalR的介紹，咱們對SignalR已經有了全面的認識。SignalR API 客戶端和服務器端持久鏈接的通訊方式，一次鏈接表明一個發送單個、分組或者廣播消息的簡單終端。持久鏈接的API（表如今.NET的PersistentConnection 類上）給了開發人員低價訪問SignalR所暴露的通訊協議的條件。使用這種鏈接方式，就像開發人員使用WCF同樣。服務器

本篇將繼續在上一篇的基礎上，講解SignalR經過最經常使用的集線器方式實現消息推送與發送。
咱們知道SignalR的通訊模型主要是兩類Persistent Connections與Hubs。Hub是一種更高級的管道，它在鏈接協議上容許客戶端和服務器端可以直接調用彼此的方法。SignalR的這種自動分發跨機器邊界調度的方法就像施了魔法同樣，讓客戶端調用服務端的方法像調用本地同樣簡單，反之亦然。使用Hub的模式就像開發人員使用遠程API同樣，好比 .NET Remoting。使用Hub一樣可以讓你傳遞類型化的參數到方法上進行模型綁定。經過Hubs實現服務端消息推送到客戶端，抽象結構圖以下。微信

二、SignalR Hub 原理分析

SignalR具體是如何到達實行性的呢？SignalR 的實現機制與 .NET WCF 或 Remoting 是類似的，都是使用遠程代理來實現。SignalR 將整個鏈接，信息交換過程封裝得很是漂亮，客戶端與服務器端所有使用 JSON 來交換數據。微信開發

當服務端的代碼訪問一個客戶端的方法時，一個數據包被自動傳輸，數據包中包含了函數方法參數的名稱（若是是一個對象，那麼這個對象會被序列化成JSON）。客戶端而後根據客戶端的代碼匹配方法的名稱。若是找到相應的匹配方法，那麼久調用相應的函數執行反序列化的參數。mvc

三、Hubs實現實時消息流程

在服務器端定義對應的hub class;app
在客戶端定義hub class 所對應的 proxy 類；框架
在客戶端與服務器端創建鏈接（connection）；
而後客戶端就能夠調用 proxy 對象的方法來調用服務器端的方法，也就是發送 request 給服務器端；
服務器端接收到 request 以後，能夠針對某個/組客戶端或全部客戶端（廣播）發送消息。

四、SignalR的Hub鏈接類Mvc實現

咱們繼續在上一篇項目基礎上擴展hubs的方式的使用。具體新增項目、添加signalr引用等能夠參考上一篇。

4.一、向工程中添加HubConnections目錄，在其中添加ChatHub.cs文件，以下圖所示：

代碼內容以下：

using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;

namespace SignalRTestProj.HubConnections
{
    //HubName 這個特性是爲了讓客戶端知道如何創建與服務器端對應服務的代理對象，
    //若是沒有設定該屬性，則以服務器端的服務類名字做爲 HubName 的缺省值
    [HubName("chat")]
    public class ChatHub : Hub 
    {
        public void Send(string clientName, string message)
        {
            // Call the addSomeMessage method to update clients.
            Clients.All.addSomeMessage(clientName, message);
        }
    }
}

在上面的代碼中，實現的服務很簡單，就是當一個客戶端調用Send方法向服務器發送message後，服務器端負責將該 message廣播給全部的客戶端（也能夠給特定組或特定客戶端），以實現聊天室的功能。

除了服務端能夠向全部客戶端通知調用客戶端方法以外，還能夠對其中想要發送的客戶端進行限制。同時Clients這個屬性有不少動態成員供咱們使用：

Clients.All：容許「調用」鏈接到此Hub上的全部客戶端的一個方法

Clients.AllExcept：表示該調用必須發送給全部客戶端，可是除了那些做爲參數的connectionId之外。這裏的參數能夠是connectionId字符串、數組等

Clients.Caller 肯定調用者的接收者是目前調用正在執行Hub方法的客戶端

Clients.Client：將對方法的調用發送給指定connectionId的客戶端，參數能夠是字符串，也能夠是數組

Client.Others ：表明全部已鏈接的客戶端，可是不包括正在調用該方法的客戶端。

在方法中能夠經過訪問 this.Context.ConnectionId來得到當前掉用方法的客戶端惟一標識符

1）、HubName 這個特性是爲了讓客戶端知道如何創建與服務器端對應服務的代理對象，若是沒有設定該屬性，則以服務器端的服務類名字做爲 HubName 的缺省值；

2）、ChatHub 繼承自 Hub，從下面 Hub 的接口圖能夠看出：Hub 支持向發起請求者（Caller），全部客戶端(Clients)，特定組（Group) 推送消息。

3）、public void Send(string clientName, string message) 這個接口是被客戶端經過代理對象調用的；

4）、Clients 是 Hub 的屬性，表示全部連接的客戶端頁面，它和 Caller同樣是 dynamic，由於要直接對應到 Javascript 對象；

5）、Clients.All.addSomeMessage(clientName, message)：表示服務器端調用客戶端的 addSomeMessage 方法，這是一個 Javascript 方法，從而給客戶端推送消息。

4.二、配置啓動類

using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(SignalRTestProj.App_Start.ChartStartup))]

namespace SignalRTestProj.App_Start
{
    public class ChartStartup
    {
        public void Configuration(IAppBuilder app)
        {
            // 有關如何配置應用程序的詳細信息，請訪問 https://go.microsoft.com/fwlink/?LinkID=316888
            //一、 PersistentConnection 方式配置
            //app.MapSignalR<ChatConnection>("/Connections/ChatConnection");

            //二、hub方式配置    
            app.MapSignalR();          
        }
    }
}

4.三、頁面代碼實現

<h2>Hub Chat</h2>

<div>
    <input type="hidden" id="ClientName" value="@ViewBag.ClientName"/>
    <input type="text" id="msg" />
    <input type="button" id="broadcast" value="廣播" />
    <br />

    <h3>
        (<span id="MyClientName">@ViewBag.ClientName</span>):
    </h3>

    <ul id="messages"></ul>
</div>

@section scripts {
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Scripts/jquery.signalR-2.4.1.min.js"></script>
    <script src="~/signalr/hubs"></script>
    <script>
        $(function () {            
            var chat = $.connection.chat;
            var myClientName = $('#ClientName').val();            
            chat.client.addSomeMessage = function (clientName, message) {
                writeMsg('<b>' + clientName + '</b> 對你們說: ' + message, 'event-message');
            };

            $('#msg').focus();
            // 開始鏈接
            $.connection.hub.start().done(function () {
                $('#broadcast').click(function () {
                    // 調用send方法
                    chat.server.send(myClientName, $('#msg').val());                   
                    $('#msg').val('').focus();
                });
            });

            //寫消息
            function writeMsg(eventLog, logClass) {
                var now = new Date();
                var nowStr = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
                $('#messages').prepend('<li class="' + logClass + '"><b>' + nowStr + '</b> ' + eventLog + '.</li>');
            }
        });
    </script>
}

在上面的代碼咱們

一、首先獲取客戶端頁面的名字；

二、而後經過 $.connection.chat 創建對應服務器端 Hub 類的代理對象 chat；

三、定義客戶端的 Javascript 方法 addSomeMessage，服務器經過 dynamic 方式調用客戶端的該方法以實現推送功能。在這裏每當收到服務器推送來的消息，就在客戶端頁面的 messages 列表表頭插入該消息。

四、當點擊廣播按鈕時，客戶端經過代理對象調用服務器端的 send 方法以實現向服務器發送消息。

五、經過 $.connection.hub.start(); 語句打開連接。