asp.net core 使用 signalR(二)
阿新 • • 發佈:2019-09-18
asp.net core 使用 signalR(二)
Intro
上次介紹了 asp.net core 中使用 signalR 服務端的開發,這次總結一下web前端如何接入和使用 signalR,本文主要分兩部分,一是直接使用 @aspnet/signalr
這個微軟開發好的 signalR 的客戶端,另一部分是使用 h5 原生的 websocket 直接連線 signalR 的 websocket
使用 signalR 客戶端
安裝 signalr 客戶端 npm 包
npm install @aspnet/signalr --save
獲取一個 connection
import * as signalR from "@aspnet/signalr"; // ... const connection = new signalR.HubConnectionBuilder() .withUrl(Constants.HubUrl, { accessTokenFactory: () => Constants.TestToken }) .build(); // accessTokenFactory 用於指定獲取 accessToken 的方式,如果不需要使用者登入,不需要認證沒有這個配置
新增客戶端處理方法
connection.on("GameAnswerResultReceived", (result:any)=>{ showMessage(`收到問題:${result.QuestionId} 答案`, JSON.stringify(result)); }); connection.on("GameOver", (result: object)=>{ showMessage(`遊戲結束`, `Game Over\n ${JSON.stringify(result)}`); });
客戶端呼叫伺服器端方法
呼叫伺服器端方法,沒有返回值
connection.send("CheckQuestionAnswer", { QuestionId: questionId, Answer: tbMessage.value, }, gameId);
呼叫伺服器端方法並獲取返回值
connection.invoke("CheckQuestionAnswer", { QuestionId: questionId, Answer: tbMessage.value, }, gameId) .then(result => { console.log(result); showMessage(`答案檢查結果:${result.Succeeded}`, JSON.stringify(result)); });
websocket 直接連線 signalR
建立 websocket 連線
let connection = new WebSocket(`${Constants.HubUrl}?access_token=${Constants.TestToken}`);
連線成功後傳送使用協議資訊
signalr 傳送的訊息均以
0x1e
這個字元結尾,在傳送訊息的時候需要在訊息的最後增加0x1e
字元connection.onopen = (event) => { // console.log(event); connection.send(`{"protocol":"json", "version":1}${String.fromCharCode(0x1e)}`); }
以上程式碼表示我們要使用 JSON 的形式進行訊息的序列化,如果有較高的效能要求也可以使用 messagePack 二進位制序列化訊息內容(對瀏覽器要求較高,需要支援 xhr2)
接受伺服器端訊息
connection.onmessage = (event) => { var msg = event.data.replace(String.fromCharCode(0x1e), ""); //替換訊息結束符 console.log(`received message: ${msg}`); let eventData = JSON.parse(msg); if(eventData.type === 1 && eventData.target){ // type為1表示呼叫客戶端的某一個方法 let func: (...args:any[])=>any = callbacks[eventData.target]; if(func !== undefined){ func(...eventData.arguments); } } }
定義客戶端方法
callbacks["GameAnswerResultReceived"] = (result:any)=>{ showMessage(`收到問題:${result.QuestionId} 答案`, JSON.stringify(result)); }; callbacks["GameOver"] = (result)=>{ showMessage(`遊戲結束`, `Game Over\n ${JSON.stringify(result)}`); };
呼叫伺服器端方法
// 可以把這個方法擴充套件為 WebSocket 的一個原型方法 function invokeMethod(webSocket: WebSocket, methodName:string, ...args: any[]) : Promise<void> { // type為1表示呼叫遠端的方法(一個 RPC 呼叫),target為要呼叫的方法名稱,arguments為要呼叫的方法的引數 webSocket.send(`${JSON.stringify({ arguments: args, target: methodName, type: 1, })}${String.fromCharCode(0x1e)}`); return Promise.resolve(); }
Memo
上面的完全基於 websocket 去連線 signalr 的程式碼還有些簡陋,實際使用的話可以再修改優化一下
強型別呼叫伺服器端的方法,自定義的話可以在 websocket 的基礎上封裝一下,signalr 強型別呼叫伺服器端方法還沒找到解決辦法,不過問題不大,有興趣的話可以研究一下 signalR 原始碼
Reference
- https://docs.microsoft.com/en-us/aspnet/core/signalr/javascript-client?view=aspnetcore-2.2
- https://docs.microsoft.com/en-us/aspnet/core/tutorials/signalr-typescript-webpack?view=aspnetcore-2.2&tabs=visual-studio
- https://github.com/aspnet/AspNetCore/tree/master/src/SignalR
- https://github.com/aspnet/SignalR-samples