Blazor 与 SignalR 实现实时通信教程_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

Blazor 与 SignalR 实现实时通信教程

2025-12-15

浏览次数：次

返回列表

Blazor 与 SignalR 结合可实现 C# 全栈实时交互，无需大量 J*aScript；Server 模式支持 HubContext 直推，WASM 需手动管理连接并注意跨域；需用 DTO 传参、调整 Circuit 超时、异步建连防 JS 未就绪。

blazor 与 signalr 实现实时通信教程

Blazor 和 SignalR 结合，能让你在 .NET 生态里轻松做出真正的实时交互页面，比如聊天室、实时仪表盘、协同编辑——不用写一堆 J*aScript 就能双向推拉数据。

为什么选 Blazor + SignalR 而不是纯 JS 方案？

Blazor（尤其是 Server 或 WebAssembly + Auto 模式）允许你用 C# 写前端逻辑；SignalR 则负责底层连接管理、自动重连、协议协商（WebSocket / Server-Sent Events / Long Polling）。两者配合，业务逻辑全在 C# 侧，前后端类型一致、调试统一、共享模型类，省去 JSON 序列化/反序列化的隐式成本和类型错位风险。

快速接入 SignalR 的三步走

服务端：注册 Hub 并启用 SignalR 在 Program.cs 中加：
builder.Services.AddSignalR();
app.MapHub<chathub>("/hub/chat");</chathub>
写一个 Hub 类（例如 ChatHub.cs）：
继承 Hub，公开方法供客户端调用（如 SendAsync），用 Clients.All.SendAsync 或 Clients.Group.SendAsync 推送消息。
客户端：在 Blazor 组件中连接 Hub 使用 @inject HubConnection（Server）或 HubConnectionBuilder（WASM），在 OnInitializedAsync 建连，DisposeAsync 断连。记得处理 OnClosed 和重连逻辑。

Blazor Server 与 WASM 的关键差异点

Server 模式下，Hub 连接天然共享同一个 Circuit，可直接注入 HubContext 从服务层触发推送（比如数据库变更后通知前端）；WASM 则必须走完整 HTTP + WebSocket 连接，无法直连服务容器，需通过 API 中间层或使用 HubConnection 手动管理生命周期。另外，WASM 客户端要引用 Microsoft.AspNetCore.SignalR.Client 包，并注意跨域和证书问题（尤其开发时用 HTTPS）。

华友协同办公自动化OA系统

华友协同办公管理系统(华友OA)，基于微软最新的.net 2.0平台和SQL Server数据库，集成强大的Ajax技术，采用多层分布式架构，实现统一办公平台，功能强大、价格便宜，是适用于企事业单位的通用型网络协同办公系统。系统秉承协同办公的思想，集成即时通讯、日记管理、通知管理、邮件管理、新闻、考勤管理、短信管理、个人文件柜、日程安排、工作计划、工作日清、通讯录、公文流转、论坛、在线调查、

0 查看详情华友协同办公自动化OA系统

避坑提醒：几个高频问题

Hub 方法参数必须是可序列化的简单类型或你定义的 DTO 类（别传 DbContext 或 IQueryable）
Blazor Server 默认开启 Circuit 自动断开，长时间无操作会中断 SignalR 连接——可在 App.razor 里用 CircuitOptions 调整超时
WASM 中不要在 OnInitialized 启动连接，要用 OnInitializedAsync + await，否则可能报“JS interop not ready”
调试时打开浏览器 Network 面板，看 /hub/chat 是否建立 WebSocket，避免被代理或防火墙静默拦截