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

websocket 封装

在所需文件夹下建立websocketUtils.js文件,封装代码如下:

class websocketUtils {constructor(openId, time) {this.url = `wss://****` //ws地址 拼接一下 此处用的是openIdthis.data = nullthis.isOpenSocket = false //避免重复连接this.timeout = time //隔多久执行检测 单位秒(s)this.heartbeatInterval = null //检测服务器端是否还存活this.reconnectTimeOut = null //重连之后隔多久才再次重连try {return this.connectSocketInit()} catch (e) {console.log('===========连接错误捕获catch====================',e);this.isOpenSocket = falsethis.reconnect();}}// 创建websocket连接connectSocketInit() {this.socketTask = uni.connectSocket({url: this.url,header: {//头部可以添加所需字段如token'content-type': 'application/json'},success:()=>{console.log("============正准备建立websocket中================");// 返回实例return this.socketTask},});this.socketTask.onOpen((res) => {console.log("==============WebSocket连接正常=============");clearTimeout(this.reconnectTimeOut)clearInterval(this.heartbeatInterval)this.isOpenSocket = true;this.start();// 只有连接正常打开中 ,才能正常收到消息this.socketTask.onMessage((res) => {console.log(res.data,'===============接收===onMessage===============')//全局注册uniapp事件,在任何页面都能接受到uni.$emit('socketMessage', res)});})// 监听失败,再次打开 判断主动重连// uni.onSocketError((res) => {// 	console.log('==========WebSocket连接打开失败哦===============');//	this.isOpenSocket = false;//	this.reconnect();// });//  socket关闭了会执行 此处this.socketTask.onClose((e) => {console.log("========已经被关闭了====================",e)this.isOpenSocket = false;// 加了flag判断是否为手动(用户主动关闭)e && e.reason == 'user' ? '' : this.reconnect();})}//发送消息send(value){//  连接正常打开时 ,才能正常成功发送消息this.socketTask.send({data: value,async success() {console.log("===========消息发送成功===============");},});}//开启心跳检测start(){this.data={value:"发送心跳内容",method:"发送心跳方法名称"}this.heartbeatInterval = setInterval(()=>{console.log('======start====开启心跳检测====',this.data)this.send(JSON.stringify(this.data));},this.timeout * 1000)}//重新连接reconnect(){//停止发送心跳clearInterval(this.heartbeatInterval)//如果不是人为关闭的话,进行重连if(!this.isOpenSocket ){this.reconnectTimeOut = setTimeout(()=>{this.connectSocketInit();},3000)}}// 关闭 WebSocket 连接closeSocket(reason = '关闭') {const _this = thisthis.socketTask.close({reason,success() {_this.data = null_this.isOpenSocket = false_this.socketTask = nullclearTimeout(_this.reconnectTimeOut)clearInterval(_this.heartbeatInterval)console.log('===============关闭 WebSocket 成功===================')},fail() {console.log('===================关闭 WebSocket 失败=====================')}})}//将获取的消息导出外部exportMessage(callback) {this.socketTask.onMessage((res) => {console.log(res,'===============exportMessage============')return callback(res)})}
}module.exports = websocketUtils 

页面引入使用 

全局引入:

1.在main.js中引入,并全局注册

//引入websocket文件
import websocketUtils from '@/utils/websocketUtils.js'//挂载并开启websocket
Vue.prototype.$socketUtils = new websocketUtils("*******",10)

 2.指定页面中使用

// 发送消息
let data={value:"发送的value"}
this.$socketUtils.send(JSON.stringify(data));// 接收消息
this.$socketUtils.exportMessage(res=>{console.log(res);
})
 单页面使用引入:
<!--  页面  -->
<template><view class='e-about-operation-wrap'></view>
</template><script>import websocketUtils  from '@/utils/websocketUtils.js'const app = getApp()export default {name: 'ESign',components: {},data() {return { };},onLoad: function(option) {},onShow: function() {//在uniapp全局中定义了socketWBObj变量app.globalData.socketWBObj = new websocketUtils(this.user.loginInfo.openId,10)//监听获取消息uni.$on('socketMessage', this.wbSocketGetMsg)//方法获取收到的消息app.globalData.socketWBObj.exportMessage(res => {console.warn(res);})},onHide: function() {},onUnload(e) {},created() {},mounted() {},methods: {wbSocketGetMsg(res){const _this = thisconsole.log(res,'======wbSocketGetMsg==========')// 关闭连接if (app.globalData.socketWBObj) {app.globalData.socketWBObj.closeSocket('user')}}},watch: {},computed: {},}
</script>
<style lang='scss' scoped>
.e-about-operation-wrap{}
</style>

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

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

相关文章

详解汽车交流充电桩主板的四大版本

近年来&#xff0c;在电动汽车行业快速发展背景下&#xff0c;充电桩的建设变得愈发重要&#xff0c;特别是兼容性较高、适用性较广的交流充电桩。 交流充电桩的心脏——主板的设计与功能&#xff0c;对于充电桩的性能和用户体验起着至关重要的作用。目前&#xff0c;市面上的…

OpenCV 常见数据类型

OpenCV 是一个轻量级高效的跨平台计算机视觉库&#xff0c;实现了图像处理和计算机视觉方面的多种通用算法。所谓的图像可以理解为一个数组&#xff0c;图像处理就是对数组的处理。首先&#xff0c;本文将介绍 OpenCV 中常见的数据类型&#xff0c;包括点 Point类、颜色 Scalar…

康谋技术 | 深入探讨:自动驾驶中的相机标定技术

随着自动驾驶技术的快速发展&#xff0c;多传感器的数据采集和融合可以显著提高系统的冗余度和容错性&#xff0c;进而保证决策的快速性和正确性。在项目开发迭代过程中&#xff0c;传感器标定扮演着至关重要的角色&#xff0c;它位于数据采集平台与感知融合算法之间&#xff0…

今天碰到的一点小问题(网上搜了一下理解了一下

在编程中&#xff0c;let 是一个关键字&#xff0c;主要用于声明一个块级作用域的局部变量。它是在 ECMAScript 2015&#xff08;也称为 ES6&#xff09;中引入的&#xff0c;以替代 var 关键字&#xff0c;用于解决 var 的一些作用域问题。 使用 let 声明的变量具有以下特点&…

如何使用自定义Promptbooks优化您的安全工作流程

在当今的数字化时代&#xff0c;安全工作流程的优化变得前所未有的重要。安全团队需要快速、有效地响应安全事件&#xff0c;以保护组织的数据和资产。Microsoft Copilot for Security提供了一种强大的工具——自定义Promptbooks&#xff0c;它可以帮助安全专家通过自动化和定制…

Swift高级特性之泛型

泛型是一种在编程语言中实现通用性的特性&#xff0c;它允许我们编写可以适应不同数据类型的代码。在Swift中&#xff0c;泛型可以应用于函数、类、结构体和枚举。 1.泛型函数&#xff1a;使用泛型函数可以编写一次代码&#xff0c;用于处理不同类型的数据。例如&#xff0c;我…

Linux下git维护

目录 1、安装 2、git是一个版本控制器 3、git操作 1、 #将文件放到本地仓库 2、#提交到本地 3、#远端修改同步&#xff08;需输密码&#xff09; 4、#查看提交日志 5、#删除对应文件 4、相关理解&#xff1a; 1、安装 sudo yum -y install git 2、git是一个版本控制器…

tmux 命令速查 导图

最近在使用tmux&#xff0c;整理了一份命令的导图&#xff0c;大家需要自取&#xff5e; tmux是什么&#xff1f; Tmux是一个终端复用器&#xff0c;一个非常有用的linux开发工具。 基本概念 会话&#xff1a; 与命令下的终端窗口类似&#xff1b;tmux进程&#xff0c;可包…

SpringBoot整合Swagger2

SpringBoot整合Swagger2 1.什么是Swagger2&#xff1f;&#xff08;应用场景&#xff09;2.项目中如何使用2.1 导入依赖2.2 编写配置类2.3 注解使用2.3.1 controller注解&#xff1a;2.3.2 方法注解2.3.3 实体类注解2.3.4 方法返回值注解2.3.5 忽略的方法 3.UI界面 1.什么是Swa…

浅谈PyExecJS模块

浅谈PyExecJS模块 PyExecJS 是一个 Python 模块&#xff0c;用于在 Python 中执行 JavaScript 代码。 PyExecJS 模块的主要作用&#xff1a; 执行 JavaScript 代码&#xff1a;允许在 Python 环境中执行 JavaScript 代码&#xff0c;这在一些需要跨语言处理或评估 JavaScript…

短视频矩阵系统----技术源头开发

短视频矩阵系统--- 1. 确定账号类型和目标受众 2. 准备账号资料 3. 搭建系统框架 4. 开发核心功能 5. 测试和调试 6. 部署和维护 7. 推广和运营 在开发短视频账号矩阵系统源码时&#xff0c;可以使用一些开源框架和工具来提高开发效率和降低开发难度。同时&#xff0c;需要组…

Qt查询mysql表的信息解释

Qt如何查询表中的数据呢&#xff1f; 首先我们需要连接数据库&#xff0c;连接完了&#xff0c;我们进行操作数据库。 连接数据库的代码&#xff1a; bool MainWindow::connectToDatabase(QSqlDatabase &db, const QString &host, const QString &dbName, const…

如何使用Python进行Web开发,如Flask或Django?

Python是一种非常流行的Web开发语言&#xff0c;它提供了多种框架来帮助开发者快速构建Web应用程序。Flask和Django是两个非常受欢迎的Python Web框架&#xff0c;它们各有特点和优势。 Flask Flask是一个轻量级的Web应用框架&#xff0c;它易于上手且灵活。Flask适合小型项目…

抓取电商产品数据的方法|PHP|Python多语言环境|高并发需求|电商商品API接口数据采集

电商商品数据的抓取|电商平台商品API接口 客户在搭建电商网站时经常提出的诉求和相应的解决方案如下&#xff1a; 1. **网站设计和用户体验**&#xff1a; - 诉求&#xff1a;希望有吸引力、易用性强的网站设计&#xff0c;提升用户体验。 - 解决方案&#xff1a;设计专…

使用pdfbox将pdf转换成图片

导入pom文件 <dependency><groupId>org.apache.pdfbox</groupId><artifactId>fontbox</artifactId><version>2.0.22</version></dependency><dependency><groupId>org.apache.pdfbox</groupId><artifact…

react ts react-router 6路由配置

创建一个router.tsx文件 // // 配置路由信息 import { BrowserRouter,HashRouter, Routes, Route,createBrowserRouter,useRoutes } from "react-router-dom"; import React,{useState,lazy,Component } from "react" import { JSX } from react/jsx-runt…

无人机--行业生命周期分析

行业生命周期:无人机行业生命周期还相对较短&#xff0c;但已经经历了多个阶段的发展。从最初的军用无人机&#xff0c;到近年来民用无人机和商业无人机的快速发展&#xff0c;无人机行业正逐渐走向成熟阶段。未来随着技术的不断进步和应用领域的不断拓展&#xff0c;无人机行业…

项目7-音乐播放器5+注册账号

1.前端代码 MAPPER Insert("insert into user(username,password) values (#{username},#{password}) ")Integer insertUserInfo(String username,String password); Service public Result insertUserInfo(String username, String oldpassword,String newpasswo…

0 回归-海上风电出力预测

https://www.dcic-china.com/competitions/10098 分析一下&#xff1a;特征工程如何做。 时间特征&#xff1a; 小时、分钟、一个星期中的第几天、一个月中的第几天。这些可以作为周期特征的标识。比如周六周日的人流会有很大的波动&#xff0c;这些如果不告诉模型它是很难学习…

NLP地点位置抽取python库实现

在自然语言处理(NLP)中,抽取文本中的地点信息通常涉及到命名实体识别(NER,Named Entity Recognition)任务。Python 中常用的库如spaCy、NLTK、StanfordNLP、Hugging Face Transformers等均提供了相应的功能来识别文本中的地理位置实体。以下是一个使用spaCy库抽取地理位置…