SignalR入门教程：为你的ASP.NET Core应用添加实时Web功能-C#.Net教程-PHP中文网

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

畫卷琴夢

发布： 2025-12-08 21:23:57

原创

335人浏览过

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 函数。

乾坤圈新媒体矩阵管家

新媒体账号、门店矩阵智能管理系统

219

查看详情

步骤 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 表单，你就能看到实时聊天效果。