【SignalR全套系列】之在.Net Core 中實現SignalR實時通訊

​

 微信公眾號：趣程式設計ACE
關注可瞭解更多的.NET日常實戰開發技巧，如需原始碼 請公眾號後臺留言 原始碼
[如果覺得本公眾號對您有幫助，歡迎關注]

前文回顧

【SignalR全套系列】之在.NetCore中實現WebSocket雙工通訊

【SignalR全套系列】之在.Net Core 中實現Server-Send Events訊息推送

【SignalR全套系列】之在.Net Core 中實現長輪詢

---

SignalR 的基本使用

原文連結：【SignalR全套系列】之在.Net6中實SignalR通訊

---

簡介

1.SignalR是一個微軟開源的庫，作用於客戶端與服務端之間的相互通訊。
2.前文簡述的WebSocket、SSE、長輪詢等三種方式，SignalR都支援，此外還能自動選擇最佳的通訊方式。
3.至於用途，主要是用在實時性要求較高的場景，比如：聊天、看板、釋出公告等

服務端實現

新建.net6專案

​

編輯

1.注入SignalR所需服務

1// 注入SignalR所需服務
2builder.Services.AddSignalR();

2.注入SignalR所需服務

1// 開啟靜態檔案  將客戶端程式碼寫入wwwroot中  防止跨域
2app.UseStaticFiles();

3.開啟SignalR的路由節點

1// 開啟路由節點 用來對映Signalr請求路徑  
2// /custom 為自定義路徑  
3// CustomHub 為Hub 型別
4app.MapHub<CustomHub>("/custom");
5// 同時支援分組請求，下篇講解，，，，

3.自定義一個Hub型別 繼承Hub

1// CustomHub:Hub 繼承 Hub
2public class CustomHub:Hub<ClientData>{}

4.重寫Hub 中 連線和關閉連線方法

 1        /// <summary>
 2        /// 重寫連結鉤子
 3        /// </summary>
 4        /// <returns></returns>
 5        public override Task OnConnectedAsync()
 6        {
 7            return base.OnConnectedAsync();
 8        }
 9
10        public override Task OnDisconnectedAsync(Exception? exception)
11        {
12            return base.OnDisconnectedAsync(exception);
13        }

5.建構函式中引入日誌中介軟體

1// 引入日誌 方便控制檯輸出
2private readonly ILogger<CustomHub> _logger;
3
4public CustomHub(ILogger<CustomHub> logger)
5{
6   this._logger = logger;
7}

6.編寫與客戶端通訊方法

 1        /// <summary>
 2        /// 建立通訊
 3        /// </summary>
 4        /// <param name="data"></param>
 5        public void BeginSendData(TransData data)
 6        {
 7            _logger.LogInformation("接受資料{0},{1}",data.id,data.message);
 8        }
 9
10        /// <summary>
11        /// 單一客戶端呼叫 通訊
12        /// 僅僅通知 呼叫的那個客戶端 其餘建立連結的客戶端不生成通訊
13        /// </summary>
14        /// <returns></returns>
15        public Task SingleClientCaller()
16        {
17            _logger.LogInformation("單獨客戶端呼叫");
18            return Clients.Caller.ClientHook(new (111,"111 客戶端呼叫"));
19        }
20
21        /// <summary>
22        /// 所有客戶端建立通訊
23        /// 可通知所有的客戶端
24        /// </summary>
25        /// <returns></returns>
26        public Task AllClientResponse()
27        {
28            _logger.LogInformation("通知所有的客戶端");
29
30            return Clients.All.ClientHook(new(Guid.NewGuid(),"通知所有的客戶端"));
31        }
32
33        /// <summary>
34        /// 指定呼叫  
35        /// </summary>
36        /// <returns></returns>
37        [HubMethodName("invoke")]
38        public TransData IvoData()
39        {
40            return new TransData(666,"返回invoke data");
41        }

客戶端實現

1.引用js庫

​

編輯

2.編寫呼叫指令碼

1// 初始化 路由：/custom 被路由節點捕獲
2let connection = new signalR.HubConnectionBuilder()
3        .withUrl("/custom")
4        .build();

1// 開始連線 呼叫後臺 BeginSendData 方法 成功後雙方互動資料
2        connection.start().then(() => {
3        console.log("開始連結")
4        let id = parseInt(Math.random()*100);
5        connection.send('BeginSendData', {id: id, message: "連結成功了"})
6    });

 1    // 呼叫 SingleClientCaller 這個方法
 2    const selfCall = () => connection.send('SingleClientCaller')
 3
 4    // 呼叫AllClientResponse這個方法
 5    const all = () => connection.send('AllClientResponse')
 6
 7    // 觸發後臺控制器
 8    const triggerFetch = () => fetch('/SendData')
 9
10    // call signalR hub function from client
11    const withReturn = () => connection.invoke('invoke')
12        .then(data => console.log('ivo data', data))

1 // 後臺預設觸發
2    connection.on("ClientHook", data => console.log('客戶端觸發成功', data));
3
4    // 後臺指定方法觸發之後
5    connection.on("client_recive", data => console.log('後臺觸發成功', data));

---

以上便是SignalR實現客戶端與服務端通訊的基本方法，下篇文章將演示分組通訊

更多精彩內容盡在公眾號：

​

​