asp.net core 使用 signalR（二）

asp.net core 使用 signalR（二）

Intro

上次介紹了 asp.net core 中使用 signalR 服務(wù)端的開發(fā)，這次總結(jié)一下web前端如何接入和使用
signalR，本文主要分兩部分，一是直接使用@aspnet/signalr 這個(gè)微軟開發(fā)好的 signalR 的客戶端，另一部分是使用 h5 原生的
websocket 直接連接 signalR 的 websocket

使用 signalR 客戶端

*
安裝 signalr 客戶端 npm 包 npm install @aspnet/signalr --save

*
獲取一個(gè) connection
import * as signalR from "@aspnet/signalr"; // ... const connection = new
signalR.HubConnectionBuilder() .withUrl(Constants.HubUrl, { accessTokenFactory:
() => Constants.TestToken }) .build(); // accessTokenFactory 用于指定獲取 accessToken
的方式，如果不需要用戶登錄，不需要認(rèn)證沒(méi)有這個(gè)配置
*
添加客戶端處理方法
connection.on("GameAnswerResultReceived", (result:any)=>{
showMessage(`收到問(wèn)題：${result.QuestionId} 答案`, JSON.stringify(result)); });
connection.on("GameOver", (result: object)=>{ showMessage(`游戲結(jié)束`, `Game Over\n
${JSON.stringify(result)}`); });
*
客戶端調(diào)用服務(wù)器端方法

*
調(diào)用服務(wù)器端方法，沒(méi)有返回值
connection.send("CheckQuestionAnswer", { QuestionId: questionId, Answer:
tbMessage.value, }, gameId);
*
調(diào)用服務(wù)器端方法并獲取返回值
connection.invoke("CheckQuestionAnswer", { QuestionId: questionId, Answer:
tbMessage.value, }, gameId) .then(result => { console.log(result);
showMessage(`答案檢查結(jié)果：${result.Succeeded}`, JSON.stringify(result)); });
websocket 直接連接 signalR

*
創(chuàng)建 websocket 連接
let connection = new
WebSocket(`${Constants.HubUrl}?access_token=${Constants.TestToken}`);
*
連接成功后發(fā)送使用協(xié)議信息

signalr 發(fā)送的消息均以 0x1e 這個(gè)字符結(jié)尾，在發(fā)送消息的時(shí)候需要在消息的最后增加 0x1e 字符
connection.onopen = (event) => { // console.log(event);
connection.send(`{"protocol":"json",
"version":1}${String.fromCharCode(0x1e)}`); }
以上代碼表示我們要使用 JSON 的形式進(jìn)行消息的序列化，如果有較高的性能要求也可以使用 messagePack
二進(jìn)制序列化消息內(nèi)容（對(duì)瀏覽器要求較高，需要支持 xhr2)

*
接受服務(wù)器端消息
connection.onmessage = (event) => { var msg =
event.data.replace(String.fromCharCode(0x1e), ""); //替換消息結(jié)束符
console.log(`received message: ${msg}`); let eventData = JSON.parse(msg);
if(eventData.type === 1 && eventData.target){ // type為1表示調(diào)用客戶端的某一個(gè)方法 let func:
(...args:any[])=>any = callbacks[eventData.target]; if(func !== undefined){
func(...eventData.arguments); } } }
*
定義客戶端方法
callbacks["GameAnswerResultReceived"] = (result:any)=>{
showMessage(`收到問(wèn)題：${result.QuestionId} 答案`, JSON.stringify(result)); };
callbacks["GameOver"] = (result)=>{ showMessage(`游戲結(jié)束`, `Game Over\n
${JSON.stringify(result)}`); };
*
調(diào)用服務(wù)器端方法
// 可以把這個(gè)方法擴(kuò)展為 WebSocket 的一個(gè)原型方法 function invokeMethod(webSocket: WebSocket,
methodName:string, ...args: any[]) : Promise<void> { // type為1表示調(diào)用遠(yuǎn)程的方法(一個(gè) RPC
調(diào)用)，target為要調(diào)用的方法名稱，arguments為要調(diào)用的方法的參數(shù) webSocket.send(`${JSON.stringify({
arguments: args, target: methodName, type: 1,
})}${String.fromCharCode(0x1e)}`); return Promise.resolve(); }
Memo

上面的完全基于 websocket 去連接 signalr 的代碼還有些簡(jiǎn)陋，實(shí)際使用的話可以再修改優(yōu)化一下

強(qiáng)類型調(diào)用服務(wù)器端的方法，自定義的話可以在 websocket 的基礎(chǔ)上封裝一下，signalr
強(qiáng)類型調(diào)用服務(wù)器端方法還沒(méi)找到解決辦法，不過(guò)問(wèn)題不大，有興趣的話可以研究一下signalR 源碼
<https://github.com/aspnet/AspNetCore/tree/master/src/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/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://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/AspNetCore/tree/master/src/SignalR>
* https://github.com/aspnet/SignalR-samples
<https://github.com/aspnet/SignalR-samples>

• ? 上一篇：FreeSql （二十四）Linq To Sql 語(yǔ)法使用介紹
• ? 下一篇：selenium爬蟲