后端服务器宕机或重启时，前端 Vue 一直重连 webSocket 的解决办法：

问题重现：后盾服务重启时，前端连贯的 webScoket 就断了，须要刷新页面能力从新建设连贯，这样用户体验的成果不好，而且有些业务场景，比方硬件监控零碎大屏这些是不容许刷新页面的，所以须要前端发现 webSocket 断了，而后本人一直去发动连贯。

解决思路：在 webSocket 的生命周期 onclose 和 onerror 时调用重连函数，减少心跳检测。

解决方案：

1. 创立变量

   data() {    
       return {        
           // webSocket 对象        
           webSocket: null,        
           // webSocketUrl 地址        
           webSocketUrl: null,        
           // 连贯标识 防止反复连贯        
           isConnect: false,        
           // 断线重连后，提早 5 秒从新创立 WebSocket 连贯  rec 用来存储提早申请的代码        
           rec: null,        
           // 心跳发送 / 返回的信息        
           checkMsg: {hhh: 'heartbeat'},        
           // 每段时间发送一次心跳包 这里设置为 20s    
           timeout: 20000,        
           // 延时发送音讯对象（启动心跳新建这个对象，收到音讯后重置对象）timeoutObj: null,    
      }
   }

2. 创立 webSocket 连贯

   // 创立 webSocket 连贯
   createWebSocket() {    
       let that = this;    
       that.webSocket = new WebSocket(that.webSocketUrl);
       that.initWebsocket();}

3. 初始化 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;
   }

4. 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);
    }

5. websocketonerror 函数

   websocketonerror() {    
       let that = this;    
       console.log('error');    
       // 连贯断开后批改标识    
       that.isConnect = false;    
       // 连贯谬误 须要重连    
       that.reConnect();}

6. 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);
   }

7. websocketclose 函数

   websocketclose() {    
       let that = this;    
       console.log('close');    
       // 连贯断开后批改标识    
       that.isConnect = false;    
       // 连贯谬误 须要重连    
       that.reConnect();}

8. 定义重连函数

   reConnect() {    
       let that = this;    
       console.log('尝试从新连贯');    
       // 如果曾经连上就不在重连了    
       if (that.isConnect) {return;}    
       clearTimeout(that.rec);    
       // 提早 5 秒重连  防止过屡次过频繁申请重连    
       that.rec = setTimeout(function() {that.createWebSocket();    }, 5000);
   }