初次使用webscroket的感悟

websocket很早的时候就有了解过，当时只知道这是一个关于聊天的技术，其他的方面对于他的认知为零，初次在项目里运用是，做一个pc端铃铛的消息提示，当时由于对webscoket不了解，再加上有个朋友他之前做过聊天方面得项目，告诉我webscoket很难搞，经常出现各种错，于是我本能的对webscoket产了一种抗拒的心里。
但是项目里必须要用所以没办法，只能硬着头皮搞，经过看网上一些大佬的博客，以及官网的api，让我明白了，原生webscoket需要new一下之后去使用关于webscoket的事件监听
在聊天中主要有四个事件分别是：onclose 在webscoket关闭时触发，onerror 在服务端抛异常时触发，onopen 在webscoket建立连接后触发，是四个监听事件中最早触发的事件，onmessage 在收到消息时触发。发送消息使用webscoket的send方法。由于小编用的技术框架是vue，接下来我将告诉大家在vue中如何使用webscoket。
在websocket实例化的时候，我们会绑定一些事件，这个初始化放到created生命周期函数中。
initWebscoket(){
 let ws = new WebSocket(url);
  ws.onclose = this.webClose();
  ws.onerror = this.webError();
  ws.onopen = this.webOpen()
  ws.onmessage = this.Message()
}
如果希望websocket连接一直保持，我们会在close或者error上绑定重新连接方法。
webClose(){
	this.reconnect();
}
webError(){
	this.reconnect();
}
// 避免建立多个连接，
 reconnect() {
    if(this.lockReconnect) {
      return;
    };
    this.lockReconnect = true;
    //没连接上会一直重连，设置延迟避免请求过多
    this.tt && clearTimeout(this.tt);
    this.tt = setTimeout(function () {
      this.createWebSocket();
      this.lockReconnect = false;
    }, 4000);
  }
这样一般正常情况下失去连接时，触发onclose方法，我们就能执行重连了。但是在断网的情况下是不会就不会触发，因此但是的监听onclose方法是无效的，此时就需要用到webscoket的另一个知识点心跳检测，如何实现心跳检测请看下面。心跳检测是在onmessage和onOpen里面调用的heartCheck = {
    timeout: 60000,//60ms
    timeoutObj: null,
    serverTimeoutObj: null,
    reset: function(){
        clearTimeout(this.timeoutObj);
        clearTimeout(this.serverTimeoutObj);
     this.start();
    },
    start: function(){
        var self = this;
        this.timeoutObj = setTimeout(function(){
            ws.send("HeartBeat");
            self.serverTimeoutObj = setTimeout(function(){
                ws.close();//如果onclose会执行reconnect，我们执行ws.close()就行了.如果直								接执行reconnect 会触发onclose导致重连两次
            }, self.timeout)
        }, this.timeout)
    },
}

心跳检测代码原理每隔一段固定的时间，向服务器端发送一个ping数据，如果在正常的情况下，服务器会返回一个pong给客户端，如果客户端通过onmessage事件能监听到的话，说明请求正常，这里我们使用了一个定时器，每隔3秒的情况下，如果是网络断开的情况下，在指定的时间内服务器端并没有返回心跳响应消息，因此服务器端断开了，因此这个时候我们使用ws.close关闭连接，在一段时间后(在不同的浏览器下，时间是不一样的，firefox响应更快)，可以通过 onclose事件监听到。因此在onclose事件内，我们可以调用 reconnect事件进行重连操作。因此不管在那种情况下都会一直连接，除非关掉浏览器。