asp.net core 中使用 signalR(二)
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();
}
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
asp.net core 中使用 signalR(二)相关推荐
- 如何在 ASP.Net Core 中使用 SignalR
SignalR for ASP.Net Core 是 SignalR 的浴火重生版,允许你在 ASP.Net Core 中实现实时通讯,这里的 实时 意味着双方都能快速的感知对方发来的消息,比如:一旦 ...
- 如何在ASP.NET Core中使用SignalR构建与Angular通信的实时通信应用程序
图片 假设我们要创建一个监视Web应用程序,该应用程序为用户提供了一个能够显示一系列信息的仪表板,这些信息会随着时间的推移而更新. 第一种方法是在定义的时间间隔(轮询)定期调用API 以更新仪表板上的 ...
- asp隐藏邮箱部分字符_asp.net core 中使用 signalR(二)
asp.net core 使用 signalR(二) Intro 上次介绍了 asp.net core 中使用 signalR 服务端的开发,这次总结一下web前端如何接入和使用 signalR,本文 ...
- 在ASP.NET Core下使用SignalR技术
一.前言 上次我们讲到过如何在ASP.NET Core中使用WebSocket,没有阅读过的朋友请参考 WebSocket in ASP.NET Core 文章 .这次的主角是SignalR它为我们提 ...
- Asp.net Core中SignalR Core预览版的一些新特性前瞻,附源码(消息订阅与发送二进制数据)
前言 一晃一个月又过去了,上个月有个比较大的项目要验收上线.所以忙的脚不沾地.现在终于可以忙里偷闲,写一篇关于SignalR Core的文章了. 先介绍一下SignalR吧,如下: ASP.NET S ...
- ASP.NET Core Web 应用程序系列(二)- 在ASP.NET Core中使用Autofac替换自带DI进行批量依赖注入(MVC当中应用)...
在上一章中主要和大家分享在MVC当中如何使用ASP.NET Core内置的DI进行批量依赖注入,本章将继续和大家分享在ASP.NET Core中如何使用Autofac替换自带DI进行批量依赖注入. P ...
- ASP.NET Core中HTTP管道和中间件的二三事
本文出自<从零开始学ASP.NET CORE MVC> 推荐文章:中间件是什么?在.NET Core中的工作原理又是怎样的呢? 配置ASP.NET Core请求(Request)处理管道 ...
- ASP.NET Core中使用IOC三部曲(二.采用Autofac来替换IOC容器,并实现属性注入)
上一篇ASP.NET Core中使用IOC三部曲(一.使用ASP.NET Core自带的IOC容器) ,我们说过ASP.NET Core中自带的IOC容器是属于轻量级的,功能并不是很多,只是提供了基础 ...
- ASP.NET Core中的依赖注入(4): 构造函数的选择与服务生命周期管理
ServiceProvider最终提供的服务实例都是根据对应的ServiceDescriptor创建的,对于一个具体的ServiceDescriptor对象来说,如果它的ImplementationI ...
最新文章
- (U3D)Time的使用
- Altium Designer原理图和PCB中对元件垂直、水平镜像翻转
- PPT中视频投影问题
- 同时存多个变量缓存 微信小程序_微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解...
- VMware中无法识别usb
- Linux命令发送Http的get或post请求(curl和wget两种方法)
- python中plot的图像类型_Python绘图问题:Matplotlib中指定图片大小和像素
- 达摩院年终预测出炉:2022 十大科技趋势,AI for Science 高居榜首
- 1!+2!+3!+…+10!的和
- 后疫情时代企业将加速向云服务迁移
- C与C++关于*与的传参解析
- 面试宝典系列-Mysql索引的区别
- integer超出范围_BigInteger:可以让超过Integer范围内的数据进行运算
- com.github.pagehelper.PageHelper cannot be cast to org.apache.ibatis.plugin.Interceptor和oracle不识别
- SpringDataJPA调用存储过程实例
- 请问苹果x是如何建文件夹_教你12个技巧,最全苹果X使用教程。
- web前端大一实训 HTML+CSS+JavaScript王者荣耀(60页) web课程设计网页规划与设计 HTML期末大作业 HTML网页设计结课作业...
- mysql instead of触发_在视图上使用 INSTEAD OF 触发器
- 英文IT电子书下载:www.foxebook.net
- 管理成长计划(二):定目标--战略制定承接
热门文章
- 清华经管计算机金融专业,非量化背景拿下MIT MFin的清华经管学姐,详解MIT金融项目优劣和职业方向...
- mysql索引三个字段查询两个字段_mysql中关于关联索引的问题——对a,b,c三个字段建立联合索引,那么查询时使用其中的2个作为查询条件,是否还会走索引?...
- shell中字符串操作【转】
- 清北·NOIP2017济南考前冲刺班 DAY1 morning
- 如何关闭Struts2的webconsole.html
- Jenkins入门系列之——03PDF文档下载
- C# 数据结构--排序[下]
- hack 入侵 142 主机的过程
- Blazor中的无状态组件
- 不止命令行!自定义VS生成事件