这里参考的https://blog.csdn.net/weixin_44070058/article/details/123865917的方法
结合自己的实际业务进行了修改
//是否已经连接上ws
let isOpenSocket = false
//心跳间隔,单位毫秒
let heartBeatDelay = 30000
let heartBeatInterval = null
//心跳时发送的消息文本
let heartBeatText = "888"
//最大重连次数
let reconnectTimes = 10
let reconnectInterval = null
//重连间隔,单位毫秒
let reconnectDelay = 10000
let socketTask = null
//这个参数是防止重连失败之后onClose方法会重复执行reconnect方法,导致重连定时器出问题
//连接并打开之后可重连,且只执行重连方法一次
let canReconnect = false
//封装的对象,最后以模块化向外暴露,
//init方法 初始化socketTask对象
//completeClose方法 完全将socketTask关闭(不重连)
//其他关于socketTask的方法与uniapp的socketTask api一致
let ws = {
socketTask: null,
isConnect: false, // 是否已连接
init,
completeClose
}
function init(id) {
console.log(id);
socketTask = uni.connectSocket({
url: 'wss://192.168', //仅为示例,并非真实接口地址。
complete: () => {
}
});
socketTask.onOpen(res => {
console.log("ws连接成功")
clearTime() // 关闭心跳和重连定时器
ws.isConnect = true // 判断websocket开启
isOpenSocket = true //是否已经连接上ws
canReconnect = true
//开启心跳机制
heartBeat()
});
socketTask.onError(err => {
console.log("ws连接失败", err)
clearTime();
ws.isConnect = false // 判断websocket关闭
});
socketTask.onMessage(res => {
//自定义处理onMessage方法
console.log('收到的消息', res)
if(res.data == 888) return
});
socketTask.onClose(() => {
if (isOpenSocket) {
console.log("ws与服务器断开")
} else {
console.log("连接失败")
}
ws.isConnect = false // 判断websocket关闭
isOpenSocket = false
if (canReconnect) {
// 开启一次重连机制
reconnect()
canReconnect = false
}
});
ws.socketTask = socketTask
};
// 心跳发送
function heartBeat() {
heartBeatInterval = setInterval(() => {
console.log(heartBeatText)
send(JSON.stringify(heartBeatText));
}, heartBeatDelay)
}
function send(value) {
ws.socketTask.send({
data: value,
async success() {
console.log("消息发送成功")
}
});
}
function reconnect() {
//停止发送心跳
if (heartBeatInterval) {
clearInterval(heartBeatInterval)
}
//如果不是人为关闭的话,进行重连
if (!isOpenSocket) {
let count = 0;
reconnectInterval = setInterval(() => {
console.log("正在尝试重连")
init();
count++
//重连一定次数后就不再重连
if (count >= reconnectTimes) {
clearTime()
console.log("网络异常或服务器错误")
}
}, reconnectDelay)
}
}
// 心跳与重连的定时器清除
function clearTime() {
if (heartBeatInterval) {
clearInterval(heartBeatInterval)
}
if (reconnectInterval) {
clearInterval(reconnectInterval)
}
}
function completeClose() {
//先将心跳与重连的定时器清除
clearTime();
ws.isConnect = false // 判断websocket关闭
canReconnect = false
if(ws.socketTask){
console.log("关闭连接")
ws.socketTask.close()
}
}
module.exports = ws
在实际过程中,建立长连接响应耗时比较长,而长期保持无用的长连接又会对服务器造成压力,所以需要在不用或者意外断开的时候关闭掉长连接ws.isConnect = false,在建立的时候判断ws.isConnect是否开启从而减少连接的建立耗时
if(!this.$ws.isConnect){
// 如果没有长连接则建立连接
this.$ws.init('建立的连接传参')
}