Service Worker'larda WebSockets kullan

Bu eğitimde, Chrome uzantınızın hizmet çalışanında bir WebSocket'e nasıl bağlanacağınız gösterilmektedir. GitHub'da çalışan bir örneği bulabilirsiniz.

Arka plan

Uzantı hizmeti çalışanları, Chrome 116'dan itibaren WebSockets için iyileştirilmiş destek alacaktır. Daha önce, 30 saniye boyunca başka bir uzantı etkinliği gerçekleşmezse WebSocket bağlantısı etkin olmasına rağmen hizmet çalışanı etkinliğini kaybedebiliyordu. Bu, hizmet çalışanını sonlandırıp WebSocket bağlantısını kapatır. Uzantı hizmet çalışanı yaşam döngüsü hakkında daha fazla bilgi için uzantı hizmet çalışanı kılavuzunu okuyun.

Chrome 116 sürümünden itibaren, 30 saniyelik hizmet çalışanı etkinlik penceresinde mesaj gönderip alarak WebSocket bağlantısı olan bir hizmet çalışanını etkin tutabilirsiniz. Bu işlemler sunucunuzdan veya uzantınızdan başlatılabilir. Aşağıdaki örnekte, Service Worker'ı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 WebSocket'leri destekleyen Chrome sürümlerinde çalıştığından emin olmamız gerekir:

manifest.json:

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

Ardından, 20 saniyede bir keepalive mesajı göndererek hizmet çalışanını etkin tutabiliriz. Hizmet çalışanı WebSocket'e bağlandığında Keepalive başlatılır. Aşağıdaki örnek WebSocket istemcisi, onopen etkinliği tetiklendiğinde iletileri günlüğe kaydeder ve keepAlive() öğesini çağırır:

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