SignalR 介紹
SignalR 是一個開源的實時通信庫,用於構建實時、雙向的應用程序。它提供了簡化實時通信的功能,允許服務器主動向客戶端推送數據,實現實時更新和即時通知的功能。SignalR 具有高度集成性、跨平臺支持和可擴展性,適用於實時聊天、在線遊戲、監控系統等各種應用場景。
SignalR 提供了多種實時通信技術
-
WebSocket:SignalR 使用 WebSocket 作爲首選的實時通信協議,WebSocket 提供了低延遲、雙向通信的能力,並且在服務器和客戶端之間建立持久連接,支持實時數據推送和接收。
-
Server-Sent Events(SSE):當瀏覽器或客戶端支持 SSE 但不支持 WebSocket 時,SignalR 可以使用 Server-Sent Events 進行實時通信。SSE 是一種基於 HTTP 的單向通信協議,服務器可以主動向客戶端推送事件消息。
-
Long Polling:對於不支持 WebSocket 和 SSE 的環境,SignalR 使用長輪詢(Long Polling)作爲備選方法。長輪詢是一種模擬實時通信的技術,客戶端發送請求給服務器,服務器保持請求打開並等待新數據到達時再響應。
-
其他傳輸方式:除了 WebSocket、SSE 和長輪詢,SignalR 還支持其他傳輸方式,如 Forever Frame(一個使用隱藏的 iframe 來模擬實時通信的技術)和 AJAX 短輪詢(在每次請求中都進行輪詢以獲取最新數據)。
通過支持多種實時通信技術,SignalR 在不同的環境中能夠選擇最佳的通信方式,從而實現實時、可靠的雙向通信。這使得開發者可以構建適應不同網絡和瀏覽器的實時應用程序,並提供優秀的用戶體驗。
集線器 hub
SignalR 中的集線器(Hub)是一種特殊的組件,它充當了服務器和客戶端之間的中間人,用於處理實時通信的邏輯。通過使用集線器,開發人員可以簡化實時通信的編程模型。
SignalR 集線器提供以下功能:
-
客戶端與服務器之間的方法調用:在集線器中定義的方法可以由客戶端調用,而客戶端也可以定義方法供集線器調用。這使得服務器和客戶端能夠相互之間進行雙向的方法調用,方便實現實時數據傳輸和通信。
-
組管理:集線器支持將客戶端連接分組,並對組進行管理。這樣,可以將特定的客戶端連接到同一個組中,以實現廣播消息或針對特定組發送消息的功能。
-
生命週期管理:集線器管理客戶端連接的生命週期,可以在客戶端連接建立、斷開或重新連接時觸發相應的事件。這些事件可以用於執行一些初始化或清理操作,以及監控連接狀態。
-
狀態管理:集線器可以存儲和管理與客戶端連接相關的狀態信息,這些信息可以在不同的方法調用之間共享。這對於跟蹤和管理用戶狀態是很有用的,例如聊天應用程序中的在線用戶列表。
在 SignalR 中,集線器是通過繼承 Hub 類來創建的。開發人員可以在集線器中定義服務器端和客戶端之間的方法,並使用相應的客戶端庫來調用這些方法。
SignalRDemo
1.創建web應用
2.添加集線器hub
public class ChatHub : Hub
{
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}
3.Program.cs 添加註入與終結點
JavaScript客戶端調用
- 在“解決方案資源管理器”>中,右鍵單擊項目,然後選擇“添加”“客戶端庫”。
- 在“添加客戶端庫”對話框中,對於“提供程序”,選擇“unpkg”。
- 對於“庫”,輸入 @microsoft/signalr@latest。
修改Pages/Index.cshtml
@page
<div class="container">
<div class="row"> </div>
<div class="row">
<div class="col-2">User</div>
<div class="col-4"><input type="text" id="userInput" /></div>
</div>
<div class="row">
<div class="col-2">Message</div>
<div class="col-4"><input type="text" id="messageInput" /></div>
</div>
<div class="row"> </div>
<div class="row">
<div class="col-6">
<input type="button" id="sendButton" value="Send Message" />
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-6">
<ul id="messagesList"></ul>
</div>
</div>
<script src="~/lib/microsoft/signalr/dist/browser/signalr.js"></script>
<script type="text/javascript">
"use strict";
//創建一個與 SignalR 服務器建立連接的新的 HubConnection 對象,並將其配置爲連接到指定的路徑 "/chatHub"
var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
//建立連接後,"Send Message" 纔可以使用
document.getElementById("sendButton").disabled = true;
//接收信息方法
connection.on("ReceiveMessage", function (user, message) {
var li = document.createElement("li");
document.getElementById("messagesList").appendChild(li);
li.textContent = `${user} says ${message}`;
});
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;
// 使用 SignalR 的 HubConnection 對象調用名爲 "SendMessage" 的服務器端方法,並傳遞參數 user 和 message。
connection.invoke("SendMessage", user, message).catch(function (err) {
return console.error(err.toString());
});
event.preventDefault();
});
</script>
爲什麼JavaScript 接收信息方法 connection.on("ReceiveMessage", function (user, message)
爲什麼JavaScript 發送消息方法connection.invoke("SendMessage", user, message)
參考文檔
https://learn.microsoft.com/zh-cn/aspnet/signalr/overview/getting-started/introduction-to-signalr
https://learn.microsoft.com/zh-cn/aspnet/core/signalr/introduction?view=aspnetcore-6.0