Menggunakan WebSocket di pekerja layanan

Tutorial ini menunjukkan cara terhubung ke WebSocket di service worker ekstensi Chrome Anda. Anda dapat menemukan contoh yang berfungsi di GitHub.

Latar belakang

Mulai Chrome 116, service worker ekstensi mendapatkan dukungan yang lebih baik untuk WebSockets. Sebelumnya, service worker dapat menjadi tidak aktif meskipun koneksi WebSocket aktif jika tidak ada peristiwa ekstensi lain yang terjadi selama 30 detik. Hal ini akan menghentikan service worker dan menutup koneksi WebSocket. Untuk mengetahui latar belakang siklus proses service worker ekstensi selengkapnya, baca panduan service worker ekstensi.

Mulai Chrome 116, Anda dapat mempertahankan service worker dengan koneksi WebSocket yang aktif dengan bertukar pesan dalam jendela aktivitas service worker 30 detik. Hal ini dapat dimulai dari server atau dari ekstensi Anda. Dalam contoh berikut, kita akan mengirim pesan reguler dari ekstensi Chrome ke server untuk memastikan service worker tetap aktif.

Contoh: WebSocket keepalive

Pertama, kita harus memastikan bahwa ekstensi kita hanya berjalan di versi Chrome yang mendukung WebSocket di service worker dengan menetapkan versi Chrome minimum ke 116 dalam manifes:

manifest.json:

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

Kemudian, kita dapat mempertahankan service worker tetap aktif dengan mengirim pesan keepalive setiap 20 detik. Keepalive dimulai setelah service worker terhubung ke WebSocket. Contoh klien WebSocket berikut mencatat pesan dan memanggil keepAlive() saat peristiwa onopen dipicu:

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();
}

Di dalam keepAlive(), kita menggunakan setInterval(...) untuk mengirim ping secara teratur ke server saat ada koneksi WebSocket aktif:

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 
  );
}