Menggunakan WebSocket di pekerja layanan

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

Latar belakang

Mulai Chrome 116, pekerja layanan ekstensi mendapatkan dukungan yang ditingkatkan untuk WebSockets. Sebelumnya, pekerja layanan bisa menjadi tidak aktif meskipun koneksi WebSocket aktif jika tidak ada peristiwa ekstensi lain yang terjadi selama 30 detik. Ini akan menghentikan pekerja layanan dan menutup koneksi WebSocket. Untuk latar belakang selengkapnya tentang siklus proses pekerja layanan ekstensi, baca panduan pekerja layanan ekstensi).

Mulai Chrome 116 yang aktif, Anda dapat membuat pekerja layanan dengan koneksi WebSocket tetap aktif dengan bertukar pesan dalam jendela aktivitas pekerja layanan 30-an. Fungsi ini dapat dimulai dari server Anda atau dari ekstensi Anda. Pada contoh berikut, kita akan mengirim pesan reguler dari ekstensi Chrome ke server untuk memastikan bahwa pekerja layanan tetap aktif.

Contoh: WebSocket keepalive

Pertama, kita perlu memastikan bahwa ekstensi hanya berjalan di versi Chrome yang mendukung WebSockets dalam pekerja layanan dengan menetapkan versi Chrome minimum ke 116 dalam manifes:

manifest.json:

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

Kemudian, kita dapat membuat pekerja layanan tetap aktif dengan mengirim pesan keepalive setiap 20 detik. Keepalive dimulai setelah pekerja layanan terhubung ke WebSocket. Contoh klien WebSocket berikut mencatat pesan dan panggilan 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 secara teratur mengirim ping ke server saat ada koneksi WebSocket yang 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 
  );
}