教你如何快速解决后台服务重启后，前端webSocketz中断的问题

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