vue封装websocket以及心跳检测、重连

关于websocket的封装有很多,此处记录一下自身项目已封装好的且已应用的,备份。

webSocketUtil.js:

class WebSocketUtils {constructor() {this.url = null //ws地址 或者 wssthis.data = nullthis.isOpenSocket = false //避免重复连接this.timeout = 20 //隔多久执行检测 单位秒(s)this.heartbeatInterval = null //检测服务器端是否还存活this.reconnectTimeOut = null //重连之后隔多久才再次重连}// 创建websocket连接connectSocketInit(url) {if (!this.socketTask || this.socketTask.readyState === WebSocket.CLOSED) {this.url = urlthis.socketTask = new WebSocket(url)this.socketTask.onopen = (event) => {console.log("==============WebSocket打开连接=============", event)clearTimeout(this.reconnectTimeOut)clearInterval(this.heartbeatInterval)this.isOpenSocket = truethis.socketTask.send(`ping`)this.startPingPong()}// 连接正常 接收消息中this.socketTask.onmessage = (event) => {console.log(event, '===========onmessage==============')try {if (event.data && event.data != 'null') {const jsonData = JSON.parse(event.data)console.log(jsonData, '===========onmessage=====jsonData=========')}} catch (err) {console.error('onmessage-err', err)}}//  socket关闭了会执行 此处this.socketTask.onclose = (event) => {console.log("========onclose============", event)this.isOpenSocket = falsethis.socketTask = nullthis.stopPingPong()if (event.code !== 4000) {setTimeout(() => {console.log('=========关闭重连reconnect===========')this.reconnect()}, 3000)}}this.socketTask.onerror = (error) => {console.log('============onerror============', error)}} else {console.log('Soeket exists, no need to create it, 链接状态:', this.socketTask.readyState === WebSocket.OPEN)}}//发送消息send(message) {//  连接正常打开时 ,才能正常成功发送消息if (this.socketTask && this.socketTask.readyState === WebSocket.OPEN) {this.socketTask.send(message)}}//重新连接reconnect() {const _this = thisif (!_this.url) {return}//停止发送心跳clearInterval(_this.heartbeatInterval)//如果不是人为关闭的话,进行重连if (!_this.isOpenSocket) {_this.reconnectTimeOut = setTimeout(() => {_this.connectSocketInit(_this.url)}, 3000)}}// 关闭 WebSocket 连接closeSocket(code = 4000, reason = '关闭') {const _this = this_this.socketTask.close(code,reason)_this.data = null_this.url = null_this.isOpenSocket = false// _this.socketTask = nullclearTimeout(_this.reconnectTimeOut)clearInterval(_this.heartbeatInterval)console.log('===============关闭 WebSocket 成功===================')}//开启心跳检测startPingPong() {const _this = thisif (_this.heartbeatInterval) {clearInterval(_this.heartbeatInterval);}_this.data = { value: "ping", name: "心跳检测" }_this.heartbeatInterval = setInterval(() => {// console.log('==========开启心跳检测====', _this.data)_this.send(JSON.stringify(_this.data))}, _this.timeout * 1000)}stopPingPong() {// 停止Ping-Pong定时器if (this.heartbeatInterval) {clearInterval(this.heartbeatInterval);this.heartbeatInterval = null;}}//将获的取消息导出外部exportMessage(callback) {this.socketTask.onmessage = (res) => {console.log(res, '===============exportMessage============')try {return callback(res.data)} catch (err) {console.error('exportMessage-err', err)return callback(err)}}}
}const websocketUtils = new WebSocketUtils()export default websocketUtils

引用:

再main.js中引入并挂载

import webSocketUtil from '@/utils/webSocketUtil';app.config.globalProperties.$webSocketUtil = webSocketUtil;

在所需页面打开连接,并监听数据返回

//监听消息
const handleWsMsg= (res) => {console.log('========handleWsMsg=========',res);
}proxy.$webSocketUtil.connectSocketInit('wss://xxxxxxxxx')
proxy.$webSocketUtil.exportMessage(handleWsMsg)//关闭连接
if(proxy.$webSocketUtil.socketTask){proxy.$webSocketUtil.closeSocket()
}

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

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

相关文章

57、通过EEG数据的SHAPE变化,揭开EEG-TCNet的黑匣子[看好了小子,我只教这一次]

之前在第18篇博客中对于EEG-TCNet这个处理EEG信号的sota模型进行了介绍,也给出了模型,目前也是全网对于EEG-TCNet浏览度最高的文章了,我觉得讲的已经很细致了,没想到还是有不少同学疑问,这也是全网缺少该模型pytorch代…

3D Gaussian Splatting技术原理

3D Gaussian Splatting 是一种用于体积渲染的技术,特别适用于科学和医学可视化。这种技术使得用户能够以一种直观的方式查看和分析三维数据集,如医学成像数据(MRI、CT扫描)或科学模拟数据。 技术原理 3D Gaussian Splatting基本上是一种将3D空间中的点数据转换成一个连续…

前端基础(之三)

Q1:介绍一下盒模型 A1:盒模型是用于描述Html在页面总所占空间的方式,盒模型将每个html元素视为一个矩形框,该框主要由四个主要部分组成:内容区域、内边距、边框和外边距。 内容区域是Html元素实际包含内容的部分&…

Redis中的Sentinel(五)

Sentinel 检测主观下线状态 在默认情况下,Sentinel会以每秒一次的频率向所有与它创建了命令连接的实例(包括主服务器、从服务器、其他Sentinel在内) 发送PING命令,并通过实例返回的PING命令回复来判断实例是否在线。如图所示,带箭头的连线显…

Word学习笔记之奇偶页的页眉与页码设置

1. 常用格式 在毕业论文中,往往有一下要求: 奇数页右下角显示、偶数页左下角显示奇数页眉为每章标题、偶数页眉为论文标题 2. 问题解决 2.1 前期准备 首先,不论时要求 1、还是要求 2,这里我们都要做一下设置: 鼠…

如何封装Vue组件并上传到npm

前言 环境准备 1.注册npm账号:npm | Home (npmjs.com) 2.保证当前环境安装了vue、webpack、node,以下工作将在该环境下进行(没有的小伙伴自行百度安装哈~) 3.一下用到的环境版本 webpack:v5.1.4node:v…

如何在Java中实现线程同步

在Java中实现线程同步是多线程编程中的一个重要概念,目的是控制对共享资源的访问,以防止多个线程同时修改某一资源,从而避免数据的不一致性和发生冲突。以下是几种在Java中实现线程同步的方法: ### 使用synchronized关键字 sync…

使用 MyBatis 的 mapper 接口调用时的要求

1: Mapper 接口方法名和 mapper.xml 中定义的每个 sql 的 id 相同; 2: Mapper 接口方法的输入参数类型和 mapper.xml 中定义的每个 sql 的parameterType 的类型相同; 3: Mapper 接口方法的输出参数类型和 mapper.xml 中…

SAM5716B 法国追梦DREAM 音频DSP芯片

法国追梦/DERAM SAM5504/5704/5716/5808音频DSP芯片,开发板,方案 可用于电子鼓、电子琴、电吉他、效果器、均衡器、啸叫抑制器等电声产品领域 全系列芯片: SAM2634 SAM2695 SAM5504B SAM5704B SAM5708B SAM5808B SAM5716B SAM5916B... 原厂开发…

根据状态转移图实现时序电路

描述 某同步时序电路的状态转换图如下,→上表示“C/Y”,圆圈内为现态,→指向次态。 请使用D触发器和必要的逻辑门实现此同步时序电路,用Verilog语言描述。 如图所示: 电路的接口如下图所示,C是单bit数据…

密码学 | 承诺:常见的承诺方案

🥑原文:密码学原语如何应用?解析密码学承诺的妙用 - 知乎 1 简介 密码学承诺 涉及 承诺方、验证方 两个参与方,以及以下两个阶段: 承诺阶段:承诺方选择一个敏感数据 v v v,为它计算出相应…

国家信息安全漏洞库(CNNVD)技术支撑单位等级证书

国家信息安全漏洞库(CNNVD)技术支撑单位等级证书是CNNVD对参与信息安全漏洞研究、事件解读、漏洞信息共享等工作的单位进行认证和评级的机制。该证书有助于提升单位在信息安全领域的影响力和公信力,同时也是对单位技术实力和贡献的一种认可。…

AUTOSAR ARXML处理 - C#的解析代码(四)

4.3 配置参数关键类 4.3.1 配置数据&#xff1a;模块 MODULE &#xff08;ECUCMODULECONFIGURATIONVALUES&#xff0c;<ECUC-MODULE-CONFIGURATION-VALUES>&#xff09; 与ECUCMODULEDEF&#xff0c;<ECUC-MODULE-DEF> 关联 /// <remarks/>[System.CodeDom…

标题:探索算法世界的奇妙与力量

标题&#xff1a;探索算法世界的奇妙与力量 在当今信息时代&#xff0c;算法已经成为了我们生活中不可或缺的一部分。从搜索引擎、社交媒体&#xff0c;到无人驾驶、机器人&#xff0c;算法都在其中发挥着重要的作用。本文将为您详细介绍算法的概念、类型、应用场景以及算法的…

美国家安全局等发布安全部署人工智能系统指南

该指南旨在为部署和运行由其他实体设计和开发的人工智能系统的组织提供最佳实践。 2024年4月15日&#xff0c;美国国家安全局发布了名为《安全部署人工智能系统&#xff1a;部署安全、弹性人工智能系统的最佳实践》&#xff0c;该指南旨在为部署和运行由其他实体设计和开发的人…

【Jupyter Notebook】快捷键

在命令模式下&#xff0c;单元格边框是灰色&#xff08;缺省&#xff09;的。这些快捷键主要用于操作单元格。 Enter&#xff1a;进入编辑模式Shift Enter&#xff1a;运行当前单元格并选中下一个单元格Ctrl Enter&#xff1a;运行当前单元格Alt Enter&#xff1a;运行当前单…

类声明是public类型的变量如何赋值

在面向对象编程(如Java、C#、PHP等语言)中,类声明为public类型的变量是类的成员变量,也称为属性或字段。这些变量可以在类内部、构造函数中、或者从类外部通过实例化对象来赋值。以下是一些基本的赋值方式: 在类内部赋值: // Java 示例 public class MyClass {public S…

途游游戏,科锐国际(计算机类),得物,蓝禾,奇安信,顺丰,康冠科技,金证科技24春招内推

途游游戏&#xff0c;科锐国际&#xff08;计算机类&#xff09;&#xff0c;得物&#xff0c;蓝禾&#xff0c;奇安信&#xff0c;顺丰&#xff0c;康冠科技&#xff0c;金证科技24春招内推 ①得物 【岗位】技术&#xff0c;设计&#xff0c;供应链&#xff0c;风控&#xff0…

Mac多媒体播放器 Movist Pro v2.11.4中文激活版下载

Movist Pro for Mac是一款专业的媒体播放器&#xff0c;特别为Mac用户设计。它不仅界面简洁美观&#xff0c;而且功能强大&#xff0c;能满足用户各种播放需求。 Movist Pro v2.11.4中文激活版下载 首先&#xff0c;Movist Pro for Mac支持多种媒体文件的播放&#xff0c;包括视…

关于Qt主窗口的菜单部件

前言 在介绍主窗口的两大部件之前&#xff0c;我们要先知道关于主窗口的一些知识。 主窗口 一个主窗口可以没有菜单条、工具条、状态条&#xff0c;但必须设置中心部件。在 Q 生成的 C头文件 ui_mainwindow.h 代码中,我们可以看到以下代码: centralWidget new Qwidget(MainWi…