ASP.NET Core SignalR 入门指南

大家好，欢迎来到IT知识分享网。

引言

ASP.NET Core SignalR 是一个开放源代码库，用于简化向应用程序添加实时 Web 功能。实时 Web 功能允许服务器端代码在数据可用时立即将内容推送到连接的客户端，而不是让客户端周期性地轮询服务器以获取新数据。SignalR 特别适用于需要高频率数据更新的场景，如聊天应用、实时仪表板、游戏和协作工具等。

本文将介绍如何在 ASP.NET Core 项目中使用 SignalR，并提供一个简单的聊天应用示例代码。

SignalR 的基本概念

Hub

Hub 是 SignalR 的核心组件，它是一个类，用作处理客户端和服务器之间通信的高级管道。Hub 允许客户端和服务器分别调用对方的方法，SignalR 自动处理跨计算机边界的调度。

连接管理

SignalR 自动处理连接管理，包括连接的建立、保持和断开。客户端和服务器之间的连接是持久的，这与传统的 HTTP 连接不同，后者针对每次通信都需要重新建立连接。

消息传递

SignalR 支持将消息同时发送到所有连接的客户端、特定客户端或客户端组。它还支持客户端到服务器的消息传递。

实时通信技术

SignalR 支持多种实时通信技术，包括 WebSockets、Server-Sent Events 和 Long Polling。SignalR 会根据服务器和客户端的功能自动选择最佳传输方法。

SignalR 入门示例：聊天应用

1. 创建 ASP.NET Core 项目

首先，使用 Visual Studio 或 .NET CLI 创建一个新的 ASP.NET Core Web 应用程序。选择 Web 应用程序（Model-View-Controller）作为项目模板。

2. 添加 SignalR 支持

a. 安装 NuGet 包

在项目中安装 SignalR 的 NuGet 包。通过 NuGet 包管理器或命令行运行以下命令：

dotnet add package Microsoft.AspNetCore.SignalR

b. 创建 Hub 类

在项目中创建一个新的文件夹，命名为 Hubs，并在其中创建一个新的 C# 类 ChatHub.cs。该类将继承自 Hub 类，用于处理聊天消息的发送和接收。

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

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

c. 配置 SignalR

在 Startup.cs 或 Program.cs（取决于你使用的 ASP.NET Core 版本）中配置 SignalR 服务，并将 Hub 映射到路由。

// Program.cs 或 Startup.cs
public void ConfigureServices(IServiceCollection services)
{
 services.AddControllersWithViews();
 services.AddSignalR();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
// ... 其他中间件配置 ...

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

3. 创建客户端

a. 添加 SignalR 客户端库

在客户端项目中（如一个 HTML/JavaScript 项目），通过 npm 或直接从 CDN 添加 SignalR 客户端库。

npm install @microsoft/signalr

或在 HTML 文件中直接引入：

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

b. 编写客户端代码

创建一个 HTML 文件，并在其中编写 JavaScript 代码以连接到 SignalR Hub，并处理接收到的消息。

<!DOCTYPE html>
<html>
<head>
<title>Chat Room</title>
</head>
<body>
<input type="text" id="userInput" placeholder="Enter your name" />
<input type="text" id="messageInput" placeholder="Enter message" />
<button onclick="sendMessage()">Send</button>
<ul id="messagesList"></ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/3.1.9/signalr.min.js"></script>
<script>
const connection = new signalR.HubConnectionBuilder()
 .withUrl("/chatHub")
 .build();

 connection.on("ReceiveMessage", (user, message) => {
const li = document.createElement("li");
 li.textContent = `${user}: ${message}`;
document.getElementById("messagesList").appendChild(li);
 });

 connection.start().catch(err => console.error(err.toString()));

function sendMessage() {
const user = document.getElementById("userInput").value;
const message = document.getElementById("messageInput").value;
 connection.invoke("SendMessage", user, message).catch(err => console.error(err.toString()));
 }
</script>
</body>
</html>

4. 运行和测试

运行 ASP.NET Core 应用程序，并在浏览器中打开包含客户端代码的 HTML 文件。在多个浏览器标签页或窗口中打开相同的页面，尝试发送消息，并观察消息如何在所有打开的标签页中实时更新。

结论

通过本文，你应该了解了 ASP.NET Core SignalR 的基本概念，并学会了如何在一个简单的聊天应用中使用 SignalR。SignalR 提供了强大的实时通信功能，适用于需要实时数据更新的各种应用场景。希望这篇入门指南能帮助你开始使用 SignalR 来构建更加动态和交互式的 Web 应用程序。

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/162255.html