SSE vs Socket.io

📚 SSE

SSE란?

클라이언트의 별도 요청 없이 서버에서 업데이트를 스트리밍

장점

HTTP 통신으로, 구현이 쉬움

네트워크 연결이 끊겼을 때 자동으로 재연결 시도

실시간으로 클라이언트에게 데이터 전송 가능

단점

단방향 통신

한번 보내면 취소가 불가능

클라이언트가 페이지를 닫아도 서버에서 감지하기 어려움

HTTP2를 사용하지 않을 경우에 탭 제한을 걸고 있음

• 6개 이상 열리면 안될 수도 있고, 크롬 등에서 고치지 않을 것이라 함
• HTTP2로 하면 100개 이상 허용

선택한 이유

현재 작성한 코드는 양방향 통신이 필요 없는 상황

보낸 내용을 취소할 이유가 없음

🖥️ 작성 코드

@ApiTags('주식현재가 체결 조회 API')
@Controller('/api/stocks/trade-history')
export class StockTradeHistoryController {
  constructor(
    private readonly stockTradeHistoryService: StockTradeHistoryService,
    private readonly stockTradeHistorySocketService: StockTradeHistorySocketService,
  ) {}

  // API 코드

  @Sse(':stockCode/today-sse')
  @ApiOperation({ summary: '단일 주식 종목에 대한 실시간 체결 데이터 스트림' })
  @ApiParam({
    name: 'stockCode',
    required: true,
    description:
      '종목 코드\n\n' +
      '(ex) 005930 삼성전자 / 005380 현대차 / 001500 현대차증권',
  })
  @ApiResponse({
    status: 200,
    description:
      '단일 주식 종목에 대한 주식현재가 체결값 실시간 데이터 조회 성공',
    type: TodayStockTradeHistoryDataDto,
  })
  streamTradeHistory(@Param('stockCode') stockCode: string) {
    this.stockTradeHistorySocketService.subscribeByCode(stockCode);

    return new Observable<SseEvent>((subscriber) => {
      const subscription = this.stockTradeHistorySocketService
        .getTradeDataStream()
        .subscribe(subscriber);

      return () => {
        this.stockTradeHistorySocketService.unsubscribeByCode(stockCode);
        subscription.unsubscribe();
      };
    });
  }
}

---

📚 Socket.io로 재변경

다시 Websocket으로 변경한 이유?

1. SSE의 제약사항
   1. HTTP/1.1 크롬 브라우저 기준으로는 최대 연결 수가 6개
   2. HTTP/2 크롬 브라우저 기준으로는 기본 100개 사용 가능 - 100개 이상으로 사용하고 싶다면 추가 설정 필요
   3. Nginx에 SSE와 관련된 추가 설정 필요
   4. Websocket의 이벤트 이름과 같이 필터링할 수단이 없어 직접 필터링을 해야 함
2. WebSocket
   1. SSE와 같이 별도의 연결 제한이 없음
   2. 이벤트 이름으로 필터링이 가능해 추가적인 필터링이 필요없음

위와 같은 이유와 기존 코드들이 socket.io로 작성되었던 점을 고려해 다시 socket.io를 사용하기로 함

👓 참고 자료

SSE (Server-Sent-Events) 란?

nestjs 로 sse 연결하기 (feat. 여러개의 브라우저)

웹소켓 과 SSE(Server-Sent-Event) 차이점 알아보고 사용해보기