✏️ 서버로부터 이벤트를 수신한다?

서버가 클라이언트로 데이터를 실시간으로 푸시(push)한다는 뜻이다.

📌 일반적인 요청-응답 모델과의 차이

• 일반적인 요청-응답

  • 클라이언트: ‘서버야, 데이터를 줘!’
  • 서버: ‘여기 있어’

  → 일반적인 요청과 응답 방식에서는 클라이언트가 계속 요청해야 새로운 데이터를 얻을 수 있다.

• 이벤트 기반 통신(SSE)

  • 클라이언트: ‘서버야, 새로운 데이터가 생기면 바로 알려줘!’
  • 서버: ‘알겠어, 데이터가 새로 생기면 바로 보내줄게’

  → 이벤트 기반 통신 방식에서는 서버가 새로운 데이터(이벤트)가 생길 때마다 클라이언트에게 직접 알린다.

  클라이언트가 요청을 반복하지 않아도 된다.

📌 서버 - 클라이언트 데이터 흐름

1. 클라이언트에서 SSE 연결 생성

   • 클라이언트가 서버에 연결 요청을 보낸다.
   • 이 요청은 “GET” 요청이며, 서버는 이를 유지한다.(연결이 닫히지 않음)

2. 서버가 데이터를 전송(이벤트 발생)

   • 서버는 특정 이벤트(ex: 새로운 메세지, 상태 업데이트 등)가 발생할 때, 연결된 클라이언트로 데이터를 보낸다.
   • 이벤트의 데이터는 아래와 같은 형식으로 전송된다.

   event: message
   data: Hello, this is a message!
   

3. 클라이언트에서 이벤트 처리

   • 클라이언트는 서버에서 보낸 데이터를 EventSource 객체의 핸들러에서 처리한다.

   eventSource.onmessage = (event) => {
   	console.log('Received data:', event.data);
   };