Blazor .NET note

範例「即時天氣顯示器」包含三個部分：

1. WeatherHub.cs：伺服器端的「氣象站」，負責廣播天氣訊息。

2. WeatherDisplay.razor：客戶端的「天氣顯示器」，負責接收並顯示天氣訊息。

3. Program.cs：網站的設定檔，用來註冊 Hub。

WeatherHub.cs 伺服器端：天氣氣象站

// 引用 SignalR 核心套件
using Microsoft.AspNetCore.SignalR;

// WeatherHub 是一個 Hub，它管理客戶端的連線
public class WeatherHub : Hub
{
   // UpdateWeather 是一個伺服器方法，用來廣播天氣訊息
   public async Task UpdateWeather(string weatherInfo)
   {
       // Clients.All 代表所有連接到這個 Hub 的客戶端
    // SendAsync 會將 “ReceiveWeatherUpdate” 這個事件，連同天氣資訊廣播出去
       await Clients.All.SendAsync(“ReceiveWeatherUpdate”, weatherInfo);
   }
}

WeatherDisplay.razor 客戶端：天氣顯示器

@page “/weather”
@rendermode InteractiveServer 
// 啟用伺服器端互動模式，讓所有事件都在伺服器處理
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager Navigation 

// 注入導航管理器，用來獲取網址
<h3>即時天氣顯示</h3>
<p>目前天氣：@currentWeather</p>

@code {
   private string currentWeather = “正在連接氣象站…”;
    private HubConnection? hubConnection;

    // 元件初始化時，建立與伺服器的連線
   protected override async Task OnInitializedAsync()
   {
        // HubConnectionBuilder 用來建立連線
       hubConnection = new HubConnectionBuilder()
            // 設定 Hub 的網址
           .WithUrl(Navigation.ToAbsoluteUri(“/weatherhub”))
            .Build();

       // 訂閱 “ReceiveWeatherUpdate” 這個事件
    // 當氣象站廣播天氣時，這個函式會被觸發
       hubConnection.On<string>(“ReceiveWeatherUpdate”, (weatherInfo) =>
       {
            // 將收到的天氣訊息更新到變數
           currentWeather = weatherInfo;
            // 通知 Blazor 畫面需要更新
           InvokeAsync(StateHasChanged);
       });
        // 啟動連線
       await hubConnection.StartAsync();
    }

    // 關閉頁面時，確保連線被正確關閉
   public async ValueTask DisposeAsync()
   {
       if (hubConnection is not null)
       {
           await hubConnection.DisposeAsync();
       }
   }
}

Program.cs 網站設定檔

// … 其它程式碼省略 …

// 註冊 SignalR 服務
builder.Services.AddSignalR();
// 將 WeatherHub 註冊到路由，並指定它的網址
app.MapHub<WeatherHub>(“/weatherhub”);