前言

最近，在使用 WebSocket（WS）連接時，我們遇到了頻繁斷開連接的問題，單個用戶每天會出現(xiàn)數(shù)百次。盡管使用 socket.io 的自動重連功能可以讓我們在斷開連接后迅速恢復(fù)連接，但并不能保證每次重連都能成功接收 WS 消息。因此，我們進行了多次調(diào)查和測試。最終，我們確定了問題的根本原因：瀏覽器的節(jié)能機制，它無意中成為了問題的罪魁禍?zhǔn)住?/p>

瀏覽器節(jié)能機制概述

瀏覽器的節(jié)能機制正成為前端開發(fā)者越來越重要的考慮因素。這些機制尤其會影響定時器的精度，直接影響前端應(yīng)用的用戶體驗，在某些情況下甚至?xí)绊懣捎眯浴?/p>

為了降低功耗并延長電池壽命，現(xiàn)代瀏覽器引入了節(jié)能機制。這些機制包括但不限于減少空閑標(biāo)簽的 CPU 使用率、降低后臺 JavaScript 的執(zhí)行頻率以及限制定時器的精度。雖然這些措施顯著提高了設(shè)備效率，但也給前端開發(fā)帶來了一些挑戰(zhàn)。

頻繁斷開連接分析

在查看 socket.io 服務(wù)器配置中的 pingTimeout 和 pingInterval 參數(shù)時，我們發(fā)現(xiàn)異常的 WS 心跳導(dǎo)致了重連。以下是詳細(xì)解釋：pingInterval（心跳間隔）

• 默認(rèn)值：25000（25 秒）
• 此值用于心跳機制，用于定期檢查服務(wù)器與客戶端之間的連接是否仍然存活。服務(wù)器每隔 pingInterval 毫秒發(fā)送一個 ping 數(shù)據(jù)包，如果客戶端在 pingTimeout 毫秒內(nèi)沒有回復(fù) pong，服務(wù)器就認(rèn)為連接已關(guān)閉。同樣，如果客戶端在 pingInterval + pingTimeout 毫秒內(nèi)沒有收到服務(wù)器的 ping 數(shù)據(jù)包，那么客戶端也認(rèn)為連接已關(guān)閉。在這兩種情況下，斷開連接的原因都將是：ping 超時。示例代碼如下：

socket.on("disconnect", (reason) => {
  console.log(reason); // "ping timeout"
});

使用像 1000（每秒一次心跳）這樣的小值會給服務(wù)器帶來一些負(fù)載，如果有數(shù)千個連接的客戶端，這可能會變得明顯。

pingTimeout（超時時間）

• 默認(rèn)值：20000（20 秒）
• 見上文。
• 注意事項：使用較小的值意味著暫時無響應(yīng)的服務(wù)器可能會觸發(fā)大量客戶端重連。相反，使用較大的值意味著斷開的連接需要更長時間才能被檢測到（如果 pingInterval + pingTimeout 大于 60 秒，在 React Native 中可能會收到警告）。

在 WS 連接中，服務(wù)器和客戶端都必須保持恒定的心跳。如果任何一方停止，只要滿足以下任一條件，連接就會自動斷開：服務(wù)器發(fā)送 ping，如果客戶端在 pingTimeout 期間內(nèi)沒有回復(fù) pong，服務(wù)器認(rèn)為連接已關(guān)閉；同樣，如果客戶端在 pingInterval + pingTimeout 期間內(nèi)沒有收到服務(wù)器的 ping，客戶端也認(rèn)為連接已關(guān)閉。

我們發(fā)現(xiàn)，在較高版本的 socket.io 中，服務(wù)器會定期發(fā)起 ping。相比之下，在 socket.io 2.X 中，內(nèi)置的心跳機制是由客戶端發(fā)起的。當(dāng)瀏覽器在后臺運行時，即使設(shè)置了每秒觸發(fā)一次的定時器，由于節(jié)能機制，它每分鐘只能觸發(fā)一次，超過了 pingInterval + pingTimeout 的設(shè)置。因此，日志顯示每分鐘都會有一次重連。

解決方案

1. 升級 socket.io 到最新版本：最新版本（4.x）由服務(wù)器發(fā)起心跳，避免了瀏覽器節(jié)能機制對定時器的影響。

2. 自定義 WS 心跳事件：為了盡量減少對現(xiàn)有業(yè)務(wù)邏輯的影響，另一種解決方案是使用自定義心跳事件。服務(wù)器定期發(fā)送 custom - ping。注意：斷開連接時銷毀定時器。雖然 socket.io 有內(nèi)置心跳（2.x 中由客戶端發(fā)起，4.x 中由服務(wù)器發(fā)起），但自定義心跳有助于保持?jǐn)?shù)據(jù)交換，防止自動斷開和重連。

客戶端代碼：

io.on('custom - ping', function () {
  io.emit('custom - pong', Date.now())
})

服務(wù)器代碼：

io.on('connection', (socket) => {
  console.log('New client connected');

  // 發(fā)送自定義 ping 消息
  const pingInterval = setInterval(() => {
    socket.emit('custom - ping', Date.now());
  }, 10000); // 每 10 秒

  // 監(jiān)聽自定義 pong 消息
  socket.on('custom - pong', (data) => {
    console.log('Pong received:', data);
  });

  socket.on('disconnect', () => {
    clearInterval(pingInterval);
    console.log('Client disconnected');
  });
});

注意：斷開連接時銷毀定時器。

3. 使用 setTimeout：使用 setTimeout 時要謹(jǐn)慎，因為它仍然可能失去精度。示例代碼如下：

// 這個 setTimeout 會失去精度
let _cacheTs = Date.now()
const _setTimeoutFn = () => {
  console.log('setTimeout :>> ', Date.now() - _cacheTs);
  _cacheTs = Date.now()
  setTimeout(() => {
    _setTimeoutFn()
  }, 5000)
}
_setTimeoutFn()

在 setTimeout 中，執(zhí)行函數(shù)棧由瀏覽器監(jiān)控，類似于 setInterval，在后臺運行時其精度會降低。但是，以下方法可以避免節(jié)能機制的限制： - 客戶端代碼：

// 監(jiān)聽服務(wù)器發(fā)送的 custom - pong 事件
socket.on('custom - pong', onHeart)

const onHeart = () => {
  if (timer) {
    clearTimeout(pingTime.current)
  }
  timer = window.setTimeout(() => {
    socket.emit('custom - ping', Date.now())
  }, 5000)
}

// 服務(wù)器代碼
socket.on('custom - ping', ()=>{
  socket.emit('custom - pong', Date.now())
})

4. 使用 Web Workers：在 Web Worker 線程中啟動定時器不受瀏覽器節(jié)能機制的影響。

結(jié)論

隨著瀏覽器技術(shù)的發(fā)展，節(jié)能機制將變得更加精細(xì)，這給前端開發(fā)帶來了新的挑戰(zhàn)。理解并適應(yīng)這些變化，并采用正確的策略來解決相關(guān)問題，對于開發(fā)高質(zhì)量的前端應(yīng)用至關(guān)重要。上述方法可以有效減輕或解決瀏覽器節(jié)能機制導(dǎo)致的定時器精度降低的影響，從而提升用戶體驗。