Service Worker'larda WebSockets kullan

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

Arka plan

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

Chrome 116'dan itibaren, 30 saniyelik hizmet çalışanı etkinlik penceresinde mesaj alışverişi yaparak WebSocket bağlantısı olan bir hizmet çalışanını etkin tutabilirsiniz. Bunlar sunucunuzdan veya uzantınızdan başlatılabilir. Aşağıdaki örnekte, hizmet çalışanının etkin kalmasını sağlamak için Chrome uzantısından sunucuya normal bir mesaj gönderiyoruz.

Ö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, her 20 saniyede bir canlı tutma mesajı göndererek hizmet çalışanını etkin tutabiliriz. WebSocket'e bağlanan hizmet çalışanı, canlı tutma işlemini başlatır. Aşağıdaki örnek WebSocket istemcisi, onopen etkinliği tetiklendiğinde mesajları günlüğe kaydeder ve keepAlive() işlevini ç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(...) kullanılır:

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