C# -Asp.Net.SignalR.Core之Hub

時間 2019-12-05

標籤 c# asp.net.signalr.core asp signalr core hub 欄目 C# 简体版

原文原文鏈接

前言javascript

程序員的進步是須要環境的，良好的團隊環境，良好的開發環境，會讓人進步的更加快速。html

因此，我認爲，若是一個程序員，在2019年還在用Visual Studio 2005開發，那麼，他，大機率，不會想了解Linq是個什麼東西，由於他根本用不到。java

就如同我，一直在純Windows環境下開發，因此就對Core並非很感興趣。jquery

所以，若是一直用Visual Studio 2013如下版本開發的話，估計他對SignalR也就沒什麼興趣。git

由於咱們都有個壞習慣，用不到的就不喜歡去學習。程序員

引用SignalRgithub

閒話少敘，如今咱們開始學習SignalR。sql

首先，建立一個MVC項目，而後，咱們打開Nuget搜索SignalR，以下圖：瀏覽器

成功引用後，咱們查看引用，會發現程序引用了不少dll，好比Owin等等；這是由於SingalR的依賴項比較多，因此，咱們也引用了比較多的DLL。服務器

接着，咱們會發現一個問題，咱們添加引用是SignalR，但實際引用進來的倒是SignalR.Core，以下圖：

SignalR.Core和SignalR有什麼區別呢？

咱們上網查詢一下，發現，他們的差別大體上就是下面這句話。

【ASP.NET Core SignalR 不支持自動從新鏈接。若是客戶端已斷開鏈接，則用戶必須顯式啓動新鏈接才能從新鏈接。在 ASP.NET SignalR 中，若是鏈接斷開，SignalR 會嘗試從新鏈接到服務器。】

差別參考ASP.NET SignalR 和 ASP.NET Core SignalR 之間的差別

Startup

SignalR引入完成了，如今咱們須要配置和使用它了。

如何配置呢？很簡單。添加Startup文件，修改代碼以下：

public class Startup
{
    public void Configuration(IAppBuilder app)
    {
        app.MapSignalR(); 
    }
}

Startup文件包含的功能不少，這裏暫時不去詳解了，咱們暫時只要知道，Startup文件會在網站啓動時跟着一塊兒運行就能夠了。

由於網站運行時會調用Startup的Configuration方法，因此，咱們在這裏打開SignalR的映射——app.MapSignalR()，即網站初始化，咱們就開啓了SignalR的映射。

Hub

SignalR簡單的來講，是用於一個網頁即時通信的工具，既然是即時通信，那麼確定就是雙工——雙向的。

如今咱們先來看下，【網頁——>服務器】這個方向的通信。

網頁向服務器發送信息

首先，咱們在服務器創建一個Hub，用來接收網頁的消息。

//這裏命名儘可能用小寫，由於前臺只認小寫
[HubName("kibahub")]
public class kibahub : Hub
{  
    // 這裏函數命名雖然是大寫，但前臺Js調用要用小寫字母開頭
    public void Send(string message)
    {
        var id = Context.ConnectionId;   
    }
}

代碼很簡單，咱們創建了一個類，並集成Hub，而後編寫了一個Send方法，供頁面調用。

還能夠看到，咱們在類上面加了一個特性，用來顯示的聲明這個Hub在網頁端的名稱。

接下來，咱們編寫網頁代碼，在網頁中，使用JavaScript來調用這個Hub的Send方法，代碼以下：

<head>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>@*優先signalR引用*@
    <script src="~/Scripts/jquery.signalR-2.4.0.js"></script>
    <script src="~/Signalr/hubs"></script>@*這個是臨時生成的文件，裏面保存的是咱們在服務器定義的hub生成的JavaScript代碼*@
</head>
<body>
            <script type='text/javascript'> 
                //引用自動生成的代理，kibahub是HubName註解屬性 
                var kibaHub = $.connection.kibahub;
                console.log("kibaHub get");
                //開始鏈接
                $.connection.hub.start().done(function () {
                    console.log("hub start done");
                    //客戶端發送信息到服務器
                    kibaHub.server.send('kiba');
                    console.log("Send done");
                }); 
            </script> 
   
</body>
</html>

從代碼中能夠看到，咱們首先引用了三個js文件。

第一個沒啥可說的，就是jq的文件。

第二jquery.signalR-2.4.0.js文件，是咱們在引用SignalR時，一塊兒引入進來的，在Scripts文件夾下，咱們也直接引入便可。

第三Signalr/hubs個文件你們應該很奇怪，咱們項目里根本沒有這個文件夾，也沒有這個文件，並且這個hubs文件竟然尚未後綴名。

事實上這個文件夾和文件的確是不存在的，由於，它們是在咱們運行網站時，纔會生成的臨時文件。目前先不去管他是什麼，咱們只要知道，須要這個引用就能夠了。

接下來，咱們看下JavaScript代碼。

在js代碼裏，咱們經過$.connection.kibahub這樣一句話就獲取到了服務器的kibahub類的實例了，而後，咱們只要調用它的Send方法就能夠了。

可是在調用以前，咱們須要先鏈接一下服務器。因此就有了這麼一句話 $.connection.hub.start()。

到此，網頁向服務器發送數據已經編寫完成了，下面咱們運行網站，在瀏覽器中按下F12進入調試模式，而後選擇Console（控制檯）來查看咱們的輸出內容。

如上圖所示，咱們的SignalR成功的向服務器發出了信息。

服務器向網頁發送信息

網頁請求已經發送成功了，如今咱們開始編寫服務器向網頁發送信息。

首先，咱們在kibahub類的Send方法裏稍做修改，代碼以下。

public void Send(string message)
{
    var id = Context.ConnectionId; 
    IHubContext context = GlobalHost.ConnectionManager.GetHubContext<kibahub>();
    context.Clients.Client(id).getmessage("518"); 
}

能夠看到，咱們在Send方法中獲取了當前鏈接的惟一標識ConnectionId，而後咱們利用這個ConnectionId找到他對應的Client客戶端。

在經過Client客戶端調用網頁中JavaScript定義的函數getmessage，並向他發送信息518。

這樣服務端的代碼就編寫完成了。

但咱們會發現，咱們好像並無在網頁端用JavaScript定義過函數getmessage呀。

彆着急，咱們如今就去網頁定義這個方法。

 <script type='text/javascript'> 
     var kibaHub = $.connection.kibahub; 
     $.connection.hub.start().done(function () {
         console.log("hub start done"); 
         kibaHub.server.send('kiba');
         console.log("Send done");
     });
     kibaHub.client.getmessage = function (message) {
         console.log("getmessage:" + message);
     };
 </script>

如上述代碼所示。咱們能夠看到getmessage 已經定義好了，如今咱們在運行下網站。

如上圖所示，服務成功的向客戶端發出了信息。

----------------------------------------------------------------------------------------------------

到此Asp.Net.SignalR.Core就介紹完了。

框架代碼已經傳到Github上了，歡迎你們下載。

Github地址：https://github.com/kiba518/KibaSignalR

----------------------------------------------------------------------------------------------------

注：此文章爲原創，歡迎轉載，請在文章頁面明顯位置給出此文連接！
若您以爲這篇文章還不錯，請點擊下方的【推薦】，很是感謝！