WebSocket使用及优化（心跳机制与断线重连）

WebSocket在2008年被提出，其通信协议于2011被制定为标准
与http不同，websocket支持全双工通信（即：在客户端和服务之间双向通信）在websocket问世之前，客户端与服务器通常采用http轮询和Comet等方式保持长链接
然而，这么做无疑会对服务端造成资源消耗，因为HTTP请求包含较长的头文件，只传递了少许的有用信息，十分消耗资源。
于是websocket便诞生了，它不仅节省资源和带宽，更是能实现长链接作用，只需客户端主动与服务端握手一次，即可进行实时通信，实现推送技术。

const socketURL = 'ws://xxxx.com/' // 连接地址
let ws = null    // websocket实例
let lockReconnect = false; // websocket连接状态，避免重复连接
let reconnectTimer = 2000  // 断开后2s自动重连

function setWebsocket() {
  ws = new WebSocket(socketURL)
  ws.addEventListener('open', () => {
    alert('服务连接成功');
  })
  ws.addEventListener('close', () => {
    alert('服务已断开');
    reconnect()
  })
  ws.addEventListener('error', () => {
    alert('服务发生异常');
    reconnect()
  })
  ws.addEventListener('message', event => {
    alert('收到消息：', event.data)
  })
}

// 重连
function reconnect() {
  if (lockReconnect) return;
  lockReconnect = true;
  setTimeout(function () {
    setWebsocket();
    lockReconnect = false;
  }, reconnectTimer);
}

// 页面关闭断开socket连接
window.onbeforeunload = function() {
  ws.close()
  return;
}

// 向外暴露
export {
    ws
}