Websocket心跳在vue中的实现

简述

利用递归调用的方法实现，每10秒钟发一次心跳，如果断开send方法则会主动触发onclose函数（onclose函数并不会在断网的情况下立即触发，会有几分钟的延迟。websocket自身并未在网络应用层实现心跳机制，拔掉网线依然会仍然会认为处于连接状态。）

talk is cheap, show you the code.

定义到一个vue组件当中，例如heartbeat.vue，然后将组件挂载到全局（在main.vue中倒入）

export default{
        hb : null,
        testWs(id){  // 递归检测网络断开
        let WebSocketId = id
        let _self = this

        _self.hb = setInterval(function(){
                console.log('try ididdi = ' + WebSocketId)
                // console.log(_self.bt_kernels)
                _self.bt_kernels[WebSocketId.toString()].ws.send("^_^")
                // console.log("我还活着，真好。@^_^@")
                if(_self.bt_kernels[WebSocketId.toString()].ws.readyState == 2 || _self.bt_kernels[WebSocketId.toString()].ws.readyState == 3){
                    // console.log("我那么可爱，却死掉了@T_T@")
                    alert("websocket 已断开，正在重新连接……")
                    clearInterval(_self.hb)
                    let i = 1
                    let myVar = setInterval(function(){
                        console.log('catch ididdi = ' + WebSocketId)
                        console.log(_self.bt_kernels)
                        if(_self.bt_kernels[WebSocketId.toString()].ws.readyState == 2 || _self.bt_kernels[id.toString()].ws.readyState == 3){

                            _self.bt_kernels[WebSocketId.toString()].ws = new WebSocket(_self.bt_kernels[id.toString()].ws.url)
                            // console.log("尝试第"+i+"次重连")
                            if(i == 10){
                                // console.log("救不活了，放弃重连")
                                alert("websocket 重连失败，请刷新页面")
                                clearInterval(myVar)
                            }
                            i++
                        }
                        if(_self.bt_kernels[WebSocketId.toString()].ws.readyState == 0){
                            // console.log("尝试重连中......")
                        }else if(_self.bt_kernels[WebSocketId.toString()].ws.readyState == 1){
                            // console.log("我又活过来了。Y^_^Y")
                            clearInterval(myVar)
                                _self.testWs(WebSocketId)
                            }
                    },10*1000)
                }
        }, 10*1000)
    },
}

函数调用，websockt建立成功则开启心跳

websocket.onopen = function(){
    this.$heartbeat.testWs()
}