示例代码： 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 连接，并在连接建立时将一条消息记录到控制台。
4.运行应用程序
现在我们可以运行应用程序了。按 F5 键以调试模式启动应用程序。应用程序运行后，您应该会看到带有输入字段和"发送"按钮的聊天 UI。按 F5 键以调试模式启动应用程序。应用程序运行后，您应该会看到带有输入字段和"发送"按钮的聊天 UI。现在我们可以运行应用程序了。
输入您的姓名和消息，然后点击"发送"按钮。您应该会看到您的消息出现在聊天框中。打开另一个浏览器窗口并导航到相同的网址。输入不同的姓名并发送消息。您应该会在两个窗口中都看到该消息。
恭喜，您刚刚使用 .NET Core 7 和 SignalR 构建了一个实时聊天应用程序！
结论
本文将向您展示如何使用 .NET Core 7 和SignalR构建实时聊天应用程序。我们介绍了设置项目、创建聊天中心和创建聊天 UI 的基础知识。希望本教程能帮助您了解 SignalR 的强大功能以及如何使用它来构建实时 Web 应用程序。祝您编程愉快！
如果您喜欢此文章，请收藏、点赞、评论，谢谢，祝您快乐每一天。