websocket的实践

var ws
var url = "ws://xxxx"
function WebSocketTest() {
  if ("WebSocket" in window) {
    // 打开一个 web socket
    ws = new WebSocket(url);
    ws.onopen = function() {
      // 根据后台要求拼接好对应的 json 数据(不一定是 json, 看后台规定)
      var json={
        "test": "test"
      }
      console.log(‘WebSocket 第‘ + n + ‘次请求‘)
      // Web Socket 已连接上，使用 send() 方法发送数据
      ws.send(JSON.stringify(json));
      console.log(‘已连接上 WebSocket‘)
      // 模拟断开 => 可以开启下面代码模拟服务器断开时重新请求连接的效果
      // setTimeout(function(){
      //   ws.onclose()
      // }, 8000)
    };
    ws.onmessage = function (ev) {
      var json = ev.data;
      console.log(‘这里是接收到服务器发送的数据：‘ + json)
    };
    ws.onclose = function() {
      // 关闭 websocket
      console.log("连接已关闭...")
      // 当监听到 websocket 连接断开时,重新连接
      reconnect()
    };
  } else {
     // 浏览器不支持 WebSocket
     alert("您的浏览器不支持 WebSocket!");
   }
}
var timer = null
// 重新连接
function reconnect () {
  try {
    // 将上一次的定时器清除
    timer && clearTimeout(timer)
    // 这里将尝试连接
    WebSocketTest()
  } catch {
    // 当连接失败时延迟3秒后再次重新请求连接
    timer = setTimeout(function (){
      reconnect()
    }, 3000)
  }
}
// 页面关闭时触发
window.onunload = function () {
  if (ws) {
    ws.close()
  }
}
// 页面刷新时触发
window.onbeforeunload = function () {
  if (ws) {
    ws.close()
  }
}