vue中使用WebSocket及心跳机制

一、WebSocket简介

WebSocket是HTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术，属于应用层协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。

二、WebSocket事件与方法

1、创建WebSocket实例

    var socketObj;
    if ("WebSocket" in window) {
      socketObj = new WebSocket(webSocketLink);
    } else if ("MozWebSocket" in window) {
      socketObj = new MozWebSocket(webSocketLink);
    }

2、WebSocket 事件

事件.png

3、WebSocket 方法

方法.png

三、WebSocket的心跳重连机制

1、问题

（1）websocket在连接后，如果长时间服务端和客户端不发消息，服务端会把websocket给断开。
（2）存在网络忽然断开的情况，这时服务器端并没有触发onclose的事件。服务器会继续向客户端发送多余的信息，这些数据会丢失。

2、心跳重连机制

为了解决上面的问题，就需要⼀种机制来检测客户端和服务端是否处于正常的连接状态。因此就有了websocket的心跳机制。

⼼跳机制是客户端每隔⼀段时间会向服务端发送⼀个数据包，告诉服务端自己还活着，同时客户端会根据服务端是否会回传⼀个数据包来确定服务端是否还活着。
如果客户端没有收到回复，表示websocket断开连接或者网络出现问题，就需要重连。

四、实际使用

详细代码如下：