vue前端项目中使用@microsoft/signalr实现与后端实时消息推送

package.json中引入依赖signalr

“devDependencies”: {
“@microsoft/signalr”: “^6.0.0”
}

页面中使用

在data中记得定义参数chartSlr

var that = this;let url = "XXXXXXXXXXX"; // 后端的接口连接urlif (this.chartSlr) {that.chartSlr.onclose();this.chartSlr = null;}const signalR = require("@microsoft/signalr");// 1.初始化连接that.chartSlr = new signalR.HubConnectionBuilder().withUrl(url).configureLogging(signalR.LogLevel.Error).build();// 2.携带自定义的参数，如：token/* oSr.qs = {enc_auth_token: encodeURI(access_token),}; */// 3.添加事件that.chartSlr.on("Order.Create", (data) => {console.log(1111)console.log(data);});that.chartSlr.on("chat", (data) => { // 与后端的自定义连接类型chat，也可以是任意的类型console.log(22222)console.log("chat", data);});// 4.启动连接的方法async function start() {try {await that.chartSlr.start();console.log("signaR连接成功");} catch (err) {console.log("err", err);setTimeout(start, 5000);}}// 5.关闭之后重连that.chartSlr.onclose(async () => {await start();});// 6.启动连接start();

vue前端项目中使用@microsoft/signalr实现与后端实时消息推送相关推荐

前端后端的消息推送 7 种方式
消息推送 7 种方式看了原文章后,自己写的笔记参考 https://mp.weixin.qq.com/s/xQV81HiD8hkzx2wMc3ZT7A 需求先说需求,实现一个站内信的web消息推 ...
未读消息（小红点），前端与 RabbitMQ 实时消息推送实践，贼简单~
前几天粉丝群里有个小伙伴问过:web 页面的未读消息(小红点)怎么实现比较简单,刚好本周手头有类似的开发任务,索性就整理出来供小伙伴们参考,没准哪天就能用得上呢. 之前在 <springboot ...
Worktile中的实时消息推送服务实现
在团队协同工具worktile的使用过程中,你会发现无论是右上角的消息通知,还是在任务面板中拖动任务,还有用户的在线状态,都是实时刷新.Worktile中的推送服务是采用的是基于xmpp协议.erla ...
Worktile 中百万级实时消息推送服务的实现
Worktile 中百万级实时消息推送服务的实现转自:http://www.360doc.com/content/15/0907/19/1073512_497529854.shtml 这是一个创建于 ...
Worktile中百万级实时消息推送服务的实现
Worktile中百万级实时消息推送服务的实现出自:http://blog.jobbole.com/81125/ 转载于:https://www.cnblogs.com/ribavnu/p/4531 ...
浅析即时通讯开发中移动端实时消息推送技术
实时消息推送在移动端互联网时代很平常,也很重要,它的存在让智能终端真正成为全时信息传播的工具.本文将从移动端无线网络的特点来谈谈实时消息推送的技术原理及相关问题,希望能给你带来些许启发. 移动端实时消 ...
Android 项目必备（三十八）--＞APP 消息推送
文章目录前言推送的实现方式 1. C2DM 2. 轮询 3. SMS信令推送 4. MQTT协议 5. XMPP协议 6. 使用第三方平台 Android 中 MQTT 的使用 1. 集成 2. ...
SignalR向部分客户端进行消息推送
前置笔记: 关于SignalR的身份认证问题_董厂长的博客-CSDN博客之前做Task的解决方案是不同的功能对应不同的Hub,分开进行消息推送.应付简单的场景是足够的.后期复杂场景可能会出现单个HU ...
vue前端项目中使用阿里矢量图标（Font class）
一.登录阿里巴巴矢量图标库阿里巴巴矢量图标库二.点击图标库三.选择图标选择图标后,会进入该类型的图标库,然后鼠标划上想选择的那个图标,会有三个选择,分别为"添加入库", & ...

vue前端项目中使用@microsoft/signalr实现与后端实时消息推送

package.json中引入依赖signalr

页面中使用

vue前端项目中使用@microsoft/signalr实现与后端实时消息推送相关推荐

最新文章

热门文章