이 가이드에서는 Chrome 확장 프로그램의 서비스 워커에서 WebSocket에 연결하는 방법을 보여줍니다. GitHub에서 작동하는 예시를 확인할 수 있습니다.
배경
Chrome 116부터 확장 프로그램 서비스 워커의 WebSockets 지원이 향상됩니다. 이전에는 WebSocket 연결이 활성 상태여도 30초 동안 다른 확장 이벤트가 발생하지 않으면 서비스 워커가 비활성화될 수 있었습니다. 그러면 서비스 워커가 종료되고 WebSocket 연결이 종료됩니다. 확장 프로그램 서비스 워커 수명 주기에 대한 자세한 내용은 확장 프로그램 서비스 워커 가이드를 참고하세요.
Chrome 116부터 30초의 서비스 워커 활동 창 내에 메시지를 교환하여 WebSocket 연결이 활성 상태인 서비스 워커를 유지할 수 있습니다. 서버 또는 확장 프로그램에서 시작할 수 있습니다. 다음 예에서는 서비스 워커가 활성 상태로 유지되도록 Chrome 확장 프로그램에서 서버로 일반 메시지를 전송합니다.
예: WebSocket 연결 유지
먼저 매니페스트에서 최소 Chrome 버전을 116으로 설정하여 확장 프로그램이 서비스 워커에서 WebSockets를 지원하는 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() 내부에서 setInterval(...)를 사용하여, 활성 WebSocket 연결이 있는 동안 정기적으로 서버에 핑을 전송합니다.
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 ); }