asp.net core 使用 signalR（二）

Intro

上次介绍了 asp.net core 中使用 signalR 服务端的开发，这次总结一下web前端如何接入和使用 signalR，本文主要分两部分，一是直接使用

@aspnet/signalr

使用 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. 客户端调用服务器端方法

   调用服务器端方法，没有返回值

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

5. 调用服务器端方法并获取返回值

   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