Blazor Server 如何实现所有组件实例跨浏览器实时更新？

Blazor Server 默认的 Cascading App State 对应的服务为 Scoped 生命周期，每个浏览器连接（即每个用户会话）会创建独立的服务实例，状态变更仅会触发当前会话内的事件通知，无法同步到其他会话的组件实例。

以下两种方案均兼容.NET 5，可根据业务复杂度选择：

方案1：Singleton 共享状态服务 + 全局事件广播（改造成本最低） #

适合业务逻辑简单、不需要跨端同步的场景，不需要额外引入中间件。

• 第一步：定义线程安全的共享状态服务，注册为Singleton生命周期

// 共享状态接口
public interface ISharedAppState
{
    // 替换为你的实际业务数据类型
    object BusinessData { get; }
    event Action OnDataUpdated;
    void UpdateBusinessData(object newData);
}

// 线程安全实现
public class SharedAppState : ISharedAppState
{
    private readonly object _lock = new();
    private object _businessData;

    public object BusinessData
    {
        get
        {
            lock (_lock) return _businessData;
        }
        private set => _businessData = value;
    }

    public event Action OnDataUpdated;

    public void UpdateBusinessData(object newData)
    {
        lock (_lock)
        {
            _businessData = newData;
        }
        // 广播变更通知到所有订阅的会话
        OnDataUpdated?.Invoke();
    }
}

在Startup.cs的ConfigureServices方法中注册服务：

services.AddSingleton<ISharedAppState, SharedAppState>();

如果要保留原有的级联参数用法，直接在根组件App.razor中注入该服务，绑定到CascadingValue即可，原有组件的级联参数不需要修改：

@inject ISharedAppState SharedState

<CascadingValue Value="SharedState">
    <Router AppAssembly="@typeof(App).Assembly">
        <!-- 原有路由配置 -->
    </Router>
</CascadingValue>

• 第二步：组件中订阅全局变更通知
  注意实现IDisposable接口取消订阅，避免内存泄漏：

@inject ISharedAppState SharedState
@implements IAsyncDisposable

<!-- 你的原有组件渲染逻辑 -->

@code {
    protected override void OnInitialized()
    {
        base.OnInitialized();
        // 收到全局变更通知后刷新组件，InvokeAsync保证线程安全
        SharedState.OnDataUpdated += () => InvokeAsync(StateHasChanged);
    }

    public async ValueTask DisposeAsync()
    {
        SharedState.OnDataUpdated -= () => InvokeAsync(StateHasChanged);
    }
}

• 注意事项：Singleton服务存储敏感数据时需要做权限校验，写入数据时必须加锁保证线程安全，避免多会话并发写入导致的数据异常。

方案2：自定义SignalR Hub广播通知（灵活度最高） #

适合业务逻辑复杂、需要跨端同步、或需要对通知做精细化控制的场景。Blazor Server本身基于SignalR运行，无需额外依赖。

• 第一步：定义同步Hub

public class DataSyncHub : Hub
{
}

• 第二步：注册SignalR服务和路由
  在Startup.cs的ConfigureServices方法中添加：

services.AddSignalR();

在Configure方法的端点配置中添加Hub路由：

app.UseEndpoints(endpoints =>
{
    endpoints.MapBlazorHub();
    endpoints.MapHub<DataSyncHub>("/dataSyncHub");
    endpoints.MapFallbackToPage("/_Host");
});

• 第三步：组件中订阅Hub通知

@inject NavigationManager NavManager
@inject IHubContext<DataSyncHub> SyncHubContext
@implements IAsyncDisposable

<!-- 你的原有组件渲染逻辑 -->

@code {
    private HubConnection _hubConnection;

    protected override async Task OnInitializedAsync()
    {
        // 初始化Hub连接
        _hubConnection = new HubConnectionBuilder()
            .WithUrl(NavManager.ToAbsoluteUri("/dataSyncHub"))
            .Build();

        // 监听服务端的更新通知
        _hubConnection.On("DataChanged", async () =>
        {
            // 此处可直接接收服务端推送的最新数据，也可以自行拉取最新数据后刷新
            await InvokeAsync(StateHasChanged);
        });

        await _hubConnection.StartAsync();
    }

    // 服务端数据更新后，调用该方法即可向所有会话广播通知
    private async Task BroadcastUpdate()
    {
        await SyncHubContext.Clients.All.SendAsync("DataChanged");
    }

    public async ValueTask DisposeAsync()
    {
        if (_hubConnection != null)
        {
            await _hubConnection.DisposeAsync();
        }
    }
}

内容的提问来源于stack exchange，提问作者Shawn Rye