asp.net core 使用 signalR（二）

Intro

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

使用 signalR 客戶端

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

2. 獲取一個 connection

   
   import * as signalR from "@aspnet/signalr";
   // ...
   const connection = new signalR.HubConnectionBuilder()
       .withUrl(Constants.HubUrl, { accessTokenFactory: () => Constants.TestToken })
       .build();
   
   // accessTokenFactory 用於指定獲取 accessToken 的方式，如果不需要用戶登錄，不需要認證沒有這個配置

3. 添加客戶端處理方法

   connection.on("GameAnswerResultReceived", (result:any)=>{
       showMessage(`收到問題：${result.QuestionId} 答案`, JSON.stringify(result));
   });
   
   connection.on("GameOver", (result: object)=>{
       showMessage(`游戲結束`, `Game Over\n ${JSON.stringify(result)}`);
   });

4. 客戶端調用伺服器端方法

   1. 調用伺服器端方法，沒有返回值

      connection.send("CheckQuestionAnswer", {
                          QuestionId: questionId,
                          Answer: tbMessage.value,            
                      }, gameId);

   2. 調用伺服器端方法並獲取返回值

       connection.invoke("CheckQuestionAnswer", {
                       QuestionId: questionId,
                       Answer: tbMessage.value,            
                   }, gameId)
                   .then(result => {
                       console.log(result);
                       showMessage(`答案檢查結果：${result.Succeeded}`, JSON.stringify(result));
                   });

websocket 直接連接 signalR

1. 創建 websocket 連接

   
   let connection = new WebSocket(`${Constants.HubUrl}?access_token=${Constants.TestToken}`);
   

2. 連接成功後發送使用協議信息

   signalr 發送的消息均以 0x1e 這個字元結尾，在發送消息的時候需要在消息的最後增加 0x1e 字元

   connection.onopen = (event) => {
       // console.log(event);
       connection.send(`{"protocol":"json", "version":1}${String.fromCharCode(0x1e)}`);
   }

   以上代碼表示我們要使用 JSON 的形式進行消息的序列化，如果有較高的性能要求也可以使用 messagePack 二進位序列化消息內容（對瀏覽器要求較高，需要支持 xhr2)

3. 接受伺服器端消息

   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);
           }
       }
   }

4. 定義客戶端方法

   
   callbacks["GameAnswerResultReceived"] = (result:any)=>{
       showMessage(`收到問題：${result.QuestionId} 答案`, JSON.stringify(result));
   };
   
   callbacks["GameOver"] = (result)=>{    
       showMessage(`游戲結束`, `Game Over\n ${JSON.stringify(result)}`);
   };

5. 調用伺服器端方法

   // 可以把這個方法擴展為 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