<template>
<div id="app">
</div>
</template>
<script>
export default {
data() {
return {
levelList: null,
adminIds: '',
tokens: '',
merIds: '',
webSocket: null,
lockReconnect: false,//是否真正建立连接
timeout: 5000,//5秒一次心跳
timeoutObj: null,//心跳心跳倒计时
serverTimeoutObj: null,//心跳倒计时
timeoutnum: null,//断开 重连倒计时
}
},
created() {
this.initWebSocket();
},
methods: {
initWebSocket() {
//初始化weosocket
let url = 'ws://...'
const wsuri = url; //ws地址
this.websocket = new WebSocket(wsuri);
this.websocket.onopen = this.websocketonopen;
this.websocket.onerror = this.websocketonerror;
this.websocket.onmessage = this.websocketonmessage;
this.websocket.onclose = this.websocketclose;
},
reconnect() {//重新连接
var that = this;
if(that.lockReconnect) {
return;
}
that.lockReconnect = true;
//没连接上会一直重连,设置延迟避免请求过多
that.timeoutnum && clearTimeout(that.timeoutnum);
that.timeoutnum = setTimeout(function () {
//新连接
that.initWebSocket();
that.lockReconnect = false;
},5000);
},
websocketonopen() {//连接成功事件
console.log("WebSocket连接成功");
//开启心跳
this.start();
},
websocketonerror(e) {//连接失败事件
//错误
console.log("WebSocket连接发生错误");
//重连
this.reconnect();
},
websocketclose(e) {//连接关闭事件
//关闭
console.log("WebSocket关闭");
// console.log("connection closed (" + e.code + ")");
//重连
this.reconnect();
},
websockOpen() {//打开连接
console.log("WebSocket连接成功");
this.start();
},
websocketonmessage(e){ //数据接收
console.log(e.data);
//收到服务器信息,心跳重置
this.reset();
},
start(){
console.log('开启心跳');
const self = this;
let _num = 3;
self.timeoutObj && clearTimeout(self.timeoutObj);
self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);
self.timeoutObj = setTimeout(function(){
//这里发送一个心跳,后端收到后,返回一个心跳消息,
if (self.websocket.readyState === 1) {//如果连接正常
// 高亮!!网上代码都是self.websock.readyState
// console.log(self.websocket.readyState);
self.websocket.send("heartCheck");
}else{//否则重连
console.log('545')
self.reconnect();
}
self.serverTimeoutObj = setTimeout(function() {
// console.log(_num)
//超时关闭
_num--;
//计算答复的超时次数
if(_num === 0) {
self.reconnect();
}
}, self.timeout);
}, self.timeout)
},
reset(){
console.log('重置心跳');
var that = this;
//清除时间
clearTimeout(that.timeoutObj);
clearTimeout(that.serverTimeoutObj);
//重启心跳
that.start();
},
},
}
</script>