SignalR - Chenh

SignalR#

介紹#

SignalR 的作用是建立穩定的 WebSocket 連接，使得服務端可以向客戶端發送訊息。

使用方式#

服務端#

使用.net 環境

為專案添加 SignalR netget 包
建立 Hubs 資料夾
在資料夾下建立第一個 SignalHub : Hub

在該類下建立我們的「信號」

using Microsoft.AspNetCore.SignalR;
// ...
// Signal也可以攜帶參數
public async Task OrgnizationSignal(){
  await Clients.All.SendAsync("orgnizationChanged");
}

為專案添加 SignalR 服務

// Program.cs 中
using CMS_miniAPI.Hubs;
//...
builder.services.AddSignalR();
// 路由映射
var app = builder.Build();
app.MapHub<SignalHub>("/signalHub");

app.Run();

客戶端 web#

這裡就用 Vue-web 客戶端為例

為專案安裝 SignalR 包

npm install @microsoft/signalr
在 main.js 中引入

import { HubConnectionBuild } from '@microsoft/signalr'

建立連接

const connection = new HubConnectionBuild()
	.withUrl('/signalhub')
	.build();
// 建立監聽
connection.on('orgnizationChanged',()=>{
  console.log("message");
})
connection.start();

可以在 web 端將 signalr 打包，在需要的地方建立連接。

注意#

當在 Program.cs 中添加 signalR 服務後，就已經可以正常工作了。
Hubs 衍生類的作用是存放客戶端的 SignalR 方法調用，web 客戶端使用connection.invoke("name", {data}) 方式調用。視窗程式類似，調用連接物件的invoke方法。
需要服務端直接發送訊息，可以在調用hubContext.Clients.All.SendAsync('name', data)
hubContext 存放的是當前與伺服器建立連接的訊息，包括客戶端列表。
Connection 則是客戶端建立的一條 signalR 通行連接。
換一種理解方式，把 Hub 中的方法稱作SignalR 服務端方法，把客戶端的connection.on('name', func)稱作SignalR 客戶端方法。兩邊都可以相互調用。服務端使用SendAsync調用客戶端，客戶端使用invoke調用服務端。

參考資料#

Web 實時通訊，SignalR 真香，不用愁了 - Code 綜藝圈 - 博客園 (cnblogs.com)