• websocket 一般 每隔 90 秒無操作則會自動斷開 ，需要加入一個心跳機制 來防止 自斷

 useEffect(() => {
    //避免重復鏈接
    let lockReconnect = false;
    //路徑
    let wsUrl = `ws://xxx.yyy.com/imserver/xxx`
    //webSocket對象
    let ws;
    //時間間隔
    let tt;

    // if ("WebSocket" in window) {
    //     console.log("支持WebSocket")
    // } else {
    //     alert("該瀏覽器不支持WebSocket")
    // }

    //創建ws連接
    let createWebSocket = function (wsUrl) {
      try {
        //成功
        ws = new WebSocket(wsUrl);
        webSocketInit(); //初始化webSocket連接函數
      } catch (e) {
        // console.log('catch');
        //重連函數
        webSocketReconnect(wsUrl);
      }
    };
    //初始化方法，成功后執行
    let webSocketInit = function () {
      //連接關閉函數
      ws.onclose = function () {
        // console.log("連接已關閉...");
        webSocketReconnect(wsUrl); //如果連接關閉則重連
      };
      //連接錯誤函數
      ws.onerror = function () {
        // console.log("連接錯誤...");
        webSocketReconnect(wsUrl); //如果連接錯誤則重連
      };
      //連接建立,發送信息
      ws.onopen = function () {
        ws.send(JSON.stringify(''));
        //心跳檢測啟動
        heartCheck.start(); //訂閱業務發送之后啟動心跳檢測機制
      };
      //業務訂閱成功后接受服務端推送消息  ，其實是個字符串
      ws.onmessage = function (event) {
        // console.log('success=>', JSON.parse(event.data));
        let eventData = JSON.parse(event.data);
        //-----此處對返回數據進行處理----
        heartCheck.reset();
      };
    };

    let webSocketReconnect = function (url) {
      // console.log("socket 連接斷開，正在嘗試重新建立連接");
      if (lockReconnect) {
        return;
      }
      lockReconnect = true;
      //沒連接上會一直重連，設置延遲，避免請求過多
      //s中清楚setTimeout的定時觸發設置，之所以加個timer，是為了方便第二次賦值給timer。
      // 也就是說直接clearTImeout（timer）則timer就不存在了 再次訪問就是error了。
      // 而timer&&clearTimeout(timer)則將timer 變成undefined
      tt && clearTimeout(tt);
      tt = setTimeout(function () {
        createWebSocket(url);
      }, 4000);
    };

    //心跳檢測.所謂的心跳檢測，就是隔一段時間向服務器僅限一次數據訪問，因為長時間不使用會導致ws自動斷開，
    // 一般是間隔90秒內無操作會自動斷開，因此，在間隔時間內進行一次數據訪問，以防止ws斷開即可，
    //這里選擇30秒，倒計時30秒內無操作則進行一次訪問，有操作則重置計時器
    var heartCheck = {
      timeout: 30000, //30秒
      timeoutObj: null,
      reset: function () {
        //接收成功一次推送，就將心跳檢測的倒計時重置為30秒
        clearTimeout(this.timeoutObj); //重置倒計時
        this.start();
      },
      start: function () {
        //啟動心跳檢測機制，設置倒計時30秒一次
        this.timeoutObj = setTimeout(function () {
          // console.log("心跳一次");
          ws.send('ping'); //啟動心跳
        }, this.timeout);
      },
      //onopen連接上，就開始start及時，如果在定時時間范圍內，onmessage獲取到了服務端消息，
      // 就重置reset倒計時，距離上次從后端獲取消息30秒后，執行心跳檢測，看是不是斷了。
    };

    //開始創建webSocket連接
    createWebSocket(wsUrl);
    return () => {
      ws.close();
    };
  }, []);