Skip to content

HTTP와 WebSocket을 사용한 하이브리드 통신

이지호 edited this page Jan 9, 2025 · 5 revisions

📄 HTTP와 WebSocket을 사용한 하이브리드 통신

  • HTTP와 WebSocket을 하이브리드한 통신 방법 사용 배경을 설명합니다.
  • 하이브리드 통신 방법을 사용함으로서 얻은 성과에 대해 설명합니다.

🧩 배경 및 필요성

실시간 서비스의 필요성과 구현

ASK-IT 서비스는 실시간성이 핵심인 서비스로, 다음과 같은 요구사항을 만족해야 합니다:

실시간 데이터 반영

  • 질문과 답변의 생성, 수정, 삭제 작업이 즉시 다른 사용자의 화면에 반영되어야 합니다.
  • '좋아요' 상태 반영: 특정 사용자가 '좋아요'를 누를 경우, 다른 사용자 화면에서도 실시간으로 변경사항이 표시되어야 합니다.

실시간 채팅 기능

  • 세션에 참여 중인 사용자들 간의 원활한 의사소통을 위해 실시간 채팅이 가능해야 합니다.

이러한 실시간성을 구현하기 위해 WebSocket 기술을 사용합니다.

Websocket서버의 위험 부담 줄이기

모든 기능을 웹소켓에만 의존하지 않고 HTTP 요청을 일부 병행함으로써 실패에 대한 처리를 훨씬 용이하게 만들 수 있습니다. 예를 들어, 일반적인 데이터 CRUD 작업을 HTTP 방식으로 수행하면, 요청 단위로 성공·실패를 명확히 확인할 수 있습니다. 웹소켓 연결이 잠시 끊기더라도 HTTP 요청은 별개로 수행 가능하므로, 실시간 기능 일부가 제한되더라도 전체 서비스가 중단되지 않습니다.

이처럼 ‘CRUD 작업 → HTTP, 실시간 브로드캐스트 → WebSocket’ 이라는 하이브리드 방식을 통해 다음과 같은 이점을 얻을 수 있습니다:

1. 실패 시 대응이 용이

  • HTTP 요청은 요청 단위로 성공·실패를 명확히 구분할 수 있고, 클라이언트 측에서도 일반적인 HTTP 에러 처리 로직을 적용할 수 있습니다.
  • 웹소켓 연결이 일시적으로 끊기더라도, 중요한 CRUD 작업에는 지장을 주지 않으므로 서비스 전체가 중단되는 사태를 방지할 수 있습니다.

2. 높은 안정성과 확장성 확보

  • 서비스 장애나 트래픽 폭주 상황에서도 HTTP와 WebSocket이 상호 보완적으로 작동하므로, 한쪽 프로토콜 장애가 전체 서비스로 전이되는 위험이 줄어듭니다.
  • 필요 시 특정 기능만 새로 추가하거나 다른 프로토콜로 대체하기도 용이합니다.

🔍 기술적 분석 및 비교

구분 Polling SSE WebSocket
통신 방식 주기적으로 클라이언트가 서버에 요청 서버 → 클라이언트 단방향 통신 서버 ↔ 클라이언트 양방향 통신
장점 HTTP 프로토콜을 통해 구현 가능하며 간단 - HTTP 프로토콜을 사용해 구현 가능
- 자동 재연결
- 높은 실시간성
- 양방향 통신
- 한번의 연결로 데이터를 계속 주고 받을 수 있음
단점 - 불필요한 리소스 및 트래픽 소모
- 실시간성의 부족
- 단방향 통신의 한계
- 고정적인 연결 유지비용 발생
- 고정적인 클라이언트 서버 간 연결 비용 발생
- Websocket 프로토콜을 사용해야함
사용 사례 실시간성이 낮은 데이터의 갱신 주식 가격 갱신 등의 단순한 단방향 실시간 알림 채팅

🗺️ 문제 해결 과정

0. 하이브리드 통신 설계

image

1. createEventBroadCaster 함수 정의

특정 세션에 연결된 클라이언트들에게 이벤트를 전송하는 함수를 만듭니다. 이때 함수를 호출한 클라이언트에게는 알림을 보내지 않습니다.

private createEventBroadcaster(event: string) {
    return (sessionId: string, token: string, content: Record<any, any>) => {
      const client = this.tokenToSocketMap.get(token);
      if (client) {
        client.socket.broadcast.to(sessionId).emit(event, content);
      }
    };
  }

2. 이벤트 발생 함수 생성

다른 클라이언트에게 이벤트를 전송하는 함수를 각 기능마다 생성합니다.

broadcastNewQuestion = this.createEventBroadcaster(SOCKET_EVENTS.QUESTION_CREATED);

3. 이벤트 발생시키기

특정 컨트롤러에서 호출하여 이벤트를 발생시킵니다.

const result = { question: updatedQuestion };
this.socketGateway.broadcastQuestionUpdate(sessionId, token, result);
return result;

📈 결과 및 성과

HTTP를 통해 데이터의 CRUD 작업을 수행하고, WebSocket을 통해 변경된 데이터만을 다른 클라이언트들에게 전달합니다.

이를 통해 다음과 같은 성과를 얻을 수 있습니다.

  1. 특정 사용자가 데이터를 업데이트하면, 해당 업데이트 사항이 다른 클라이언트들에게 실시간으로 전달됩니다.
  2. 웹소켓과 HTTP 서버의 부하를 모두 줄이며 효율적으로 통신할 수 있습니다.
Clone this wiki locally