简单实现webSocket + 心跳机制

import { baseUrl } from "../assets/js/baseUrl";

class WS {
  ws: any | null = null;
  timeOut: number = 5000;
  timer: any = null;
  serverTimer: any = null;
  connect() {
    this.ws = new WebSocket(baseUrl);
    this.ws.onopen = function() {
      this.initHeart(); //启动心跳机制
      console.log("连接成功");
    };
    this.ws.onmessage = function(evt: any) {
      this.initHeart(); //重置心跳机制
      var received_msg = evt.data;
      console.log("数据已接收...");
    };
    this.ws.onerror = function() {};
    this.ws.onclose = function() {
      // 关闭 websocket
      console.log("关闭");
    };
  }
  close() {
    this.ws.close();
  }
  send(msg: string) {
    this.ws.send(msg);
  }
  heart() {
    this.timer = setTimeout(() => {
      this.ws.send("心跳检测");
      this.serverTimer = setTimeout(() => {
        //如果超过一定时间还没重置，说明后端主动断开了
        this.ws.close(); //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
      }, this.timeOut);
    }, this.timeOut);
  }
  initHeart() {
    this.timer && clearTimeout(this.timer);
    this.serverTimer && clearTimeout(this.serverTimer);
    this.heart();
  }
}

来源：CSDN

作者：强身健体，清神醒脑

链接：https://blog.csdn.net/weixin_43660626/article/details/103597088