asp.net core 使用 signalR（二）

  • 2019 年 10 月 3 日
  • 筆記

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 Overn ${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 Overn ${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

VirMach 便宜 VPS

QNews

QNews