简述
利用递归调用的方法实现,每10秒钟发一次心跳,如果断开send方法则会主动触发onclose函数(onclose函数并不会在断网的情况下立即触发,会有几分钟的延迟。websocket自身并未在网络应用层实现心跳机制,拔掉网线依然会仍然会认为处于连接状态。)
talk is cheap, show you the code.
定义到一个vue组件当中,例如heartbeat.vue,然后将组件挂载到全局(在main.vue中倒入)
export default{
hb : null,
testWs(id){ // 递归检测网络断开
let WebSocketId = id
let _self = this
_self.hb = setInterval(function(){
console.log('try ididdi = ' + WebSocketId)
// console.log(_self.bt_kernels)
_self.bt_kernels[WebSocketId.toString()].ws.send("^_^")
// console.log("我还活着,真好。@^_^@")
if(_self.bt_kernels[WebSocketId.toString()].ws.readyState == 2 || _self.bt_kernels[WebSocketId.toString()].ws.readyState == 3){
// console.log("我那么可爱,却死掉了@T_T@")
alert("websocket 已断开,正在重新连接……")
clearInterval(_self.hb)
let i = 1
let myVar = setInterval(function(){
console.log('catch ididdi = ' + WebSocketId)
console.log(_self.bt_kernels)
if(_self.bt_kernels[WebSocketId.toString()].ws.readyState == 2 || _self.bt_kernels[id.toString()].ws.readyState == 3){
_self.bt_kernels[WebSocketId.toString()].ws = new WebSocket(_self.bt_kernels[id.toString()].ws.url)
// console.log("尝试第"+i+"次重连")
if(i == 10){
// console.log("救不活了,放弃重连")
alert("websocket 重连失败,请刷新页面")
clearInterval(myVar)
}
i++
}
if(_self.bt_kernels[WebSocketId.toString()].ws.readyState == 0){
// console.log("尝试重连中......")
}else if(_self.bt_kernels[WebSocketId.toString()].ws.readyState == 1){
// console.log("我又活过来了。Y^_^Y")
clearInterval(myVar)
_self.testWs(WebSocketId)
}
},10*1000)
}
}, 10*1000)
},
}
函数调用,websockt建立成功则开启心跳
websocket.onopen = function(){
this.$heartbeat.testWs()
}