在 Service Worker 中使用 WebSocket

本教學課程說明如何在 Chrome 擴充功能的服務工作站中連線到 WebSocket。您可以前往 GitHub 查看實際範例。

背景

自 Chrome 116 版起，擴充功能服務 worker 可獲得更完善的 WebSockets 支援。先前，如果 WebSocket 連線持續運作，但連續 30 秒未發生其他擴充功能事件，Service Worker 可能會處於閒置狀態。這會終止 Service Worker 並關閉 WebSocket 連線。如要進一步瞭解擴充功能服務工作站生命週期，請參閱擴充功能服務工作站指南。

自 Chrome 116 版起，您可以在 30 秒 Service Worker 活動視窗中交換訊息，讓已啟用 WebSocket 連線的 Service 工作站保持啟用狀態。這些事件可以由伺服器或擴充功能啟動。在以下範例中，我們會從 Chrome 擴充功能傳送一般訊息至伺服器，確保服務工作站保持運作。

範例：WebSocket 持續連線

首先，我們需要確保擴充功能只在 Chrome 版本 116 以上版本中執行，也就是在服務工作者中支援 WebSockets，方法是在資訊清單中將 Chrome 最低版本設為 116：

manifest.json:

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

然後我們每 20 秒傳送一次保持運作訊息，讓 Service Worker 保持活躍。服務工作站連線至 WebSocket 後，就會啟動 keepalive。以下是 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() 內部，我們會在具有有效 WebSocket 連線時，使用 setInterval(...) 定期傳送連線偵測 (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 
  );
}