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>