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 lebih baik untuk WebSockets. Sebelumnya, pekerja layanan dapat 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 mengetahui latar belakang selengkapnya tentang siklus proses pekerja layanan ekstensi, baca panduan pekerja layanan ekstensi).

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

Contoh: WebSocket keepalive

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

manifest.json:

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

Kemudian kita bisa 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 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 ke server secara berkala 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 
  );
}