共计 1987 个字符,预计需要花费 5 分钟才能阅读完成。
后端服务器宕机或重启时,前端 Vue 一直重连 webSocket 的解决办法:
问题重现:后盾服务重启时,前端连贯的 webScoket 就断了,须要刷新页面能力从新建设连贯,这样用户体验的成果不好,而且有些业务场景,比方硬件监控零碎大屏这些是不容许刷新页面的,所以须要前端发现 webSocket 断了,而后本人一直去发动连贯。
解决思路:在 webSocket 的生命周期 onclose 和 onerror 时调用重连函数,减少心跳检测。
解决方案:
-
创立变量
data() { return { // webSocket 对象 webSocket: null, // webSocketUrl 地址 webSocketUrl: null, // 连贯标识 防止反复连贯 isConnect: false, // 断线重连后,提早 5 秒从新创立 WebSocket 连贯 rec 用来存储提早申请的代码 rec: null, // 心跳发送 / 返回的信息 checkMsg: {hhh: 'heartbeat'}, // 每段时间发送一次心跳包 这里设置为 20s timeout: 20000, // 延时发送音讯对象(启动心跳新建这个对象,收到音讯后重置对象)timeoutObj: null, } }
-
创立 webSocket 连贯
// 创立 webSocket 连贯 createWebSocket() { let that = this; that.webSocket = new WebSocket(that.webSocketUrl); that.initWebsocket();}
-
初始化 webSocket 连贯
initWebsocket() { let that = this; //WebSocket 连贯建设之后会调用 onopen 办法 that.webSocket.onopen = that.websocketonopen; // 当 websocket 收到服务器发送的信息之后 会调用 onmessage 办法 that.webSocket.onmessage = that.websocketonmessage; // 当 websocket 因为各种起因(失常或者异样)敞开之后,会调用 onclose 办法 that.webSocket.onclose = that.websocketclose; // 当 websocket 因为异样起因(比方服务器部署、断网等)敞开之后,会调用 onerror 办法 // 在 onerror 中须要调用 reConnect 办法重连服务器 that.webSocket.onerror = that.websocketonerror; }
-
websocketonopen 函数
websocketonopen() { let that = this; console.log('open'); // 连贯建设后批改标识 that.isConnect = true; // 建设连贯后开始心跳 // 因为 nginx 个别会设置例如 60s 没有传输数据就断开连接 所以要定时发送数据 that.timeoutObj = setTimeout(function() {if (that.isConnect) that.webSocket.send(that.checkMsg); }, that.timeout); }
-
websocketonerror 函数
websocketonerror() { let that = this; console.log('error'); // 连贯断开后批改标识 that.isConnect = false; // 连贯谬误 须要重连 that.reConnect();}
-
websocketonmessage 函数
websocketonmessage(e) { // 拿到数据,解决本人的业务 let that = this; console.log(e.data); // 获取音讯后 重置心跳 clearTimeout(that.timeoutObj); that.timeoutObj = setTimeout(function() {if (that.isConnect) that.webSocket.send(that.checkMsg); }, that.timeout); }
-
websocketclose 函数
websocketclose() { let that = this; console.log('close'); // 连贯断开后批改标识 that.isConnect = false; // 连贯谬误 须要重连 that.reConnect();}
-
定义重连函数
reConnect() { let that = this; console.log('尝试从新连贯'); // 如果曾经连上就不在重连了 if (that.isConnect) {return;} clearTimeout(that.rec); // 提早 5 秒重连 防止过屡次过频繁申请重连 that.rec = setTimeout(function() {that.createWebSocket(); }, 5000); }
正文完