1，前言

最近在做IOT的项目，里面有个小程序要用到webSocket，借这个机会，封装了一个uniapp小程序适用的Socket类，包括断线重连，心跳检测等等，具体实现如下。

2，代码实现

class webSocketClass {constructor(url, time) {this.url = urlthis.data = nullthis.isCreate = false // WebSocket 是否创建成功this.isConnect = false // 是否已经连接this.isInitiative = false // 是否主动断开this.timeoutNumber = time // 心跳检测间隔this.heartbeatTimer = null // 心跳检测定时器this.reconnectTimer = null // 断线重连定时器this.socketExamples = null // websocket实例this.againTime = 3 // 重连等待时间(单位秒)}// 初始化websocket连接initSocket() {const _this = thisthis.socketExamples = uni.connectSocket({url: _this.url,header: {'content-type': 'application/json'},success: (res) => {_this.isCreate = trueconsole.log(res)},fail: (rej) => {console.error(rej)_this.isCreate = false}})this.createSocket()}// 创建websocket连接createSocket() {if (this.isCreate) {console.log('WebSocket 开始初始化')// 监听 WebSocket 连接打开事件try {this.socketExamples.onOpen(() => {console.log('WebSocket 连接成功')this.isConnect = trueclearInterval(this.heartbeatTimer)clearTimeout(this.reconnectTimer)// 打开心跳检测this.heartbeatCheck()})// 监听 WebSocket 接受到服务器的消息事件this.socketExamples.onMessage((res) => {console.log('收到消息')uni.$emit('message', res)})// 监听 WebSocket 连接关闭事件this.socketExamples.onClose(() => {console.log('WebSocket 关闭了')this.isConnect = falsethis.reconnect()})// 监听 WebSocket 错误事件this.socketExamples.onError((res) => {console.log('WebSocket 出错了')console.log(res)this.isInitiative = false})} catch (error) {console.warn(error)}} else {console.warn('WebSocket 初始化失败!')}}// 发送消息sendMsg(value) {const param = JSON.stringify(value)return new Promise((resolve, reject) => {this.socketExamples.send({data: param,success() {console.log('消息发送成功')resolve(true)},fail(error) {console.log('消息发送失败')reject(error)}})})}// 开启心跳检测heartbeatCheck() {console.log('开启心跳')this.data = { state: 1, method: 'heartbeat' }this.heartbeatTimer = setInterval(() => {this.sendMsg(this.data)}, this.timeoutNumber * 1000)}// 重新连接reconnect() {// 停止发送心跳clearTimeout(this.reconnectTimer)clearInterval(this.heartbeatTimer)// 如果不是人为关闭的话，进行重连if (!this.isInitiative) {this.reconnectTimer = setTimeout(() => {this.initSocket()}, this.againTime * 1000)}}// 关闭 WebSocket 连接closeSocket(reason = '关闭') {const _this = thisthis.socketExamples.close({reason,success() {_this.data = null_this.isCreate = false_this.isConnect = false_this.isInitiative = true_this.socketExamples = nullclearInterval(_this.heartbeatTimer)clearTimeout(_this.reconnectTimer)console.log('关闭 WebSocket 成功')},fail() {console.log('关闭 WebSocket 失败')}})}
}export default webSocketClass

3，使用

直接实例化封装的socket类，调用initSocket初始化就行了，当收到消息的时候，会触发全局$emit事件，只需要使用$on监听message事件就行。

3.1，初始化

我这边在globalData里面定义了socketObj全局变量，在首页onShow生命周期里面判断当前是否已经初始化了socket实例，再进行操作。

home.vue

import WebSocketClass from '../../utils/webSocket'
const app = getApp()onShow() {// 如果已登陆，则启用WebSocketif (app.globalData.user && app.globalData.user.sToken) {// 如果已经有sockt实例if (app.globalData.socketObj) {// 如果sockt实例未连接if (!app.globalData.socketObj.isConnect) {app.globalData.socketObj.initSocket()}} else {// 如果没有sockt实例，则创建const data = app.globalData.userconst path = `/websocket/notify/${data.userId}`app.globalData.socketObj = new WebSocketClass(`${app.globalData.socketUrl}${path}?token=${data.userToken}&refreshToken=${data.sToken}`,60)app.globalData.socketObj.initSocket()}}
}

3.2，发送消息

methods: {sendMessage() {const param = { value: '我是一个消息' }app.globalData.socketObj.sendMsg(param)}
}

3.3，接收消息

// 开启监听
onLoad() {uni.$on('message', this.getMessage)
},
// 页面卸载时取消监听
onUnload() {uni.$off('message', this.getMessage)
},
methods: {// 接收到消息的回调getMessage(msg) {console.log(msg)}
}

3.4，断线重连

断线会自动重连。

如果看了觉得有帮助的，我是@鹏多多i，欢迎点赞关注评论；
END

公众号

往期文章

vue3+element-plus配置cdn
助你上手Vue3全家桶之Vue3教程
助你上手Vue3全家桶之VueX4教程
助你上手Vue3全家桶之Vue-Router4教程
超详细！Vue的九种通信方式
超详细！Vuex手把手教程
使用nvm管理node.js版本以及更换npm淘宝镜像源
vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令
超详细！Vue-Router手把手教程

个人主页

CSDN
GitHub
简书
博客园
掘金

uniapp小程序webSocket封装、断线重连、心跳检测相关推荐

uniapp写小程序组件封装修改数据不渲染
uniapp写小程序组件封装修改数据不渲染数据通过props传进来的,对数据进行修改,js打印是有修改的,但是页面无变化,最好找的原因,props传入的数据是不能去直接操作的,可以使用其他方法,比如 ...
uniapp小程序商城开发thinkphp6积分商城、团购、秒杀封装APP
uniapp小程序商城开发thinkphp6积分商城.团购.秒杀封装APP,后台是vue开发需要源代码的可以联系我,找我要哦 <template><view v-if=" ...
uniapp 小程序封装左滑效果组件
uniapp 小程序封装左滑效果组件引言封装组件页面使用注意事项引言小程序电商项目购物车,往往都会有左滑删除功能,在不想使用插件的前提下,就需要自己编写,因此我个人写了一个左滑效果组件封 ...
vue、uniapp 小程序点击事件禁止多次点击方法封装
vue.uniapp 小程序点击事件禁止多次点击方法封装在写uniapp 小程序时发现个bug,疯狂点击按钮第一点击事件还没执行完就疯狂多次调用该事件,很是影响用户体验以及消耗性能,所以这里我封装个 ...
微信小程序WebSocket心跳检测与断来重连
为什么要心跳检测使用微信小程序WebSocket时,WebSocket在一定的时间没有进行通信就会断开连接,所以需要使用心跳检测. 那么心跳检测是什么呢,心跳检测顾名思义就是和人心脏动一样,客户端在 ...
微信小程序WebSocket相关问题说明
看本帖的前提是:你的WebSocket在小程序之外是正常可用的:因为WebSocket不是小程序独有的,所有大部分问题在网上是可以找到说明的,本帖只是聚合了一些小程序中使用WebSocket中遇到的问 ...
uniapp 小程序车牌号输入键盘
之前写微信小程序时封装了车牌号输入键盘,记录在微信小程序组件中了,最近开发uniapp又重新开发了车牌号输入键盘组件,是在微信小程序开发的键盘组件的思想上做了一版优化,增加了挂车车牌号输入,及新能源车 ...
uniapp 小程序 APP 实现手写板签名画图 canvas 保存为图片格式
文章目录 uniapp 小程序 APP 实现手写板签名画图 canvas 保存为图片格式一.手写板 1.H5代码 2.JS代码总结 uniapp 小程序 APP 实现手写板签名画图 can ...
微信小程序websocket实现即时聊天
今天给大家分享一下本人做小程序使用websocket的一点小经验,希望对大家有所帮助. 使用之前肯定首先要了解一下websocket是什么,简单来讲websocket就是客户端与服务器之间专门建立的一 ...
微信小程序WebSocket 中实现发送文字，图片，语音以及WebSocket 常见问题解决方案
小程序 WebSocket 常见问题:(本文已解决的) 1.自动断开链接,重连但是只能存在两个 WebSocket 的问题. ---1兼容情况:1.1 正常聊天过一段时间 WebSocket 自动 ...

uniapp小程序webSocket封装、断线重连、心跳检测

目录