asp.net core 使用 signalR（二）

時間 2019-11-05

標籤 asp.net asp core 使用 signalr 欄目 ASP 简体版

原文原文鏈接

asp.net core 使用 signalR（二）

Intro

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

使用 signalR 客戶端

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

獲取一個 connectionjava

import * as signalR from "@aspnet/signalr";
// ...
const connection = new signalR.HubConnectionBuilder()
    .withUrl(Constants.HubUrl, { accessTokenFactory: () => Constants.TestToken })
    .build();

// accessTokenFactory 用於指定獲取 accessToken 的方式，若是不須要用戶登陸，不須要認證沒有這個配置

添加客戶端處理方法webpack

connection.on("GameAnswerResultReceived", (result:any)=>{
    showMessage(`收到問題：${result.QuestionId} 答案`, JSON.stringify(result));
});

connection.on("GameOver", (result: object)=>{
    showMessage(`遊戲結束`, `Game Over\n ${JSON.stringify(result)}`);
});

客戶端調用服務器端方法git

調用服務器端方法，沒有返回值github

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

調用服務器端方法並獲取返回值web

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

websocket 直接鏈接 signalR

建立 websocket 鏈接typescript

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

鏈接成功後發送使用協議信息npm

signalr 發送的消息均以 0x1e 這個字符結尾，在發送消息的時候須要在消息的最後增長 0x1e 字符json
```
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();
}