官场铁律最新章节,qq乱发信息,长寿花的养殖方法
上次介绍了 asp.net core 中使用 signalr 服务端的开发,这次总结一下web前端如何接入和使用 signalr,本文主要分两部分,一是直接使用 @aspnet/signalr
这个微软开发好的 signalr 的客户端,另一部分是使用 h5 原生的 websocket 直接连接 signalr 的 websocket
安装 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 连接
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(); }
上面的完全基于 websocket 去连接 signalr 的代码还有些简陋,实际使用的话可以再修改优化一下
强类型调用服务器端的方法,自定义的话可以在 websocket 的基础上封装一下,signalr 强类型调用服务器端方法还没找到解决办法,不过问题不大,有兴趣的话可以研究一下 signalr 源码
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
Blazor server side 自家的一些开源的, 实用型项目的进度之 CEF客户端
.NET IoC模式依赖反转(DIP)、控制反转(Ioc)、依赖注入(DI)
vue+.netcore可支持业务代码扩展的开发框架 VOL.Vue 2.0版本发布
网友评论