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进行服务间调用
网上查询过很多关于ASP.NET core使用SignalR的简单例子,但是大部分都是简易聊天功能,今天心血来潮就搞了个使用SignalR进行服务间调用的简单DEMO. 至于SignalR是什么我就不 ...
- asp.net core 使用 signalR(一)
asp.net core 使用 signalR(一) Intro SignalR 是什么? ASP.NET Core SignalR 是一个开源代码库,它简化了向应用添加实时 Web 功能的过程. 实 ...
- Asp.net Core中SignalR Core预览版的一些新特性前瞻,附源码(消息订阅与发送二进制数据)
目录 SignalR系列目录(注意,是ASP.NET的目录.不是Core的) 前言 一晃一个月又过去了,上个月有个比较大的项目要验收上线.所以忙的脚不沾地.现在终于可以忙里偷闲,写一篇关于Signal ...
- ASP.NET Core学习之二 菜鸟踩坑
对于像我这样没接触过core的人,坑还是比较多的,一些基础配置和以前差别很大,这里做下记录 一.Startup 1.注册服务 // This method gets called by the run ...
- asp.net core 五 SignalR 负载均衡
SignalR : Web中的实时功能实现,所谓实时功能,就是所连接的客户端变的可用时,服务端能实时的推送内容到客户端,而不是被动的等待客户端的请求.Asp.net SignalR 源码 ...
- ASP.NET Core 使用 SignalR 遇到的 CORS 问题
问题 将 SignalR 集成到 ASP.NET Core MVC 程序的时候,按照官方 DEMO 配置完成,但使用 DEMO 页面建立连接一直提示如下信息. Access to XMLHttpReq ...
- ASP.NET Core 2.2 : 二十六. 应用JWT进行用户认证
本文将通过实际的例子来演示如何在ASP.NET Core中应用JWT进行用户认证以及Token的刷新方案(ASP.NET Core 系列目录) 一.什么是JWT? JWT(json web token ...
- ASP.NET Core 2.2 : 二十七. JWT与用户授权(细化到Action)
上一章分享了如何在ASP.NET Core中应用JWT进行用户认证以及Token的刷新,本章继续进行下一步,用户授权.涉及到的例子也以上一章的为基础.(ASP.NET Core 系列目录) 一.概述 ...
- ASP.NET Core 2.2 : 二十. Action的多数据返回格式处理机制
上一章讲了系统如何将客户端提交的请求数据格式化处理成我们想要的格式并绑定到对应的参数,本章讲一下它的“逆过程”,如何将请求结果按照客户端想要的格式返回去. 一.常见的返回类型 以系统模板默认生成的Ho ...
随机推荐
- 常见Http协议状态码
收集常见的http协议状态码,供查阅!包括中文和英文对照. 中文版 1**:请求收到,继续处理 2**:操作成功收到,分析.接受 3**:完成此请求必须进一步处理 4**:请求包含一个错误语法或不能完 ...
- 什么时候使用redis?什么时候使用memcache?
要清楚为什么,redis具有高可用特性,并且可固化,但特性有时候不能成为选择他的理由,一些业务场景中并不需要这样的特性. 什么时候倾向于选择redis? 1.复杂数据结构 value是哈希,列表, ...
- spring-boot-plus详细配置(五)
spring-boot-plus详细配置 公共配置 application.yml
- python所有的内置异常类型汇总
内置异常基类 在 Python 中,所有异常必须为一个派生自 BaseException 的类的实例. 通过子类化创建的两个不相关异常类永远是不等效的,既使它们具有相同的名称. 下列异常主要被用作其他 ...
- socket-遇到一枚假程序员
1. 一脸懵比 今天又偶然看到socket,对socket有点简单的概念,知道是网络编程.客户端与服务端通信等,但是不是太了解,就随便搜了下,几千万条记录,随便点开看了几页,socket跟网络编程也是 ...
- python 37 同步、异步调用
目录 1. 阻塞与非阻塞 2. 同步与异步 2.1 异步调用 2.2 同步调用 2.3 异步调用回收的第一种方式 3. 异步调用+回调函数 3.1 requests模块 3.2 异步调用回收的第二种方 ...
- JSP学习笔记(3)——JSTL 标签库
JSP Standard Tag Lib,名为JSP标准标签库,设计的目的主要用来方便我们将数据输出,而不是使用JSP中的语法<% %> <%= %> <%! %> ...
- CentOS 7 下 JDK1.8+Maven+Nginx+MySql+Git+Redis环境安装
CentOS 7 下 JDK1.8+Maven+Nginx+MySql+Git+Redis环境安装 安装目录准备 新建data目录,用来放下载的软件 mkdir -p /data 切换到该data目录 ...
- hdu 1503 Advanced Fruits 最长公共子序列 *
Advanced Fruits Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- codeforces 486 D. Valid Sets(树形dp)
题目链接:http://codeforces.com/contest/486/problem/D 题意:给出n个点,还有n-1条边的信息,问这些点共能构成几棵满足要求的树,构成树的条件是. 1)首先这 ...