建筑工程网站哪个好,国内设计网站公司网站,计算机专业大学排名,做简单网站的步骤WebSocket是前后端交互的长连接#xff0c;服务器可以主动向客户端推送信息#xff0c;客户端也可以主动向服务器发送信息#xff0c;是真正的双向平等对话#xff0c;属于服务器推送技术的一种。项目中#xff0c;我们经常会使用WebSocket和服务器建立持久的连接。但是前… WebSocket是前后端交互的长连接服务器可以主动向客户端推送信息客户端也可以主动向服务器发送信息是真正的双向平等对话属于服务器推送技术的一种。项目中我们经常会使用WebSocket和服务器建立持久的连接。 但是前后端也会因为某些不明因素链接断开(我就是因为经常断网)导致前后端都没有反馈的情况 所以为了保持链接的稳定性和持续性心跳重连就必须整上去了也顺便记录一下实现心跳重连的流程 在使用WebSocket的时候如果网络突然断开WebSocketd是不会触发任何事件的所以前端程序无法得知当前链接是否断开。但是这个时候使用WebSocket.send方法的时候浏览器会发现消息发不出去隔一段时间之后(貌似每个浏览器隔的时间不相同)会触发onclose函数。利用这点我们可以在send不出消息并触发onclose之后进行重连 当然后端也可能出现异常他收到了这个消息但是没响应回来前端也收不到通知差不多就是你给一个人打电话那niao人不说话的情况问题你还不知道他在不在。所以这种情况我们要隔段时间send一次假如超过一定时间没收到回应那就默认是异常了就触发重连。WebSocket的各个绑定事件let ws new WebSocket(url);ws.onopen function () { //something}ws.onmessage function (event) { //something}ws.onclose function () { //something}ws.onerror function () { //something}好了按照这个思路开始// 心跳检测let heartCheck { timeout: 60000, // 超时时间 timer: null, serverTimer: null, reset: function(){ clearTimeout(this.timer); this.start(); }, start: function(){ this.timer setTimeout(function(){ ws.send(connectTest); }, this.timeout) }}定义了一个心跳检测当open的时候执行heartCheck.start()方法然后onmessage收到信息之后调用heartCheck.reset()方法重置这样每次onmessage就触发send达到循环发送的效果。当send失败的时候隔一段时间会自动触发onclose所以要在onclose的时候调用重连ws.onclose function () { console.log(onclose); reconnect();}重连的时候需要注意防止重复连接还要设置延迟避免请求太频繁let lockReconnect false;/** * method reconnect ws重新连接 * description lockReconnect防止重复连接,时间戳避免在失败时候会频繁建立ws连接 */ function reconnect() { if(lockReconnect) return; lockReconnect true; //没连接上会一直重连设置延迟避免请求过多 setTimeout(function () { createWebSocket(); // 创建webSocket连接的方法 lockReconnect false; }, 2000);}如此上面流程就解决了如断网send不出消息的时候重连的效果测试的时候可以手动断网测亲测有效好了现在假设后端异常没数据返回onmessage就进不去得另外想办法。所以在每次send的时候的setTimeout内再加一个setTimeout就是如果里面这个setTimeout执行了那就不等了我觉得他是挂了重连。// 心跳检测let heartCheck { timeout: 60000, // 超时时间 timer: null, serverTimer: null, reset: function(){ clearTimeout(this.timer); clearTimeout(this.serverTimer); this.start(); }, start: function(){ let ts this; this.timer setTimeout(function(){ ws.send(connectTest); // 超出时间内未响应就主动关闭链接关闭链接会触发重连 ts.serverTimer setTimeout(function(){ ws.onclose(); }, ts.timeout) }, this.timeout) }}如果onmessage收到消息执行了reset会清空所有的timer重新计时, nice~~~。这样就完成了websocket的心跳重连归纳一下代码let lockReconnect false; //避免重复连接let ws;// 心跳检测let heartCheck { timeout: 60000, timer: null, serverTimer: null, reset: function(){ clearTimeout(this.timer); clearTimeout(this.serverTimer); this.start(); }, start: function(){ let ts this; this.timer setTimeout(function(){ ws.send(connectTest); ts.serverTimer setTimeout(function(){ ws.onclose(); }, ts.timeout) }, this.timeout) }}// 创建WebSocket链接function createWebSocket () { if (WebSocket in window) { if (!url) return ws new WebSocket(url); // WebSocket事件方法 initEventHandle(); } else { console.log(您的浏览器不支持websocket) }}/** * method initEventHandle 初始化ws各个事件的方法 */function initEventHandle (url) { ws.onopen function () { heartCheck.start(); console.log(链接成功:, url); } //获得消息事件 ws.onmessage function(data, state) { // 收到消息的时候重置倒计时 heartCheck.reset(); //something } ws.onerror function() { message(error, WebSocket连接错误正在重连); reconnect(); } ws.onclose function () { console.log(onclose); reconnect(); }}/** * method reconnect ws重新连接 * description lockReconnect防止重复连接,时间戳避免在失败时候会频繁建立ws连接 */function reconnect() { if(lockReconnect) return; lockReconnect true; //没连接上会一直重连设置延迟避免请求过多 setTimeout(function () { createWebSocket(); lockReconnect false; }, 2000);}
