websocket心跳及重连机制

React中项目需要使用websockt的重连机制

useEffect(() => {
    let webSocket = null;
    let lockReconnect = false; // 是否真正建立连接
    let timeout = 20 * 1000; // 20秒一次心跳，可更改实际需求需要的时间
    let timeoutObj = null; 
    let serverTimeoutObj = null;
    let timeoutNum = null;
    const start = () => { // 开启心跳
      timeoutObj && clearTimeout(timeoutObj);
      // serverTimeoutObj && clearTimeout(serverTimeoutObj);
      timeoutObj = setTimeout(function () {
        if (webSocket.readyState === 1) {//连接正常
          webSocket.send('hello');
        } else {
          reconnect();
        }
        // serverTimeoutObj = setTimeout(function () {
        //   // 超时关闭
        //   webSocket.close();
        // }, timeout);
      }, timeout)
    };
    const reset = () => { // 重置心跳
      // 清除时间
      clearTimeout(timeoutObj);
      // clearTimeout(serverTimeoutObj);
      // 重启心跳
      start();
    };
    const reconnect = () => { // 重新连接
      console.log('reconnect', lockReconnect);
      if (lockReconnect) {
        return;
      };
      lockReconnect = true;
      // 没连接上会一直重连，设置延迟避免请求过多
      timeoutNum && clearTimeout(timeoutNum);
      timeoutNum = setTimeout(function () {
        // 新连接
        initWebSocket();
        lockReconnect = false;
      }, 5000);
    };
    const initWebSocket = () => {
      webSocket = new WebSocket('ws://***********');
      webSocket.onopen = () => {
        console.log('open...');
        start();
      };
      webSocket.onclose = () => {
        console.log('close...');
        reconnect();
      };
      webSocket.onerror = () => {
        console.log('error...');
        // reconnect();
      };
      webSocket.onmessage = (result) => {
        const { data } = result;
        reset();
        if (data === 'new connection into') {
          console.log('data---', data);
          return;
        }
        const msg = JSON.parse(data);
        console.log('获取的数据', msg)
        }
      };
    };
    initWebSocket();
    return () => {
      webSocket.close();
    };
  }, []);