websocket⼼跳机制
⼀、何为websocket⼼跳机制？
websockt⼼跳机制，不得不说很形象；那何为⼼跳机制，就是表明client与server的连接是否还在的检测机制；
如果不存在检测，那么⽹络突然断开，造成的后果就是client、server可能还在傻乎乎的发送⽆⽤的消息，浪费了资源；
怎样检测呢？原理就是定时向server发送消息，如果接收到server的响应就表明连接依旧存在；
⼆、代码逻辑
//serverUrl
let socketUrl = 'ws://127.0.0.1:3000';
//保存websocket对象
let socket;
// reConnect函数节流标识符
let flag = true;
//⼼跳机制
let heart = {
timeOut:3000,
timeObj = null,
serverTimeObj = null,
start:function(){
websocket和socketconsole.log('start');
let self = this;
//清除延时器
this.timeObj && clearTimeout(this.timeObj);
this.serverTimeObj && clearTimeout(this.serverTimeObj);
this.timeObj = setTimeout(function(){
socket.send('兄弟，你还好吗?');//发送消息，服务端返回信息，即表⽰连接良好，可以在socket的onmessage事件重置⼼跳机制函数                    //定义⼀个延时器等待服务器响应，若超时，则关闭连接，重新请求server建⽴socket连接
self.serverTimeObj=setTimeout(function(){
socket.close();
reConnect(socketUrl);
},self.timeOut)
},this.timeOut)
}
}
//建⽴websocket连接函数
function createWebsocket(url) {
try {
socket = new WebSocket(url);
init();
} catch (e) {
//进⾏重连;
console.log('websocket连接错误');
reConnect(socketUrl);
}
}
//对WebSocket各种事件进⾏监听
function init() {
//连接已经打开
//重置⼼跳机制
heart.start();
}
//通过event.data获取server发送的信息
//对数据进⾏操作
console.log(event.data);
//收到消息表⽰连接正常，所以重置⼼跳机制
heart.start();
}
}
//报错+重连
console.log('socket连接出错');
reConnect(socketUrl);
}
console.log('socket连接关闭');
}
}
//重连函数
//因为重连函数会被socket事件频繁触发，所以通过函数节流限制重连请求发送        function reConnect(url) {
if (!flag) {
return;
}
flag = false;
setTimeout(function () {
createWebsocket(url);
flag = true;
}, 3000)
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。