在ASP.NET Core 2.1 下使用SignalR 1.0構建最簡單的實時聊天（附可運行的實例源碼）

前言

Hi，大家好！前不久.NET Core2.1發佈了，SignalR也發佈了1.0正式版。今天我就來寫一個簡單的教程教大家如何構建一個簡單的在線實時聊天頁。

PS:關於SignalR的介紹和說明具體就不在這說明了，論壇或者官方網都有詳細說明。 

使用VS2017創建ASP.NET Core Web應用程序         

•   選擇新建 ASP.NET Core Web網站，選擇ASP.NET Core 2.1 

                        

   以上第一步操作已經完成。

創建HTML頁面             

• 在第一個步驟完成後，我們在wwwroot中創建一個名爲:"chat"的HTML頁面

 

 

 

爲項目安裝SignalR 組件

•     在Nuget包管理上搜索：Microsoft.AspNetCore.SignalR 安裝

   

 

配置 SignalR 集線器，創建一個Hub類並編寫相關服務和設置路由

• 創建一個MyChatHub類，並繼承Microsoft.AspNetCore.SignalR命名空間中的Hub類。
• 爲其編寫一個Send（消息發送）方法，並重載連接和斷開連接方法
• 添加服務
• 設置SignalR的路由

• 創建一個MyChatHub類，並繼承Microsoft.AspNetCore.SignalR命名空間中的Hub類。

 

• 爲其寫一個消息發送方法，並重載連接和斷開連接方法

 

完成上述操作後到Startup中進行以下操作：

• 添加服務：

services.AddSignalR();

 

 

 

 

• 設置 SignalR 的路由

 app.UseSignalR(route =>
            {
                route.MapHub<MyChatHub>("/myChathub");
            });

 

 

 

 

 

安裝並使用 SignalR JavaScript 客戶端

• 獲得signalr.js
• 在頁面上引入

ps:signalr.js可以到npm獲取

• 獲得signalr.js
• 現在最簡便的方法是在你的“解決方案資源管理器”中右鍵項目選擇“添加”->“客戶端”，“provide：”裏選擇“unpkg”；“library :”裏輸入@aspnet/signalr@1 然後選擇你想要的版本 勾選特定文件 在dist/browser勾選js就可以得到了

以上獲取方式來自-----2018.11.13官方文檔

• 在頁面上引入

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/myChatHub")
    .configureLogging(signalR.LogLevel.Information)
    .build();
connection.start().catch(err => console.error(err.toString()));

 

從Hub中接收消息

• 因爲要從定義的Hub中接收消息，我們需要定義一個方法使用connection.on方法。（可以看作是類似於AJAX中done(data)返回的數據，或者說看成要接收後臺回傳的數據）

• 在我們的項目中, 方法名稱爲 SendMessage。

 connection.on("SendMessage", (user, message) => {
            const encodedMsg = user + " 說：" + message;
            const li = document.createElement("li");
            li.textContent = encodedMsg;
            document.getElementById("messagesList").appendChild(li);
            document.getElementById('message').value = null;
        });

從客戶端中調用Hub的方法

JavaScript 客戶端調用Hub中的公共方法需要使用connection.invoke invoke方法接受兩個參數：

• Hub中方法的名稱：
• Hub中方法定義的任何的參數：

 

• 在我們的項目中定義方法名稱爲SendMessage，參數只有用戶名和消息。

 connection.invoke("SendMessage", user, message).catch(err => console.error(err.toString()));

JavaScript代碼截圖：

• 接下來對着chat.HTML右鍵啓用瀏覽器瀏覽看看效果吧：

最終效果：

我們打開兩個不同的瀏覽器進行測試

完整源碼下載地址：https://github.com/Andilie/SignalR-Project/tree/master/SignalR-Beginners

 現在已經轉移至此： https://github.com/Andilie/SignalR-Project/tree/master/SignalR-Beginners-old