webSocket+HeadBeat

最近需要用到webSocket，来实时接收长链接发送过来的信息，同时又要发送心跳给服务端。直接贴代码吧。

var ws;//websocket实例
var heartCheck;
var lockReconnect = false;//避免重复连接
var wsUrl = "ws://116.62.207.100:8080/websocket";
function createWebSocket(url) {
    try {
        ws = new WebSocket(url);
        initEventHandle();
    } catch (e) {
        reconnect(url);
    }     
}
function initEventHandle() {
    ws.onclose = function () {
      console.log("webscoket关闭状态即将重连...")
      reconnect(wsUrl);
    };
    ws.onerror = function () {
      console.log("webscoket异常状态即将重连...")
        reconnect(wsUrl);
    };
    ws.onopen = function () {
      console.log("webscoket已经链接 心跳检测重置中...")
        //心跳检测重置
        heartCheck.reset().start();
    };
    ws.onmessage = function (event) {
      console.log("【收到】:" + event.data);
      //如果获取到消息，心跳检测重置
      //拿到任何消息都说明当前连接是正常的
      heartCheck.reset().start();
    }
}
function reconnect(url) {
    if(lockReconnect) return;
    lockReconnect = true;
    //没连接上会一直重连，设置延迟避免请求过多
    setTimeout(function () {
        createWebSocket(url);
        lockReconnect = false;
    }, 2000);
}
//心跳检测
heartCheck = {
    timeout: 90000,//90秒
    timeoutObj: null,
    serverTimeoutObj: null,
    reset: function(){
        clearTimeout(this.timeoutObj);
        clearTimeout(this.serverTimeoutObj);
        return this;
    },
    start: function(){
        var self = this;
        //这里发送一个心跳，后端收到后，返回一个心跳消息，
        //onmessage拿到返回的心跳就说明连接正常
        send("HeadBeat");
        this.timeoutObj = setTimeout(function(){
            console.log("【走到这一步的原因很简单，因为你没有收到心跳消息，那么N秒后将自动关闭重连】")
            self.serverTimeoutObj = setTimeout(function(){//如果超过一定时间还没重置，说明后端主动断开了
                ws.close();//如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
            }, self.timeout)
        }, this.timeout)
    }
}
createWebSocket(wsUrl);
//WebSocket发送请求
function send(message) {
  if (!window.WebSocket) { return; }
  if (ws.readyState == WebSocket.OPEN) {
    console.log('【发送】：'+JSON.stringify(message))
    ws.send(JSON.stringify(message));
  } else {
    layui.use('layer', function(){
      var layer = layui.layer;
      layer.msg('您还未连接上服务器，请刷新页面重试！',{icon: 0});
    })  
  }
}