SignalR 是一个开源库，用于在 ASP.NET Core 应用程序中实现实时 Web 功能。它允许服务器端代码与客户端代码进行双向通信。在本教程中，我们将学习如何在 ASP.NET Core 应用程序中集成 SignalR。
步骤 1：创建新的 ASP.NET Core 项目
首先，创建一个新的 ASP.NET Core Web 应用程序项目。打开命令提示符或终端，然后运行以下命令：
dotnet new webapp -o AspNetCoreSignalRApp这将创建一个名为 AspNetCoreSignalRApp 的新项目。
步骤 2：安装 SignalR 客户端库
进入项目目录，然后运行以下命令以安装 SignalR 客户端库：
cd AspNetCoreSignalRApp
dotnet add package Microsoft.AspNetCore.SignalR.Client步骤 3：配置 SignalR
在 Startup.cs 文件中，我们需要配置 SignalR。首先，确保已安装以下 NuGet 包：
dotnet add package Microsoft.AspNetCore.SignalR然后，在 Startup.cs 文件中添加 SignalR 服务并配置路由：
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddSignalR();
services.AddControllersWithViews();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Home/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapHub<ChatHub>("/chatHub");
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
}
}步骤 4：创建 SignalR Hub
在项目中创建一个名为 Hubs 的新文件夹。在其中创建一个名为 ChatHub.cs 的新文件，并添加以下代码：
using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;
public class ChatHub : Hub
{
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}步骤 5：创建前端页面
在 wwwroot 文件夹中创建一个名为 chat.html 的新文件，并添加以下代码：
<!DOCTYPE html>
<html>
<head>
<title>SignalR Chat</title>
<script src="~/lib/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>
</head>
<body>
<div id="chat">
<input type="text" id="userInput" placeholder="User">
<input type="text" id="messageInput" placeholder="Message">
<button id="sendButton">Send</button>
</div>
<ul id="messagesList"></ul>
</body>
</html>步骤 6：创建 JavaScript 文件
在 wwwroot/js 文件夹中创建一个名为 chat.js 的新文件，并添加以下代码：
"use strict";
var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
connection.on("ReceiveMessage", function (user, message) {
var msg = message.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
var encodedMsg = user + " says " + msg;
var li = document.createElement("li");
li.textContent = encodedMsg;
document.getElementById("messagesList").appendChild(li);
});
connection.start().then(function () {
document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
return console.error(err.toString());
});
document.getElementById("sendButton").addEventListener("click", function (event) {
var user = document.getElementById("userInput").value;
var message = document.getElementById("messageInput").value;
connection.invoke("SendMessage", user, message).catch(function (err) {
return console.error(err.toString());
});
event.preventDefault();
});步骤 7：修改 HomeController
在 HomeController.cs 文件中，添加一个新的操作方法以返回 chat.html 页面：
public IActionResult Chat()
{
return View("~/Views/Home/chat.cshtml");
}同时，更新 Index 方法以包含对 Chat 操作的链接：
public IActionResult Index()
{
ViewData["Message"] = "Welcome to ASP.NET Core SignalR App!";
return View();
}步骤 8：修改 Index.cshtml
在 Views/Home 文件夹中，更新 Index.cshtml 文件以包含指向聊天页面的链接：
<h1>@ViewData["Message"]</h1>
<a href="/Home/Chat">Go to Chat</a>步骤 9：运行应用程序
现在，您可以运行应用程序并在浏览器中访问 https://localhost:5001/Home/Chat。您应该能够看到聊天界面，并与其他连接的客户端进行实时通信。
这就是在 ASP.NET Core 应用程序中集成 SignalR 的基本步骤。您可以根据需要扩展此示例，例如添加身份验证、分组聊天等功能。