1，前言
最近在做IOT的项目，里面有个小程序要用到webSocket，借这个机会，封装了一个uniapp小程序适用的Socket类，包括断线重连，心跳检测等等，具体实现如下。
2，代码实现
class webSocketClass {
constructor(url, time) {
this.url = url
this.data = null
this.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 = this
this.socketExamples = uni.connectSocket({
url: _this.url,
header: {
'content-type': 'application/json'
},
success: (res) => {
_this.isCreate = true
console.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 = true
clearInterval(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 = false
this.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 = this
this.socketExamples.close({
reason,
success() {
_this.data = null
_this.isCreate = false
_this.isConnect = false
_this.isInitiative = true
_this.socketExamples = null
clearInterval(_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() {
// 如果已登陆，则启用WebSocket
if (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.user
const 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，断线重连
断线会自动重连。
断线重连
如果看了觉得有帮助的，我是@鹏多多11997110103，欢迎 点赞 关注 评论；
END
PS：在本页按F12，在console中输入document.querySelectorAll('._2VdqdF')[0].click()，有惊喜哦
往期文章
- 助你上手Vue3全家桶之Vue3教程
- 助你上手Vue3全家桶之VueX4教程
- 助你上手Vue3全家桶之Vue3教程
- 超详细！Vuex手把手教程
- 使用nvm管理node.js版本以及更换npm淘宝镜像源
- 超详细！Vue-Router手把手教程
- vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令
- 微信小程序实现搜索关键词高亮
个人主页
