?
如今的應用程序常常需要與用戶進行實時通信，無論是發送即時通知、提供實時聊天功能，還是動態更新儀表盤都是如此。SignalR是一個.NET庫，它通過支持服務器與客戶端之間的雙向通信，簡化了實時應用程序的開發。
在本指南中，我們將深入探究SignalR，涵蓋其主要用例，并通過一個用C#編寫的實際示例來創建一個實時應用程序。
什么是SignalR？ SignalR是一個.NET庫，它通過使服務器在有更新可用時能立即將數據推送給客戶端（無需客戶端主動請求），來促進實時通信。SignalR構建于WebSocket之上，并且為了兼容性考慮（作為備用方案），它還會使用諸如服務器發送事件（Server-Sent Events）和長輪詢（Long Polling）等其他技術，以確保能跨不同平臺正常工作。
工作原理 SignalR使用“中心（Hubs）”來管理服務器與客戶端之間的通信。“中心”是一個類，你可以在其中定義能被客戶端和服務器調用的方法，從而簡化實時應用程序中復雜的交互操作。
關鍵用例
在.NET中設置SignalR 步驟1：創建項目 打開Visual Studio并創建一個新的ASP.NET Core Web應用程序。 選擇“API”或者“Web應用程序”作為項目類型。 在.csproj文件中，確保列出了“Microsoft.AspNetCore.SignalR”；如果沒有，通過NuGet添加它。
步驟2：配置SignalR 在Startup.cs文件中，在ConfigureServices方法中添加SignalR配置：
public void ConfigureServices(IServiceCollection services)
{
services.AddControllersWithViews();
services.AddSignalR(); // 將SignalR添加到應用程序的服務中
}
然后，在Configure方法中添加SignalR映射：
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
endpoints.MapHub<ChatHub>("/chatHub"); // 將ChatHub映射到“/chatHub”路由
});
}
步驟3：創建“中心” 讓我們創建一個“中心”來管理聊天功能。
在項目中，添加一個名為“Hubs”的文件夾。 在“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);
}
}
在這里，SendMessage方法允許客戶端向服務器發送消息，然后服務器使用Clients.All.SendAsync將該消息轉發給所有已連接的客戶端。
實際示例：使用JavaScript實現客戶端 現在，讓我們創建一個簡單的HTML和JavaScript界面，用于連接到“中心”并發送/接收消息。
在項目中，添加一個名為index.html的文件，內容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用SignalR的實時聊天</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/6.0.0/signalr.min.js"></script>
</head>
<body>
<h2>聊天</h2>
<input type="text" id="userInput" placeholder="你的名字..." />
<input type="text" id="messageInput" placeholder="輸入一條消息..." />
<button onclick="sendMessage()">發送</button>
<ul id="messagesList"></ul>
<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>
這段代碼連接到“中心”，并定義了發送消息以及實時顯示接收到的消息的函數。
其他用例 通知 對于通知系統，你可以在“中心”中創建一個方法，比如SendNotification，然后調用該方法向所有客戶端或特定的客戶端群組發送特定通知。
public async Task SendNotification(string notification)
{
await Clients.All.SendAsync("ReceiveNotification", notification);
}
動態儀表盤 一個需要展示實時數據（比如銷售數據或系統監控數據）的儀表盤可以使用類似的方法。你可以定義一些方法，用接收到的新數據來更新客戶端。
public async Task UpdateDashboardData(string data)
{
await Clients.All.SendAsync("ReceiveDashboardData", data);
}
SignalR簡化了實時應用程序的構建，實現了快速、動態的交互。本指南涵蓋了創建聊天應用程序的基本步驟，同樣的概念也可應用于諸如通知和儀表盤等其他用例。
借助SignalR，你的系統能夠快速適應變化，使其非常適用于許多現代場景。
閱讀原文：原文鏈接
該文章在 2024/12/31 11:35:27 編輯過
400 186 1886
