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