介紹

我們網站的運作方式通常類似以下方式運作，你的電腦會詢問伺服器今天天氣如何，伺服器才會回答妳今天天氣晴朗，所以如果當妳詢問完之後，伺服器也答覆妳，這時天有不測風雲突然颳風下雨，伺服器是不會主動告訴妳天氣突然下大雨。

如果想要做到伺服器的資料有變動時會主動告訴你的電腦最新資訊，這時候就可以用到SignalR這項技術。

SignalR 會使用新的 WebSocket 傳輸，其中有可用，並在必要時回復到較舊的傳輸。 雖然您當然可以使用 WebSocket 直接撰寫應用程式，但使用 SignalR 表示您已經為您完成許多需要實作的額外功能。 最重要的是，這表示您可以撰寫應用程式以利用 WebSocket 的程式碼，而不必擔心為舊版用戶端建立個別的程式碼路徑。 SignalR 也可讓您擔心 WebSocket 的更新，因為 SignalR 已更新以支援基礎傳輸中的變更，讓您的應用程式跨 WebSocket 版本提供一致的介面。

實作範例

伺服器端

以NET6做示範

• 先在Startup加上

builder.Services.AddSignalR();

app.MapHub<ChatHub>("/chatHub");

• 建立一個Class叫做ChatHub繼承Hub實作 SendMessage方法

public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }

客戶端

微軟有堤供前端用的JS的lib可以使用

• 在 [方案總管] 中，以滑鼠右鍵按一下專案，然後選取 [新增]>[用戶端程式庫]。
• 在 [ 新增Client-Side程式庫 ] 對話方塊中：
• 針對提供者選取unpkg
• 針對[程式庫] 輸入 @microsoft/signalr@latest
• 選取 [選擇特定檔案]、展開 dist/browser 資料夾，然後選取 signalr.js 和 signalr.min.js 。
• 將 [目標位置] 設定為 wwwroot/js/signalr/
• 選取 [安裝]

1. 這裡的重點是要先建立connection
2. 透過on這個方法裡面的字串ReceiveMessage這裡定義的名稱，要跟伺服器端SendAsync("ReceiveMessage", user, message)裡面寫的名稱一樣才能接收到

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
connection.on("ReceiveMessage", function (user, message) {
    var li = document.createElement("li");
    document.getElementById("messagesList").appendChild(li);
    // We can assign user-supplied strings to an element's textContent because it
    // is not interpreted as markup. If you're assigning in any other way, you 
    // should be aware of possible script injection concerns.
    li.textContent = `${user} says ${message}`;
});

關於SignalR實作聊天室、以及加上權限認證之後會專門寫一篇文章跟大家講解

參考資料

教學課程：開始使用 ASP.NET Core SignalR

本篇已同步發表至個人部落格
https://moushih.com/2022ithome28/