后端服务器宕机或重启时，前端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);
}

最后

如果你觉得这篇内容对你挺有启发，我想邀请你帮我二个小忙：

1. 点个「 在看 」，让更多的人也能看到这篇内容（喜欢不点在看，都是耍流氓 -_-）
2. 欢迎加关注私信“01”，拉你进技术群，长期交流学习.

点个在看支持我吧，转发就更好了