쉐어드 워커(Shared Worker)를 활용하여 여러 웹소켓 통합하기

쉐어드 워커(Shared Worker)를 활용하여 여러 웹소켓 통합하기

웹 애플리케이션에서 여러 탭이나 창에서 동일한 데이터 소스를 사용해야 하는 경우가 종종 있습니다. 이러한 상황에서 쉐어드 워커(Shared Worker)를 활용하면 효율적으로 데이터를 관리하고, 리소스를 절약하며, 일관된 사용자 경험을 제공할 수 있습니다. 특히, 웹소켓(WebSocket)을 사용할 때 쉐어드 워커를 이용하면 여러 탭에서 동일한 웹소켓 연결을 공유할 수 있어 중복 연결을 방지하고 네트워크 효율성을 극대화할 수 있습니다.

---

1. 쉐어드 워커란?

쉐어드 워커는 브라우저 내에서 여러 탭, 창, iframe 등이 공유할 수 있는 스크립트 컨텍스트입니다. 이를 통해 동일한 출처(origin)에서 실행 중인 여러 클라이언트 간에 데이터와 상태를 공유할 수 있습니다.

주요 특징

• 여러 브라우저 컨텍스트에서 공유 가능
• 메시지 기반 통신(postMessage 사용)
• 백그라운드에서 지속적으로 실행 가능

사용 사례

• 실시간 데이터 업데이트 (예: 주식 시세, 채팅 메시지)
• 공유 리소스 관리 (예: API 호출 제한)
• 브라우저 내 데이터 동기화

---

2. 웹소켓과 쉐어드 워커의 조합

웹소켓은 서버와의 양방향 실시간 통신을 가능하게 합니다. 일반적으로 웹소켓 연결은 각 탭마다 별도로 생성되지만, 쉐어드 워커를 활용하면 하나의 웹소켓 연결을 여러 탭에서 공유할 수 있습니다.

장점

• 네트워크 트래픽 감소: 중복 웹소켓 연결 방지
• 리소스 절약: 서버와의 연결 수 최소화
• 데이터 일관성: 모든 탭에서 동일한 데이터를 실시간으로 공유

---

3. 쉐어드 워커와 웹소켓 구현 방법

다음은 쉐어드 워커를 이용해 여러 탭에서 웹소켓 연결을 공유하는 예제입니다.

1) Shared Worker 파일 (shared-worker.js)

let connections = [];
let websocket = null;

// 웹소켓 연결 초기화
function initializeWebSocket() {
    websocket = new WebSocket('wss://example.com/socket');

    websocket.onopen = () => {
        console.log('WebSocket 연결이 열렸습니다.');
    };

    websocket.onmessage = (event) => {
        // 모든 연결된 클라이언트에 메시지 브로드캐스트
        connections.forEach(port => port.postMessage(event.data));
    };

    websocket.onclose = () => {
        console.log('WebSocket 연결이 닫혔습니다.');
        // 재연결 로직 구현 가능
    };

    websocket.onerror = (error) => {
        console.error('WebSocket 오류:', error);
    };
}

// 워커 초기화 시 웹소켓 설정
initializeWebSocket();

// 클라이언트 연결 관리
onconnect = (event) => {
    const port = event.ports[0];
    connections.push(port);

    port.onmessage = (message) => {
        // 클라이언트에서 보낸 메시지를 서버로 전달
        if (websocket && websocket.readyState === WebSocket.OPEN) {
            websocket.send(message.data);
        }
    };

    port.onclose = () => {
        connections = connections.filter(conn => conn !== port);
    };
};

2) 메인 스크립트 파일 (main.js)

// 쉐어드 워커 연결
const worker = new SharedWorker('shared-worker.js');

worker.port.onmessage = (event) => {
    console.log('서버로부터 메시지:', event.data);
};

// 서버로 메시지 전송
function sendMessageToServer(message) {
    worker.port.postMessage(message);
}

// 포트 활성화
worker.port.start();

// 예제 메시지 전송
sendMessageToServer('안녕하세요, 서버!');

---

4. 구현 시 주의사항

1. 브라우저 호환성:
   • 쉐어드 워커는 모든 최신 브라우저에서 지원하지 않을 수 있습니다. 프로젝트의 대상 브라우저를 확인하세요.
2. 에러 처리:
   • 웹소켓 연결 오류 및 재연결 로직을 구현하여 안정성을 높이세요.
3. 보안:
   • WebSocket을 사용할 때 반드시 HTTPS와 함께 WSS(WebSocket Secure)를 사용하여 데이터를 암호화하세요.
4. 리소스 관리:
   • 연결된 포트가 닫힐 때 적절히 정리하여 메모리 누수를 방지하세요.

---

5. 결론

쉐어드 워커를 활용하여 웹소켓 연결을 통합하면 여러 탭에서 일관된 실시간 데이터를 제공하면서 네트워크 및 리소스를 효율적으로 사용할 수 있습니다. 이는 실시간 애플리케이션(예: 채팅, 알림 시스템, 실시간 데이터 대시보드 등)에서 특히 유용합니다.

효율적인 웹 애플리케이션을 구축하기 위해 쉐어드 워커와 웹소켓의 조합을 적극 활용해 보세요!