SignalR入门教程:为你的ASP.NET Core应用添加实时Web功能

27次阅读

SignalR是ASP.NET Core用于实现实时通信的库,支持websocket等传输方式,通过定义Hub类实现消息广播。首先安装microsoft.AspNetCore.SignalR包,然后创建ChatHub类处理消息发送,接着在Program.cs中注册服务并映射/chathub路由。前端引入signalr.min.js后,用HubConnectionBuilder连接Hub,通过connection.on接收消息,invoke调用服务端方法。部署时需确保服务器支持WebSocket,负载均衡场景使用redis背板同步多实例消息,并处理连接生命周期与异常重试。

SignalR入门教程:为你的ASP.NET Core应用添加实时Web功能

想让你的ASP.NET Core应用支持实时通信?比如聊天室、实时通知或数据看板?SignalR 是微软为 .NET 开发者提供的强大工具,能轻松实现服务器主动向客户端推送消息。它封装了 WebSocket、长轮询等底层技术,让你无需关心兼容性问题。

什么是 SignalR?

SignalR 是 ASP.NET Core 的一个库,用于简化实时 Web 功能的开发。它允许服务器在数据更新时立即推送给客户端,而不是等待客户端请求。客户端可以是浏览器(通过 javaScript)、移动应用或其他服务。

核心特点包括:

  • 自动选择最佳传输方式:优先使用 WebSocket,降级到长轮询等
  • API 简洁:只需定义 Hub 类,即可处理客户端连接和消息收发
  • 跨平台支持:适用于浏览器、.NET 客户端、移动端等

创建一个简单的实时聊天功能

下面带你一步步在 ASP.NET Core 项目中集成 SignalR,实现一个基础聊天室。

步骤 1:安装 NuGet 包

在你的 ASP.NET Core 项目中,通过 NuGet 安装 SignalR 服务端包:

dotnet add package Microsoft.AspNetCore.SignalR

步骤 2:定义 Hub 类

Hub 是 SignalR 的核心组件,负责处理客户端连接和消息交换。创建一个继承Hub 的类:

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

这个方法会将消息广播给所有连接的客户端,调用客户端上的 ReceiveMessage 函数。

步骤 3:配置 Startup 或 Program 文件

Program.cs 中注册 SignalR 服务并映射 Hub 路由:

var builder = Webapplication.CreateBuilder(args);  // 添加 SignalR 服务 builder.Services.AddSignalR();  var app = builder.Build();  app.UseRouting();  // 映射 ChatHub 到 /chathub app.MapHub<ChatHub>("/chathub");  app.Run();

前端连接 SignalR Hub

使用 javascript 客户端连接到 Hub。引入 SignalR 客户端库(可通过 CDN):

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

然后编写连接代码:

const connection = new signalR.HubConnectionBuilder()     .withUrl("/chathub")     .build();  // 接收消息 connection.on("ReceiveMessage", function (user, message) {     const msg = document.createElement("div");     msg.textContent = `${user}: ${message}`;     document.getElementById("messages").appendChild(msg); });  // 启动连接 connection.start().catch(err => console.error(err));  // 发送消息 function sendMessage() {     const user = document.getElementById("user").value;     const message = document.getElementById("message").value;     connection.invoke("SendMessage", user, message).catch(err => console.error(err)); }

搭配简单 html 表单,你就能看到实时聊天效果。

部署与注意事项

SignalR 在开发环境运行良好,但上线时需要注意:

  • 使用支持 WebSocket 的服务器iis 需启用 WebSocket,Kestrel 原生支持
  • 负载均衡时启用 Sticky Sessions 或使用 Redis 背板(Backplane) 实现多实例间消息同步
  • 处理连接生命周期:重写 OnConnectedAsyncOnDisconnectedAsync 方法可跟踪用户上下线

基本上就这些。SignalR 让实时功能变得像写普通 API 一样简单。只要定义 Hub 和消息方法,前后端就能高效通信。不复杂,但容易忽略连接管理和异常处理,建议在生产环境中加入日志和重试机制。

text=ZqhQzanResources