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
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎
總結
以上是生活随笔為你收集整理的asp.net core 中使用 signalR（二）的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
