vue连接websocket并做心跳检测

let wsurl = `${location.protocol === "https:" ? "wss" : "ws"}` + "://api.aaa.com:8080/websocket"
let ws = null;
let weboscket_callback = null;
//避免重复连接
let lockReconnect = false;
let timeoutnum = null; //断开 重连倒计时
let initWebSocket = () => {
  //初始化 websocket
  if ('WebSocket' in window) {
    ws = new WebSocket(wsurl)
    ws.onmessage = websocketOnmessage
    ws.onopen = websocketOnopen
    ws.onerror = websocketOnerror
    ws.onclose = websocketClose
  } else {
    console.log('Current browser Not support websocket')
  }
}
//获取 websocket 推送的数据
let websocketOnmessage = e => {
    heartCheck.reset().start();
  return weboscket_callback(e)
}

// 发送数据
let sendData = (data, callback) => {
  weboscket_callback = callback
  //  判断 data 数据类型
  if (typeof data == 'string') {
    data = data
  } else {
    data = JSON.stringify(data)
  }

  //  判断 websocket 的状态
  if (ws.readyState === ws.OPEN) {
    // 已经打开,可以直接发送
    ws.send(data)
  } else if (ws.readyState === ws.CONNECTING) {
    // 正在开启状态中,则 1 秒后重新发送
    setTimeout(() => {
      ws.send(data)
    }, 1000)
  } else {
    // 未打开,则开启后重新调用
    initWebSocket()
    sendData(data, callback)
  }
}
// 连接关闭事件
let websocketClose = (e) => {
  console.log('连接关闭', e)
  heartCheck.reset();//心跳检测
  reconnect();

}
// 连接失败时重新连接
let websocketOnerror = () => {
    lockReconnect = false;
    reconnect();
}
// 手动关闭 websocket
let closeWebsocket = () => {
  console.log('手动关闭 websocket');
  ws.close()
}
// 重连
let reconnect = () => {
    if (lockReconnect) {
        return;
    }
// 没连接上会一直重连,设置延迟避免请求过多
timeoutnum && clearTimeout(timeoutnum);
timeoutnum =  setTimeout(function () {
    lockReconnect = false;
    console.log('重连中...');
    initWebSocket();
  }, 5000);
  }
let websocketOnopen =()=>{
    heartCheck.reset().start()
}
let heartCheck = { //心跳检测
    // timeout: 240 * 1000,
    timeout: 30000,
    timeoutObj: null,
    serverTimeoutObj: null,
    reset () {
    clearTimeout(this.timeoutObj)
    clearTimeout(this.serverTimeoutObj)
    return this;
    },
    start(){
    let that = this;
      this.timeoutObj = setTimeout(() => {
    //发送数据,如果onmessage能接收到数据,表示连接正常,然后在onmessage里面执行reset方法清除定时器
        ws.send(JSON.stringify({ eventType: 'PING' }))
        console.log('ping')
    this.serverTimeoutObj = setTimeout(() => {
      ws.close()
    },that.timeout)
    },this.timeout)
    }
   }
export { initWebSocket, sendData, websocketOnmessage,closeWebsocket}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容