Service Worker'larda WebSockets kullan

Bu eğiticide, Chrome uzantınızın hizmet çalışanında bir WebSocket'e nasıl bağlanılacağı gösterilmektedir. GitHub'da çalışan bir örnek bulabilirsiniz.

Arka plan

Chrome 116'dan itibaren, uzantı hizmeti çalışanları WebSockets için iyileştirilmiş destek almaya başlayacaktır. Önceden, bir WebSocket bağlantısı etkin olmasına rağmen 30 saniye boyunca başka hiçbir uzantı etkinliği gerçekleşmediğinde hizmet çalışanı devre dışı bırakılabiliyordu. Bu işlem, hizmet çalışanını sonlandırıp WebSocket bağlantısını kapatır. Uzantı hizmet çalışanının yaşam döngüsüyle ilgili daha fazla bilgi için uzantı hizmet çalışanı kılavuzunu inceleyin.

Chrome 116 sürümünden itibaren, WebSocket bağlantısı olan bir hizmet çalışanının 30 sn. hizmet çalışanı etkinlik penceresi içinde mesaj gönderip almasını sağlayabilirsiniz. Bu işlemler sunucunuzdan veya uzantınızdan başlatılabilir. Aşağıdaki örnekte, hizmet çalışanının aktif kalmasını sağlamak için Chrome uzantısından sunucuya normal bir mesaj göndereceğiz.

Örnek: WebSocket keepalive

Öncelikle, manifest dosyasında minimum Chrome sürümünü 116 olarak ayarlayarak uzantımızın yalnızca hizmet çalışanlarında WebSockets'i destekleyen Chrome sürümlerinde çalıştığından emin olmamız gerekir:

manifest.json:

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

Böylece 20 saniyede bir keepalive mesajı göndererek Service Worker'ın etkin kalmasını sağlayabiliriz. Keepalive, Service Worker WebSocket'e bağlandığında başlatılır. Aşağıdaki örnek WebSocket istemcisi, onopen etkinliği tetiklendiğinde mesajları günlüğe kaydeder ve keepAlive() çağrısı yapar:

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() içinde, etkin bir WebSocket bağlantısı varken sunucuya düzenli olarak ping göndermek için setInterval(...) kodunu kullanırız:

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