即時通訊功能可以大幅提升用戶的互動體驗，無論是在聊天應用還是即時更新系統中都十分常見。ASP.NET Core提供了SignalR框架，讓開發者可以輕鬆實現即時數據傳輸。本篇將講解如何使用SignalR來構建即時通訊功能。

1. SignalR 的基本概念

SignalR是一個ASP.NET Core的即時通訊框架，它可以在伺服器與客戶端之間建立雙向通道，並即時傳遞消息。它的核心是Hub，可以在Hub中處理伺服器與客戶端的通訊。

2. 設置SignalR

首先，安裝SignalR的NuGet套件：

dotnet add package Microsoft.AspNetCore.SignalR

接著，在Startup.cs中設定SignalR：

public void ConfigureServices(IServiceCollection services)
{
    services.AddSignalR();
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseRouting();
    
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapHub<ChatHub>("/chathub");
    });
}

在這裡，我們設定了一個/chathub路徑，用來接收SignalR的請求。

3. 創建Hub

接下來，創建一個SignalR Hub，它負責伺服器與客戶端的通訊邏輯：

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

ChatHub類使用SendMessage方法將消息傳遞給所有連接的客戶端，這裡通過Clients.All.SendAsync來實現消息的廣播。

4. 建立客戶端連接

在前端，我們需要使用JavaScript來連接SignalR伺服器。首先，導入SignalR的JavaScript庫：

<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/5.0.9/signalr.min.js"></script>

然後，建立與SignalR伺服器的連接並處理消息：

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/chathub")
    .build();

connection.on("ReceiveMessage", function (user, message) {
    const msg = user + ": " + message;
    const li = document.createElement("li");
    li.textContent = msg;
    document.getElementById("messagesList").appendChild(li);
});

connection.start().catch(function (err) {
    return console.error(err.toString());
});

document.getElementById("sendButton").addEventListener("click", function (event) {
    const user = document.getElementById("userInput").value;
    const message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

這段代碼用於建立與伺服器的連接，並處理來自伺服器的消息。當用戶按下發送按鈕時，消息將通過SignalR發送到伺服器。

5. 測試SignalR即時通訊

當伺服器和客戶端準備就緒後，可以打開多個瀏覽器窗口來測試即時通訊功能。當一個用戶發送消息時，所有連接的用戶都會即時收到該消息。

6. 小結

SignalR讓即時通訊的實現變得簡單且高效。無論是在聊天應用、即時數據更新，還是其他即時功能需求的場景中，SignalR都能提供穩定的解決方案。透過本篇介紹的步驟，你應該已經能夠在ASP.NET Core中輕鬆構建即時通訊功能。