SSE(Server-Sent Events) 알아보기🔎

SSE (Server-Sent Events)란?

SSE(Server-Sent Events) HTTP 기반으로 서버가 클라이언트에게 데이터를 실시간으로 전송하는 단방향 통신 기술입니다

보통 클라이언트가 새로운 데이터를 받기 위해 서버로 데이터를 요청하지만, SSE를 사용하면 클라이언트의 요청이 없이도 서버가 새로운 데이터를 전송하는 것이 가능합니다. 이렇게 전달된 데이터는 웹페이지 내에서 Event 데이터로 처리할 수 있습니다.

SSE와 유사한 실시간 데이터 전송 기술로는 WebSocket, Polling, HTTP Streaming 등이 자주 언급됩니다.
각 기술은 데이터를 전달하는 방식과 연결 유지 방식에서 차이를 보이며, 사용 목적과 상황에 따라 적합한 선택이 달라집니다.

이를 이해하기 위해, 각 기술의 특징을 간단히 살펴보겠습니다.

WebScoket

단방향 통신을 제공하는 SSE와는 다르게 WebSocket은 양방향 통신을 제공합니다.

초기 HTTP 요청을 통해 연결을 수립한 후, 별도의 요청이 없더라도 양쪽에서 자유롭게 데이터를 주고받을 수 있습니다.

때문에 채팅, 게임 등 실시간 양방향 통신이 필요한 경우에 주로 사용됩니다. 다만, 별도의 프로토콜을 사용하고 연결 및 상태를 직접 관리해야 하기 때문에 SSE와 비교했을 때 구현 복잡도가 높은 편입니다.

Polliing

Polling은 클라이언트가 일정한 주기로 서버에 요청을 보내 새로운 데이터가 있는지 확인하는 방식입니다.

구현이 단순하지만, 데이터 변경이 없더라도 지속적으로 요청을 보내야 하기 때문에 비효율적으로 작용할 수 있습니다.

특히 요청 간격이 짧을수록 서버 부하가 증가하고, 반대로 요청 간격이 길어지면 실시간성이 떨어지는 문제가 있습니다. 이러한 문제점을 보완하기 위해 SSE와 같은 서버 푸시 기반의 통신 방식이 등장하게 되었습니다.

HTTP Streaming

HTTP Streaming은 하나의 HTTP 연결을 유지한 상태에서 서버가 데이터를 연속적으로 전송하는 방식입니다. 클라이언트는 연결을 끊지 않고 스트림 형태로 데이터를 계속 수신할 수 있습니다.

SSE는 HTTP Streaming을 기반으로 이벤트 형식을 정의하여 표준화된 방식으로 데이터를 처리할 수 있도록 만든 기술이라고 볼 수 있습니다.

---

동작 방식

SSE는 클라이언트가 한 번 연결을 맺으면, 서버가 해당 연결을 유지하면서 지속적으로 데이터를 전송하는 방식으로 동작합니다. 연결이 끊어지면 클라이언트가 자동으로 재연결을 시도하여 연결을 지속적으로 유지합니다.

1. 연결 요청

SSE 연결을 하기 위해서 먼저 클라이언트가 서버로 연결 요청을 보냅니다.
클라이언트는 EventSource 객체를 사용하여 이벤트를 생성하는 서버에 연결 요청을 보냅니다.

const eventSource = new EventSource('/events');

2. 서버의 스트림 응답

클라이언트에서 연결 요청이 오면 서버는 다음과 같은 응답 헤더를 생성합니다.

Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive

3. 이벤트 데이터 전송

이벤트가 발생하면 서버는 data: Hello!형식으로 데이터를 전송하며, 다음과 같이 이벤트 이름을 포함할 수도 있습니다.

event: message
data: Hello! // -> 실제 데이터

각 메시지는 빈 줄 \n\n 로 구분합니다.

4. 클라이언트의 이벤트 수신 및 처리

서버에서 이벤트가 전송되면 클라이언트는 해당 이벤트를 받아 처리합니다.

eventSource.onmessage = (event) => {
		console.log(event.data);
}

event 필드를 갖는 서버의 메시지는 event 에 명시된 이름의 이벤트로 수신됩니다. (3번 과정의 이벤트 이름을 포함한 형식 참고)

eventSource.addEventListener('message', (event) => {
    console.log(event.data);
  });

5. 연결 유지

SSE는 연결을 계속 유지하기 때문에, 서버는 이벤트가 발생할 때마다 해당 데이터를 계속 보낼 수 있습니다.

다만, 아무 데이터도 없을 때 연결이 끊길 수 있습니다. 때문에 연결이 유지되도록 주기적으로 무의미한 데이터(beat)를 보냅니다. 이를 기술을 Heartbeat라고 칭합니다.

6. 자동 재연결

연결이 끊어지면 브라우저가 자동으로 재연결을 시동합니다.

retry: 3000

👉 3초 후 재연결을 의미

7. 이벤트 스트림 닫기

6번에서 이야기했듯이 클라이언트와 서버는 연결이 끊어지면 연결이 다시 시작됩니다. 연결을 끊기 위해서는 .close() 메서드로 종료할 수 있습니다.

eventSource.close();

에러 핸들링

서버 연결이 끊기거나, 네트워크 문제, 잘못된 데이터 포맷 등 정상적으로 이벤트를 받을 수 없는 상황에서 에러 이벤트가 생성됩니다. EventSource 객체에 onerror 콜백을 구현하여 에러를 처리할 수 있습니다.

eventSource.onerror = (error) => {
		alert("SSE 연결 오류 발생");
		console.log('SSE 연결 오류: ', err);
}

---

이렇게 SSE의 개념과 동작 방식에 대해 알아보았습니다. 다음 포스팅에서는 React, SpringBoot로 SSE를 직접 구현하여 실시간 알림 기능을 구현해보도록 하겠습니😊