在 .NET Core 和 React 中使用 WebSockets 和 SignalR 進行實時數據傳輸

對于需要即時更新和通知的應用程序來說，實時數據傳輸至關重要。在 .NET Core 中，WebSocket 和 SignalR 提供了強大的工具來實現客戶端和服務器之間的實時通信。在本指南中，我們將探討如何在 .NET Core 應用程序中使用 WebSocket 和 SignalR 實現實時數據傳輸。

什么是 WebSockets 和 SignalR？

WebSockets：

WebSockets 是一種通過單個 TCP 連接提供全雙工通信通道的協議。它支持客戶端和服務器之間的雙向通信，允許異步發送和接收數據，而無需 HTTP 輪詢的開銷。

為什么選擇 WebSocket？

?? ?1、實時通信：WebSockets 支持實時數據傳輸，使其成為需要即時更新的應用程序的理想選擇，例如聊天應用程序、實時儀表板和在線游戲平臺。

?? ?2、效率：與傳統的 HTTP 輪詢或長輪詢技術不同，WebSocket 通過維持持久連接、最大限度地減少延遲和減少網絡流量來降低開銷。

?? ?3、全雙工通信：WebSocket 支持雙向同時傳輸數據，允許客戶端和服務器獨立發送和接收消息。

?? ?4、可擴展性：WebSockets 可以高效處理大量并發連接，適用于可擴展和高性能的應用程序。

WebSockets 的替代方案：

雖然 WebSocket 廣泛用于實時通信，但有幾種替代方案也提供類似的功能：

?? ?1、服務器發送事件 (SSE)：SSE 是一種單向通信協議，允許服務器通過 HTTP 連接向客戶端推送更新。與 WebSocket 不同，SSE 僅限于服務器到客戶端的通信，不支持雙向通信。

?? ?2、長輪詢：長輪詢是一種客戶端向服務器發送請求的技術，服務器會保持連接打開，直到有新數據可用或發生超時。雖然長輪詢可以實現實時更新，但由于頻繁建立和關閉連接，其效率低于 WebSocket。

WebSockets 的優點和缺點：

優點：
? 實時更新：WebSockets 支持實時通信，為客戶端提供即時更新。
? 效率：與輪詢技術相比，WebSocket 減少了延遲和網絡開銷。
? 全雙工通信：支持雙向數據傳輸，允許客戶端和服務器同時發送和接收消息。
? 可擴展性：WebSockets 可以高效處理大量并發連接，適合可擴展的應用程序。

缺點：
? 復雜性：實現和管理 WebSocket 連接比傳統的 HTTP 通信更復雜。
? 瀏覽器支持：雖然現代瀏覽器支持 WebSockets，但舊版瀏覽器可能不支持，因此需要回退機制或其他方法。
? 防火墻問題：WebSockets 可能會面臨限制性防火墻或阻止 WebSocket 流量的代理服務器的問題。

SignalR：

SignalR 是一個基于 WebSocket（以及其他傳輸機制）構建的高級庫，可簡化 .NET 應用程序中的實時 Web 功能。它抽象了管理連接的復雜性，并提供了一個簡單的 API 用于向客戶端廣播消息并處理客戶端與服務器之間的通信。

為什么選擇 SignalR？

?? ?1、簡化開發：SignalR 簡化了管理 WebSocket 連接的復雜性，并提供了一個簡單的 API 來實現 .NET 應用程序中的實時功能。它負責連接管理、消息路由和錯誤處理，使開發人員能夠專注于應用程序邏輯。

?? ?2、跨平臺支持：SignalR 支持服務器端 .NET 應用程序和客戶端 JavaScript 框架，使其適合在 Web 應用程序、桌面應用程序和移動應用程序中構建實時功能。

?? ?3、可擴展性：SignalR 旨在隨您的應用程序擴展，支持大量并發連接，并提供擴展到多臺服務器或使用基于云的解決方案（如 Azure SignalR 服務）的選項。

?? ?4、回退機制：對于不支持 WebSocket 的客戶端，SignalR 會自動回退到替代傳輸機制，例如服務器發送事件 (SSE) 或長輪詢，確保跨瀏覽器和設備的廣泛兼容性。

SignalR 的替代方案：

雖然 SignalR 是 .NET 應用程序中實時 Web 功能的熱門選擇，但也有幾種替代方案提供類似的功能：

?? ?1、原始 WebSocket API：開發人員可以使用 .NET 或其他編程語言提供的原始 WebSocket API 來實現實時通信，而無需 SignalR 提供的抽象。但是，這種方法需要更多的手動配置，對開發人員來說可能不太方便。

?? ?2、第三方庫：有一些第三方庫可用于在 .NET 應用程序中實現實時通信，例如 .NET 的 Socket.IO 或 Fleck。這些庫提供了額外的功能和靈活性，但可能需要付出更多努力來集成和維護。

SignalR 的優點和缺點：

優點：
? 簡化開發：SignalR 提供了用于實現實時功能的高級 API，減少了開發時間和復雜性。
? 跨平臺支持：SignalR 支持廣泛的客戶端，包括 Web 瀏覽器、桌面應用程序和移動設備。
? 可擴展性：SignalR 旨在隨您的應用程序擴展，支持大量并發連接并提供擴展到多臺服務器的選項。
? 回退機制：對于不支持 WebSockets 的客戶端，SignalR 會自動回退到替代傳輸機制，確保廣泛的兼容性。

缺點：
? 對 .NET Framework/Core 的依賴：SignalR 與 .NET 生態系統緊密耦合，因此不太適合使用其他技術構建的應用程序。
? 性能開銷：雖然 SignalR 簡化了開發，但與原始 WebSocket 實現相比，它可能會帶來一些性能開銷。
? 復雜性：SignalR 抽象了一些實時通信的復雜性，但在復雜場景中可能仍然需要額外的配置和故障排除。

為什么要使用實時數據傳輸？

實時數據傳輸對于需要實時更新的應用程序至關重要，例如：

?? ?? 聊天應用程序
? 實時儀表板和監控系統
? 協作文檔編輯工具
? 在線游戲平臺
? 股票市場跟蹤應用程序
? 現場體育記分牌

在 .NET Core 中使用 SignalR 實現

步驟1：安裝 SignalR

使用 NuGet 包管理器安裝 SignalR 包：

otnet add package Microsoft.AspNetCore.SignalRadd package Microsoft.AspNetCore.SignalR

步驟2：創建 SignalR Hub

創建一個 SignalR 中心來管理客戶端連接并處理消息廣播。

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);
}
}

步驟3：在啟動中配置 SignalR

在 Startup 類中配置 SignalR 以啟用 WebSocket 支持并映射集線器端點。

public void ConfigureServices(IServiceCollection services)
{
services.AddSignalR();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseRouting();

? ? app.UseEndpoints(endpoints =>
{
endpoints.MapHub<ChatHub>("/chatHub");
});
}

步驟 4：客戶端集成

在客戶端集成SignalR以建立連接并接收實時更新。

<!DOCTYPE html>
<html>
<head>
<title>SignalR Chat</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/signalr/5.0.0/signalr.min.js"></script>
</head>
<body>
<div id="messages"></div>
<input type="text" id="messageInput" />
<button onclick="sendMessage()">Send</button>

? ? <script>
const connection = new signalR.HubConnectionBuilder()
.withUrl("/chatHub")
.build();

? ? ? ? connection.on("ReceiveMessage", (user, message) => {
document.getElementById("messages").innerHTML += `<p><strong>${user}</strong>: ${message}</p>`;
});

? ? ? ? connection.start().then(() => {
console.log("Connected to SignalR hub");
}).catch((err) => {
console.error("Error connecting to SignalR hub:", err);
});

? ? ? ? function sendMessage() {
const user = "User"; // Get user from input
const message = document.getElementById("messageInput").value;
connection.invoke("SendMessage", user, message);
}
</script>
</body>
</html>

讓我們擴展這個示例，包括接收來自客戶端的消息并提供包含后端和前端代碼的端到端解決方案。

后端：帶有 SignalR 的 ASP.NET Core Web API

步驟 1：創建 SignalR Hub

創建一個 SignalR 中心來管理客戶端連接并處理消息廣播。

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);
}

? ? public void ReceiveMessage(string user, string message)
{
// Handle received message (e.g., save to database, process, etc.)
}
}

步驟2：在啟動中配置 SignalR

在 Startup 類中配置 SignalR 以啟用 WebSocket 支持并映射集線器端點。

public void ConfigureServices(IServiceCollection services)
{
services.AddSignalR();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseRouting();

? ? app.UseEndpoints(endpoints =>
{
endpoints.MapHub<ChatHub>("/chatHub");
});
}

步驟3：創建用于接收消息的控制器

創建一個控制器來處理來自客戶端的傳入消息。

using Microsoft.AspNetCore.Mvc;

[Route("api/[controller]")]
[ApiController]
public class ChatController : ControllerBase
{
private readonly IHubContext<ChatHub> _hubContext;

? ? public ChatController(IHubContext<ChatHub> hubContext)
{
_hubContext = hubContext;
}

? ? [HttpPost("ReceiveMessage")]
public async Task<IActionResult> ReceiveMessage(string user, string message)
{
await _hubContext.Clients.All.SendAsync("ReceiveMessage", user, message);
return Ok();
}
}

前端：使用 SignalR 的 React UI

步驟1：安裝 SignalR 客戶端庫

使用 npm 安裝 JavaScript 的 SignalR 客戶端庫。

npm install @microsoft/signalr

步驟2：創建WebSocket連接

創建與 SignalR 集線器的 WebSocket 連接并處理傳入消息。

import React, { useState, useEffect } from 'react';
import * as signalR from '@microsoft/signalr';

const Chat = () => {
const [messages, setMessages] = useState([]);
const [connection, setConnection] = useState(null);

? ? useEffect(() => {
const newConnection = new signalR.HubConnectionBuilder()
.withUrl("/chatHub")
.build();

? ? ? ? newConnection.on("ReceiveMessage", (user, message) => {
setMessages([...messages, { user, message }]);
});

? ? ? ? newConnection.start()
.then(() => console.log("Connected to SignalR hub"))
.catch(error => console.error("Error connecting to SignalR hub:", error));

? ? ? ? setConnection(newConnection);
}, []);

? ? const sendMessage = () => {
const user = "User"; // Get user from input
const message = "Hello, SignalR!"; // Get message from input
connection.invoke("SendMessage", user, message)
.catch(error => console.error("Error sending message:", error));
};

? ? return (
<div>
<div>
{messages.map((message, index) => (
<div key={index}>
<strong>{message.user}</strong>: {message.message}
</div>
))}
</div>
<input type="text" />
<button onClick={sendMessage}>Send</button>
</div>
);
};

export default Chat;

總結

????????在本指南中，我們探討了如何在 .NET Core 應用程序中使用 WebSocket 和 SignalR 實現實時數據傳輸。利用 SignalR，您可以輕松實現客戶端和服務器之間的實時通信，使其成為構建交互式協作 Web 應用程序的理想選擇。無論您是構建聊天應用程序、實時儀表板還是多人游戲，SignalR 都能提供向用戶提供實時更新所需的工具。

????????我們演示了如何在 .NET Core 后端和 React 前端使用 SignalR 實現實時消息傳遞。用戶可以從前端發送消息，然后由后端 SignalR 中心接收并廣播到所有連接的客戶端。這種端到端解決方案為 Web 應用程序提供了無縫的實時消息傳遞體驗。

如果您喜歡此文章，請收藏、點贊、評論，謝謝，祝您快樂每一天。