asp.net core 中使用 signalR(二)

asp.net core 使用 signalR(二)

Intro

上次介绍了 asp.net core 中使用 signalR 服务端的开发,这次总结一下web前端如何接入和使用 signalR,本文主要分两部分,一是直接使用 @aspnet/signalr 这个微软开发好的 signalR 的客户端,另一部分是使用 h5 原生的 websocket 直接连接 signalR 的 websocket

使用 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 的方式,如果不需要用户登录,不需要认证没有这个配置
  1. 添加客户端处理方法

connection.on("GameAnswerResultReceived", (result:any)=>{	showMessage(`收到问题:${result.QuestionId} 答案`, JSON.stringify(result));	
});	
connection.on("GameOver", (result: object)=>{	showMessage(`游戏结束`, `Game Over\n ${JSON.stringify(result)}`);	
});
  1. 客户端调用服务器端方法

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

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

  1. 创建 websocket 连接

let connection = new WebSocket(`${Constants.HubUrl}?access_token=${Constants.TestToken}`);
  1. 连接成功后发送使用协议信息

signalr 发送的消息均以 0x1e 这个字符结尾,在发送消息的时候需要在消息的最后增加 0x1e 字符

connection.onopen = (event) => {	// console.log(event);	connection.send(`{"protocol":"json", "version":1}${String.fromCharCode(0x1e)}`);	
}

以上代码表示我们要使用 JSON 的形式进行消息的序列化,如果有较高的性能要求也可以使用 messagePack 二进制序列化消息内容(对浏览器要求较高,需要支持 xhr2)

  1. 接受服务器端消息

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);	}	}	
}
  1. 定义客户端方法

callbacks["GameAnswerResultReceived"] = (result:any)=>{	showMessage(`收到问题:${result.QuestionId} 答案`, JSON.stringify(result));	
};	
callbacks["GameOver"] = (result)=>{    	showMessage(`游戏结束`, `Game Over\n ${JSON.stringify(result)}`);	
};
  1. 调用服务器端方法

// 可以把这个方法扩展为 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/313752.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java位运算实现加、减、乘、除、取余(Mark)

先mark&#xff0c;后续再搞 位运算基础&#xff1a; https://blog.csdn.net/goskalrie/article/details/52796360 加减乘除 1&#xff1a;https://blog.csdn.net/zuochao_2013/article/details/79183621 2&#xff1a;https://www.jianshu.com/p/7bba031b11e7 https://ww…

小 Q 与树(dsu on tree + segment tree)牛客练习赛 81 D

小 Q 与树 给定一棵带权的树&#xff0c;每条边的距离都为111&#xff0c;要我们求∑u1n∑v1nmin(au,av)dis(u,v)\sum\limits_{u 1} ^{n} \sum\limits_{v 1} ^{n}min(a_u, a_v)dis(u, v)u1∑n​v1∑n​min(au​,av​)dis(u,v)&#xff0c; min(au,av)dis(u,v)min(au,av)(dep…

多场景抢红包业务引发.NETCore下使用适配器模式实现业务接口分离

事情的起因我们公司现有一块业务叫做抢红包&#xff0c;最初的想法只是实现了一个初代版本&#xff0c;就是给指定的好友单发红包&#xff0c;随着业务的发展&#xff0c;发红包和抢红包的场景也越来越多&#xff0c;目前主要应用的场景有&#xff1a;单聊发红包、群聊发红包、…

设计模式——创建型模型

目录 单例模式&#xff08;singleton&#xff09;构建模式&#xff08;Builder&#xff09;原型模式&#xff08;Prototype&#xff09;工厂方法模式&#xff08;Factory&#xff09;抽象工厂模式&#xff08;Abstract Factory&#xff09; ** 一、5种创建型模型 ** 1.1 单…

Mr. Panda and Kakin(拓展欧几里得 + O(1)快速乘)

Mr. Panda and Kakin 给定n,cn, cn,c&#xff0c;要我们找到nnn是两个相邻质数的乘积&#xff0c;要我们找到xxx&#xff0c;满足x2303≡c(modn)x ^{2 ^{30} 3} \equiv c \pmod nx2303≡c(modn)&#xff0c;1010≤n≤1018,0<c<n10 ^{10} \leq n \leq 10 ^ {18}, 0 <…

【C】KoobooJson在asp.net core中的使用

版权声明&#xff1a;本文为博主原创文章&#xff0c;遵循 CC 4.0 BY-SA 版权协议&#xff0c;转载请附上原文出处链接和本声明。本文链接&#xff1a;https://blog.csdn.net/j_teng/article/details/100924973“KoobooJson是一款体积小巧没有任何依赖且性能表现强劲的Json工具…

单例模式的创建方式

说明&#xff1a; 以下均为线程安全的实现方式。 懒汉、饿汉的非线程安全的意义不大&#xff0c;未实现。 1. 饿汉模式 类初始化时直接创建对象 public class Singleton {private static Singleton singleton new Singleton();//饿汉模式&#xff0c;类初始化时直接创建pub…

P3899 [湖南集训]谈笑风生(线段树合并)

P3899 [湖南集训]谈笑风生 给定一颗以111号节点为根的树&#xff0c;如果a≠ba \neq ba​b&#xff0c;且aaa是bbb的祖先&#xff0c;则aaa比bbb更厉害&#xff0c;如果a≠ba \neq ba​b&#xff0c;且dis(a,b)≤xdis(a, b) \leq xdis(a,b)≤x&#xff0c;xxx为给定的一个…

【DevOps进行时】C/S端界面自动化测试:微软UIAutomation实践

在界面自动化测试领域里存在许多流行的自动化测试工具&#xff0c;例如目前比较受欢迎的开源自动化工具Selenium、Katalon&#xff1b;HP旗下知名的商业软件Unified Functional Testing(更名前叫QTP)&#xff1b;隶属于IBM以数据驱动测试的RTF&#xff08;Rational Functional …

代码编辑器横评:为什么 VS Code 能拔得头筹

2015 年 4 月 29 日的 Build 大会上&#xff0c;微软发布了 Visual Studio Code 第一个预览版本。短短四年时间里&#xff0c;VS Code 高速成长。根据 2019 年 2 月的 PYPL Top IDE index 的排名&#xff0c;VS Code 的涨势迅猛&#xff0c;在所有编辑器与 IDE 中排名第六&…

A. Slackline Adventure(思维 + 莫比乌斯)(2018-2019 ACM-ICPC Brazil Subregional Programming Contest)

A. Slackline Adventure 考虑枚举每个矩形的长跟宽&#xff0c;再统计这个矩形能在坐标轴上出现几次&#xff08;同行相邻同列相邻的单独算&#xff09;&#xff0c;然后有如下式子&#xff1a; 2∑i1n−1∑j1m−1(n−i)(m−j)[gcd⁡(i,j)1][L2≤i2j2≤R2]2 \times \sum_{i 1…

设计模式——结构型模型

一&#xff1a;目录 1. 装饰者模式&#xff08;Decorator&#xff09; 2. 代理模式&#xff08;Proxy&#xff09; 3. 组合模式&#xff08;Composite&#xff09; 4. 桥接模式&#xff08;Bridge&#xff09; 5. 适配器模式&#xff08;Adapter&#xff09; 6. 蝇量模式&#…

D. Best Edge Weight(最小生成树 + 树链剖分)(Codeforces Round #423 (Div. 1, rated, based on VK Cup Finals))

D. Best Edge Weight 给定一个有nnn个点mmm条边的无向连通图&#xff0c;有mmm次询问&#xff0c;每次询问第iii条边的权值最大为多少&#xff0c;这张图的所有最小生成树的方案中&#xff0c;一定包含第iii条边。 先跑一边最小生成树&#xff0c;得到最小生成树&#xff0c;…

利用Helm简化Kubernetes应用部署(1)

目录利用Helm简化Kubernetes应用部署 Helm基础 安装Helm 使用Visual Studio 2019为Helm编写一个简单的应用 利用Helm简化Kubernetes应用部署Helm是Kubernetes生态系统中的一个软件包管理工具&#xff0c;有点类似于Linux操作系统里面的“apt-get”和“yum”。结合上一节内容&am…

设计模式——行为型模式

一&#xff1a;目录 1. 策略模式&#xff08;Strategy&#xff09; 2.状态模式&#xff08;State&#xff09; 3.责任链模式&#xff08;Chain Of Responsibility&#xff09; 4.解释器模式&#xff08;Interpreter&#xff09; 5.命令模式&#xff08;Command&#xff09; 6.观…

2019 ICPC Asia Yinchuan Regional(9 / 13)

2019 ICPC Asia Yinchuan Regional A - Girls Band Party&#xff08;分组背包&#xff09; 每个物品有两个标签&#xff0c;名字&#xff0c;颜色&#xff0c;当名字是设置为奖赏时会对整体加上0.1 的贡献&#xff0c;如果颜色符合要求时 会对整体加上 0.2 的的贡献 但是有…

网络编程——常用协议解析

** 1、网络基础知识 ** 1.1> 什么是OSI模型 OSI 模型(Open System Interconnection model)是一个由国际标准化组织?提出的概念模型,试图?供一个使各种不同的计算机和网络在世界范围内实现互联的标准框架。 它将计算机网络体系结构划分为七层,每层都可以提供抽象良好的…

在 ABP vNext 中编写仓储单元测试的问题一则

一、问题新项目是基于 ABP vNext 框架进行开发的&#xff0c;所以我要求为每层编写单元测试。在同事为某个仓储编写单元测试的时候&#xff0c;发现了一个奇怪的问题。他的对某个聚合根的 A 字段进行了更新&#xff0c;随后对某个导航属性 B 也进行了变更&#xff0c;最后通过仓…

TCP协议——三次握手与四次关闭

1. TCP协议基础 网络编程基础见&#xff0c;传送门 TCP是面向连接的&#xff0c;无论哪一方向另一方发送数据之前&#xff0c;都必须先在双方之间建立一条连接。 在TCP/IP协议中&#xff0c;TCP协议提供可靠的连接服务&#xff0c;连接是通过三次握手进行初始化的。 三次握手…

在 .NET Core 3.0 中实现 JIT 编译的 JSON 序列化,及一些心得与随想

源码&#xff1a;https://github.com/Martin1994/JsonJitSerializerNuGet&#xff1a;https://www.nuget.org/packages/MartinCl2.Text.Json.Serialization/简介&#xff1a;Just-in-time 编译的 JSON 序列化&#xff0c;基于 System.Text.Json.NET Core 3.0 即将正式发布&…