Intro#
上次介绍了 asp.net core 中使用 signalR 服务端的开发,这次总结一下web前端如何接入和使用 signalR,本文主要分两部分,一是直接使用 @aspnet/signalr 这个微软开发好的 signalR 的客户端,另一部分是使用 h5 原生的 websocket 直接连接 signalR 的 websocket
使用 signalR 客户端#
安装 signalr 客户端 npm 包 npm install @aspnet/signalr --save
获取一个 connection
Copy
import * as signalR from “@aspnet/signalr”;
// …
const connection = new signalR.HubConnectionBuilder()
.withUrl(Constants.HubUrl, { accessTokenFactory: () => Constants.TestToken })
.build();
// accessTokenFactory 用于指定获取 accessToken 的方式,如果不需要用户登录,不需要认证没有这个配置
添加客户端处理方法
Copy
connection.on(“GameAnswerResultReceived”, (result:any)=>{
showMessage(收到问题:${result.QuestionId} 答案
, JSON.stringify(result));
});
connection.on(“GameOver”, (result: object)=>{
showMessage(游戏结束
, Game Over\n ${JSON.stringify(result)}
);
});
客户端调用服务器端方法
调用服务器端方法,没有返回值
Copy
connection.send(“CheckQuestionAnswer”, {
QuestionId: questionId,
Answer: tbMessage.value,
}, gameId);
调用服务器端方法并获取返回值
Copy
connection.invoke(“CheckQuestionAnswer”, {
QuestionId: questionId,
Answer: tbMessage.value,
}, gameId)
.then(result => {
console.log(result);
showMessage(答案检查结果:${result.Succeeded}
, JSON.stringify(result));
});
websocket 直接连接 signalR#
创建 websocket 连接
Copy
let connection = new WebSocket(${Constants.HubUrl}?access_token=${Constants.TestToken}
);
连接成功后发送使用协议信息
signalr 发送的消息均以 0x1e 这个字符结尾,在发送消息的时候需要在消息的最后增加 0x1e 字符
Copy
connection.onopen = (event) => {
// console.log(event);
connection.send({"protocol":"json", "version":1}${String.fromCharCode(0x1e)}
);
}
以上代码表示我们要使用 JSON 的形式进行消息的序列化,如果有较高的性能要求也可以使用 messagePack 二进制序列化消息内容(对浏览器要求较高,需要支持 xhr2)
接受服务器端消息
Copy
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);
}
}
}
定义客户端方法
Copy
callbacks[“GameAnswerResultReceived”] = (result:any)=>{
showMessage(收到问题:${result.QuestionId} 答案
, JSON.stringify(result));
};
callbacks[“GameOver”] = (result)=>{
showMessage(游戏结束
, Game Over\n ${JSON.stringify(result)}
);
};
调用服务器端方法
Copy
// 可以把这个方法扩展为 WebSocket 的一个原型方法
function invokeMethod(webSocket: WebSocket, methodName:string, …args: any[]) : Promise {
// 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 源码
东莞网站建设www.zg886.cn