asp隐藏邮箱部分字符_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 {
// 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隐藏邮箱部分字符_asp.net core 中使用 signalR(二)相关推荐
- asp.net core 中使用 signalR(二)
asp.net core 使用 signalR(二) Intro 上次介绍了 asp.net core 中使用 signalR 服务端的开发,这次总结一下web前端如何接入和使用 signalR,本文 ...
- 如何在 ASP.Net Core 中使用 SignalR
SignalR for ASP.Net Core 是 SignalR 的浴火重生版,允许你在 ASP.Net Core 中实现实时通讯,这里的 实时 意味着双方都能快速的感知对方发来的消息,比如:一旦 ...
- asp向不同的用户发送信息_ASP.NET Core 中的那些认证中间件及一些重要知识点
前言 在读这篇文章之间,建议先看一下我的 ASP.NET Core 之 Identity 入门系列(一,二,三)奠定一下基础. 有关于 Authentication 的知识太广,所以本篇介绍几个在 A ...
- asp 禁止某一个目录_asp.net core 系列 10 配置configuration (上)
一. ASP.NET Core 中的配置概述 ASP.NET Core 中的应用配置是基于键值对,由configuration 程序提供. configuration 将从各种配置源提供程序操作键值对 ...
- 如何在ASP.NET Core中使用SignalR构建与Angular通信的实时通信应用程序
图片 假设我们要创建一个监视Web应用程序,该应用程序为用户提供了一个能够显示一系列信息的仪表板,这些信息会随着时间的推移而更新. 第一种方法是在定义的时间间隔(轮询)定期调用API 以更新仪表板上的 ...
- winform防止sqlserver注入_ASP.NET Core 中的 依赖注入介绍
ASP.NET Core 依赖注入 HomeController public class HomeController : Controller { private IStudentReposito ...
- .net mvc actionresult 返回字符串_ASP.NET Core中的Action的返回值类型
在Asp.net Core之前所有的Action返回值都是ActionResult,Json(),File()等方法返回的都是ActionResult的子类.并且Core把MVC跟WebApi合并之后 ...
- 在ASP.NET Core下使用SignalR技术
一.前言 上次我们讲到过如何在ASP.NET Core中使用WebSocket,没有阅读过的朋友请参考 WebSocket in ASP.NET Core 文章 .这次的主角是SignalR它为我们提 ...
- asp点击链接数字加1代码_Asp.Net Core使用TinyMCE富媒体编辑器
本文主要介绍在asp.net core环境下引入TinyMCE到项目中使用的方法,使用的.net core环境为最新的.net core 5.0版,其他.net core版本或.net mvc模式均适 ...
最新文章
- 电视游戏会是未来客厅娱乐的主角吗?
- 打开快手,体验流畅的单目三维手势技术
- QluOJ2018NewCode计算几何(寄蒜几盒)
- jQuery 处理xml
- c#开发中遇到System.AccessViolationException
- PyTorch学习问题记录
- meta http-equiv属性兼容浏览器_定时刷新
- 无论您的工作职能如何,如何获得功绩
- 腾讯Q2财报看点:游戏营收同比止跌 B端业务成第二大营收来源
- vgremore 删除卷组
- MFC Windows 程序设计[二十一]之树形控件
- PX4 代码中 position_estimator_inav(互补滤波)理解
- 下面对html描述正确的有多选题,web前端笔试题
- 用HTML5为你的网页添加音效(兼容Firefox 3.5+, IE 6-9, Safari 3.0+, Chrome 3.0+, Opera 10.5+)...
- 从定性遥感到定量遥感——大数据时代的空间数据科学
- 位偏移 java_时区和偏移类 / Zone and Offset
- 语言的流变_拔剑-浆糊的传说_新浪博客
- 这一次,让你把深拷贝和浅拷贝刻进骨子里
- VBA向单元格输入双引号
- 密码学基础-AES加解密Python代码实现
热门文章
- [oracle原]访问局域网内出现“ORA-12541:TNS:无监听程序”
- ubuntu 16.04 编译android,Ubuntu 16.04 64bit 编译 Android 4.4 源码
- Java面向对象之异常处理机制(try-catch-finally、throws、自定义异常)
- Java基础知识之数组的初始化和基本操作
- Java基础语法之变量作用域、小大驼峰命名规则和java运算符(赋值、关系、三元、逻辑运算符)
- python的作用域分别有几种_python 作用域知识点整理
- LeetCode力扣(27. 移除元素)----Java/JavaScript/C
- Python爬取并简单分析2024年普通高校招生专业(专业类)选考科目要求
- mysql keepalive_mysql主从之keepalive+MySQL高可用
- django与python之间关系_Django 模型中表与表之间关系