Blazor 怎么集成 SignalR

来源:这里教程网 时间:2026-02-21 17:33:11 作者:

Blazor 集成 SignalR 主要分服务端 Hub 定义、客户端连接、消息收发三步,WebAssembly(WASM)和 Server 两种模式逻辑一致,但推荐用 WASM 模式——避免服务器端重复连接消耗资源。

服务端:定义 Hub 并注册

在 ASP.NET Core 后端项目中新建一个继承 Hub 的类,比如

ChatHub

方法用
public async Task
声明,可被客户端调用
Clients.All.SendAsync
Clients.Client(connectionId).SendAsync
推送消息
Program.cs
中注册 SignalR 服务和 Hub 端点:
builder.Services.AddSignalR().AddMessagePackProtocol();<br>app.MapHub<ChatHub>("/chatHub");

客户端:安装包并建立连接

在 Blazor WebAssembly 项目中,先安装 NuGet 包:

Microsoft.AspNetCore.SignalR.Client
如需高性能序列化,加装
Microsoft.AspNetCore.SignalR.Protocols.MessagePack

在组件或服务中创建连接:

private HubConnection hubConnection;<br>hubConnection = new HubConnectionBuilder()<br>    .WithUrl(navigationManager.ToAbsoluteUri("/chatHub"))<br>    .Build();<br>await hubConnection.StartAsync();

收发消息:绑定事件 + 调用方法

连接建立后,就能双向通信了:

hubConnection.On<t>("MethodName", handler)</t>
监听服务器推送,例如:
On<string>("ReceiveMessage", msg => { messages.Add(msg); StateHasChanged(); })</string>
hubConnection.InvokeAsync("MethodName", args...)
调用服务器方法,参数类型和顺序必须严格匹配
建议在
OnInitializedAsync
中启动连接,在
DisposeAsync
中显式停止并释放连接

常见注意点

几个容易出错的地方:

URL 必须和服务端
MapHub
的路径完全一致(含大小写),且不能漏掉前导斜杠
服务器启用
EnableDetailedErrors = true
仅用于开发,上线前关闭
WASM 客户端不支持依赖注入
HubConnectionBuilder
到组件属性,应通过服务封装或手动构建
跨域请求需在服务端配置 CORS,允许前端域名 基本上就这些。

相关推荐