使用 .NET Core 7 SignalR 构建实时聊天应用程序

原创于 2025-06-20 10:06:07 发布 · 636 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#SignalR #.NET7

.Net Core 专栏收录该内容

140 篇文章

订阅专栏

示例代码： https://download.csdn.net/download/hefeng_aspnet/90984732

介绍

实时通信已成为现代 Web 应用程序不可或缺的一部分。无论您构建的是聊天应用程序、协作工作区还是实时仪表板，都需要一种可靠且高效的方式来实时发送和接收消息。SignalR 正是为此而生。

ASP.NET Core 中的 SignalR 是什么？

SignalR 是 ASP.NET Core 的实时通信库。它允许您构建实时 Web 应用程序，这些应用程序可以在消息可用时立即将消息推送到客户端。SignalR 使用 WebSocket 作为默认传输协议，但它也可以使用其他传输协议，例如服务器发送事件 (SSE) 和长轮询。

本文将向您展示如何使用.NET Core 7 和SignalR构建实时聊天应用程序。我们将涵盖以下主题：

1、设置项目
2、创建聊天中心
3、创建聊天 UI
4、运行应用程序

让我们开始吧！

1. 设置项目

首先，让我们创建一个新的ASP.NET Core 7 项目。打开 Visual Studio 并选择“创建新项目”。选择“ASP.NET Core Web 应用程序”作为项目类型并命名。

接下来，选择“Web 应用程序”作为项目模板，并确保未选中“启用 Docker 支持”。点击“创建”即可创建项目。

创建项目后，打开“Program.cs”文件并添加以下代码以添加 SignalR，

builder.Services.AddSignalR();
builder.Services.AddControllersWithViews();

2. 创建聊天中心

聊天中心用于处理服务器和客户端之间的所有实时通信。让我们在项目的“Hubs”文件夹中创建一个名为“ChatHub”的新类。

将以下代码添加到类中。

using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

namespace YourProjectName.Hubs
{
public class ChatHub : Hub
{
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}
}

我们定义了一个名为“SendMessage”的方法，它接受两个参数：“user”和“message”。此方法通过调用“Clients”对象上的“SendAsync”方法向所有连接的客户端发送消息。此代码创建一个继承自 SignalR Hub 类的新 Hub 类。

现在我们已经创建了聊天中心，接下来必须配置 SignalR 中间件才能使用它。在“Program.cs”文件的“Configure”方法中添加以下代码：现在我们已经创建了聊天中心，接下来必须配置 SignalR 中间件才能使用它。在“Program.cs”文件的“Configure”方法中添加以下代码：

app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
app.MapHub<ChatHub>("/chatHub");

此代码通过将“/chatHub”URL 映射到 ChatHub 类来配置 SignalR 中间件以使用聊天中心。

3.创建聊天UI

现在我们已经创建了聊天中心，接下来必须为我们的聊天应用程序创建一个 UI。本教程将使用一个简单的 HTML 页面和一些 JavaScript 代码来处理实时通信。

在项目的“index.html”文件中，添加以下代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Real-Time Chat with SignalR</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/5.0.13/signalr.min.js"></script>
</head>
<body>
<div>
<input type="text" id="username" placeholder="Enter your username" />
<input type="text" id="message" placeholder="Enter your message" />
<button id="sendButton">Send</button>
</div>
<div id="chatBox"></div>
<script>
var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

connection.on("ReceiveMessage", function (user, message) {
var encodedUser = $("<div />").text(user).html();
var encodedMsg = $("<div />").text(message).html();
$("#chatBox").append("<p><strong>" + encodedUser + "</strong>: " + encodedMsg + "</p>");
});

$("#sendButton").click(function () {
var user = $("#username").val();
var message = $("#message").val();
connection.invoke("SendMessage", user, message);
$("#message").val("").focus();
});

connection.start().then(function () {
console.log("Connected!");
}).catch(function (err) {
console.error(err.toString());
});
</script>
</body>
</html>

这段代码创建了一个基本的 UI，其中包含一个用户名输入框、一个消息输入框和一个“发送”按钮。它还创建了一个 id 为“chatBox”的 div，用于显示聊天消息。

在 JavaScript 代码中，我们使用 URL“/chatHub”（我们在“Startup.cs”文件中将其映射到 ChatHub 类）创建一个新的 SignalR 连接。然后，我们定义一个函数来处理“ReceiveMessage”事件，每当服务器向客户端发送消息时都会调用该函数。此函数将消息附加到 chatBox div 中。

我们还为“发送”按钮定义了一个点击事件处理程序，该处理程序使用用户的姓名和消息在服务器上调用“SendMessage”方法。最后，我们启动 SignalR 连接，并在连接建立时将一条消息记录到控制台。