서비스 워커에서 WebSocket 사용

이 가이드에서는 Chrome 확장 프로그램의 서비스 워커에서 WebSocket에 연결하는 방법을 보여줍니다. GitHub에서 실제로 작동하는 예시를 찾을 수 있습니다.

배경

Chrome 116부터 확장 프로그램 서비스 워커의 WebSockets 지원이 향상됩니다. 이전에는 30초 동안 다른 확장 이벤트가 발생하지 않으면 WebSocket 연결이 활성화되더라도 서비스 워커가 비활성화될 수 있었습니다. 이렇게 하면 서비스 워커가 종료되고 WebSocket 연결이 닫힙니다. 확장 프로그램 서비스 워커 수명 주기에 대한 자세한 내용은 확장 프로그램 서비스 워커 가이드를 참고하세요.

Chrome 116부터 30초 서비스 워커 활동 창 내에 메시지를 교환하여 WebSocket 연결이 있는 서비스 워커를 활성 상태로 유지할 수 있습니다. 서버 또는 확장 프로그램에서 시작할 수 있습니다. 다음 예에서는 서비스 워커가 활성 상태를 유지하도록 Chrome 확장 프로그램에서 서버로 일반 메시지를 전송합니다.

예: WebSocket 연결 유지

먼저 매니페스트에서 최소 Chrome 버전을 116으로 설정하여 확장 프로그램이 서비스 워커의 WebSocket을 지원하는 Chrome 버전에서만 실행되도록 해야 합니다.

manifest.json:

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

그런 다음 20초마다 연결 유지 메시지를 전송하여 서비스 워커를 활성 상태로 유지할 수 있습니다. 서비스 워커가 WebSocket에 연결되면 연결 유지가 시작됩니다. 다음 샘플 WebSocket 클라이언트는 onopen 이벤트가 트리거될 때 메시지를 기록하고 keepAlive()를 호출합니다.

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() 내에서 활성 WebSocket 연결이 있을 때 setInterval(...)를 사용하여 정기적으로 서버에 핑을 전송합니다.

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