webSocket使用心跳包实现断线重连
Posted qisimx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webSocket使用心跳包实现断线重连相关的知识，希望对你有一定的参考价值。
首先new一个webscoket的连接
this.noticeSocketLink = new WebSocket(‘webSocket的地址’)
这里是连接成功之后的操作
linkNoticeWebsocket(){
this.noticeSocketLink.onopen = ()=>{
在连接成功打开的时候调用断线重连的函数
this.webCloseLink(this.noticeSocketLink)
}
this.noticeSocketLink.onmessage = res => {}
this.noticeSocketLink.onclose = res => {
console.log("websocket is closed")
}
},
//断开连接，断线重连的函数
webCloseLink(WebSocketId){
WebSocketId.send("心跳包内容")
// 每个15秒发送一次心跳包
let hb = setInterval(()=>{
WebSocketId.send("心跳包内容")
// 检测到websocket连接断开
if(WebSocketId.readyState == 2 || WebSocketId.readyState == 3){
clearInterval(this.hb)
let i = 1
let myVar = setInterval(()=>{
if(WebSocketId.readyState == 2 || WebSocketId.readyState == 3){
// 重新new一个websocket的连接
this.noticeSocketLink = new WebSocket(WebSocketId.url);
WebSocketId = this.noticeSocketLink;
if(i == 5){
clearInterval(myVar);
// location.reload();
return
}
i++
}else if(WebSocketId.readyState == 0){
}else if(WebSocketId.readyState == 1){ // websocket重连成功
this.linkNoticeWebsocket();
clearInterval(hb)
clearInterval(myVar)
}
},4*1000)
}
}, 15000)
},
以上是关于webSocket使用心跳包实现断线重连的主要内容，如果未能解决你的问题，请参考以下文章
uniapp即时聊天 websocket封装（建立连接断线重连心跳机制主动关闭）