📮 SSE(Server Sent Events)

SSE란?

서버에서 클라이언트로 실시간 데이터를 전송하는 기술
서버에서 클라이언트로만 데이터를 전송할 수 있는 단방향 통신
HTTP 프로토콜 기반

SSE 사용 이유

방 생성 다이어그램

sequenceDiagram
    participant Client
    participant GameSocket
    participant SignalingSocket
    participant Store
    participant REST
    participant SSE

    %% useRoomsSSE 훅 실행
    Note over Client: useRoomsSSE 훅 마운트

    %% getRoomsQuery로 초기 데이터 로드
    Client->>REST: react-query getRoomsQuery() 실행
    REST-->>Client: initialRooms 데이터
    Client->>Store: setRooms(initialRooms)

    %% SSE 연결 설정
    Client->>SSE: new EventSource(ENV.SSE_URL)
    SSE-->>Client: onopen: 연결 성공

    Note over Client,SSE: SSE 이벤트 리스너 설정

    loop SSE 실시간 업데이트
        SSE->>Client: onmessage: rooms 데이터 스트림
        Note over Client: JSON.parse(event.data)
        Client->>Store: setRooms(rooms)
        Store-->>Client: UI 리렌더링
    end

    Note over Client,SSE: 에러 발생 시
    SSE->>Client: onerror: 에러 처리 및 연결 종료

    %% 방 생성 흐름
    Note over Client: 방 만들기 버튼 클릭
    Client->>Client: CreateDialog 오픈
    Note over Client: 방 제목/닉네임 입력

    par Socket Connections
        Client->>GameSocket: gameSocket.connect()
        GameSocket-->>Client: 연결 성공
        Client->>SignalingSocket: signaligSocket.connect()
        SignalingSocket-->>Client: 연결 성공
    end

    Client->>GameSocket: emit('createRoom', {roomName, hostNickname})
    GameSocket-->>Store: roomCreated 이벤트 (room 데이터)
    Store-->>Client: 상태 업데이트

    Client->>SignalingSocket: emit('joinRoom', room)
    SignalingSocket-->>Client: WebRTC 연결 설정


    Client->>SSE: eventSource.close()

Loading

1. 방 만들기 버튼 클릭 시, 방 제목과 닉네임을 설정할 수 있는 방 생성 Dialog가 오픈되고, 방 제목과 닉네임을 입력 후 확인 버튼을 클릭하면 Game Server Socket과 Signaling Server Socket에 연결하고, gameSocket의 createRoom 이벤트를 emit 하는 메서드를 호출, signaligSocket의 joinRoom 이벤트를 emit 하는 메서드를 호출합니다.
2. 클라이언트 측 렌더링에 필요한 데이터는 gameSocket을 통해서 받아와 Store에 저장 후 렌더링을 해주고 있습니다. 즉, createRoom에 대한 응답으로 게임방 데이터를 받아와서 방 목록 배열에 상태를 저장하고 방 목록 페이지에서 렌더링을 해줍니다.
3. 여기서 문제는 “방 생성”이라는 이벤트를 통해 소켓이 연결되고 있어, 방 목록 페이지에 처음 진입한 사용자의 경우 저장된 상태가 없고, 방 목록 페이지에서 새로고침을 한 사용자의 경우 상태가 초기화되어 방 목록이 보이지 않게 됩니다.
4. 우선 이 부분을 polling 방식으로 구현하게 되었습니다. polling 방식이란, 클라이언트가 서버 측에 주기적으로 API 요청을 하는 방식입니다. react-query를 처음 사용해 봐서 refetchInterval 옵션이 있는 줄 몰랐습니다. 그래서 setInterval로 주기를 설정해 refetch하여 리렌더링해 주는 방식으로 구현했습니다.
5. 이 방식의 문제점은 새로운 방이 생성되지 않더라도, 즉 변경 사항이 없는 경우에도 불필요한 API 요청이 계속 발생하여 서버에 부하를 줄 수 있다는 것입니다. 또한, 엄격하게 Interval 시간만큼 지연이 발생하여 실시간으로 반영되는 것이 아니기 때문에 사용자 경험에도 좋지 않다고 생각하여 SSE를 사용하기로 했습니다.

SSE를 사용하면 REST API는 필요없을까?🤔

저희 팀에서는 처음에 SSE를 사용하면 REST API 요청은 쓸 일이 없을 것 같다고 생각했습니다.

그래서 SSE로만 처리하게 되었는데, 클라이언트 쪽에서 SSE 연동 후 테스트를 해 보는 과정에서 잘못된 생각이었다는 것을 알게 되었습니다.

SSE도 서버에 발생하는 새로운 이벤트(변경 사항)를 받아 데이터를 전달해 주는 방식이기 때문에, 페이지를 처음 로드하거나 새로고침 할 때의 초기 데이터의 경우 REST API를 사용해 받아와야 합니다. 초기 데이터를 받아 온 이후에 발생하는 변경 사항은 SSE를 사용해 실시간으로 반영하는 방식으로 변경했습니다.

SSE vs WebSocket

특성	SSE	WebSocket
연결 방식	HTTP 기반	독립적인 연결 (TCP)
전송 방향	서버 → 클라이언트 (단방향)	서버 ↔ 클라이언트 (양방향)
브라우저 지원	대부분 지원	일부 브라우저에서만 지원
보안성	HTTPS 사용 가능	HTTPS 사용 가능

SSE Client 사용 예시

// 서버 URL을 실제 URL로 변경하세요 (예: http://localhost:8000)
const serverUrl = 'http://localhost:8000/api/rooms';

const eventSource = new EventSource(serverUrl);

eventSource.onmessage = function (event) {
  console.log('New message:', event.data);
};

eventSource.onerror = function (error) {
  console.error('EventSource failed:', error);
};