在 Service Worker 中使用 WebSocket

本教學課程示範如何在 Chrome 擴充功能的 Service Worker 中連線至 WebSocket。您可以在 GitHub 上找到工作範例。

背景

從 Chrome 116 開始，擴充功能服務工作人員可獲得更完善的 WebSockets 支援。先前，如果 30 秒內沒有發生其他擴充功能事件，即使 WebSocket 連線處於啟用狀態，Service Worker 仍可能處於非使用中狀態。這會終止 Service Worker 並關閉 WebSocket 連線。如要進一步瞭解擴充功能 Service Worker 生命週期的背景資訊，請參閱擴充功能 Service Worker 指南。

從 Chrome 116 開始，您可以在 30 秒的 Service Worker 活動視窗內交換訊息，讓具有 WebSocket 連線的 Service Worker 保持運作。這些要求可從伺服器或擴充功能發起。在下列範例中，我們會從 Chrome 擴充功能傳送一般訊息至伺服器，確保 Service Worker 保持運作。

範例：WebSocket 保持運作

首先，我們需要在資訊清單中將最低 Chrome 版本設為 116，確保擴充功能只會在支援服務工作站中 WebSockets 的 Chrome 版本中執行：

manifest.json:

{
  ...
  "minimum_chrome_version": "116",
  ...
}

接著，我們可以每 20 秒傳送一次存留訊息，讓 Service Worker 保持運作。Service Worker 連線至 WebSocket 後，就會啟動存留機制。下列 WebSocket 用戶端範例會在 onopen 事件觸發時記錄訊息並呼叫 keepAlive()：

service-worker.js

let webSocket = null;

function connect() {
  webSocket = new WebSocket('wss://example.com/ws');

  webSocket.onopen = (event) => {
    console.log('websocket open');
    keepAlive();
  };

  webSocket.onmessage = (event) => {
    console.log(`websocket received message: ${event.data}`);
  };

  webSocket.onclose = (event) => {
    console.log('websocket connection closed');
    webSocket = null;
  };
}

function disconnect() {
  if (webSocket == null) {
    return;
  }
  webSocket.close();
}

在 keepAlive() 內，我們會使用 setInterval(...)，在 WebSocket 連線處於啟用狀態時，定期將 Ping 傳送至伺服器：

function keepAlive() {
  const keepAliveIntervalId = setInterval(
    () => {
      if (webSocket) {
        webSocket.send('keepalive');
      } else {
        clearInterval(keepAliveIntervalId);
      }
    },
    // Set the interval to 20 seconds to prevent the service worker from becoming inactive.
    20 * 1000 
  );
}