乐趣区

关于vue.js:解决后台服务重启后前端webSocket断了的问题

后端服务器宕机或重启时,前端 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);
    }
退出移动版