[TIL]240426 SSE(Server-Sent-Events)

SSE(Server-Sent-Events)

• SSE(Server-Sent-Events)는 웹 애플리케이션에서 실시간 업데이트를 제공하는데 사용되는 웹 기술 중 하나이다. (서버로부터 데이터를 비동기적으로 전송받을 수 있는 기술 중 하나이다.)

→ SSE는 단방향 통신아며 클라이언트의 별도 추가 요청 없이 서버에서 업데이트를 스트리밍할 수 있다는 특징이 있다.

• Spring 에서는 Spring MVC에서 사용되는 SseEmitter 클래스를 제공하여 손쉽게 SSE 스트림을 생성하고 클라이언트에게 이벤트를 푸쉬할 수 있도록 한다.

→ 이를 통해 클라이언트가 연결을 유지하면서 서버로부터 데이터를 지속적으로 수신할 수 있도록 한다.

SSE(Server-Sent-Events) 장점과 단점

장점

1. HTTP를 통해 통신하므로 다른 프로토콜은 필요 없으며, 구현이 굉장히 쉽다.
2. 네트워크 연결이 끊겼을 때 자동으로 재연결을 시도한다.
3. 실시간으로 서버에서 클라이언트로 데이터를 전송할 수 있다. 폴링 같은 경우는 실시간이라고 보기 어려운 점이 있는데, SSE는 이러한 한계를 극복한다.

단점

1. GET 메소드만 지원하고, 파라미터를 보내는데 한계가 있다.
2. 단방향 통신이며, 한 번 보내면 취소가 불가능하다.
3. 클라이언트가 페이지를 닫아도 서버에서 감지하기가 어렵다.
4. SSE는 지속적인 연결을 유지해야 하므로, 많은 클라이언트가 동시에 연결을 유지할 경우 서버 부담이 커질 수 있다.

SSE(Server-Sent-Events) 흐름

Client -> Server 연결 요청

• 프론트에서 이벤트소스 객체를 생성하면서 서버의 특정 URL로 HTTP GET 요청을 보내 연결 요청을 시작한다.
• 백엔드는 요청을 받고 서버와 클라이언트간에 단방향 통신을 가능하게 해주는 SseEmitter 객체를 만들어 반환한다.

Server -> Client 이벤트 생성 및 전송

• 개발자가 설정해놓은 특정 상황에 맞춰 알림 데이터를 생성하고, 자신을 구독하고 있는 클라이언트에게 비동기적으로 데이터를 전송한다.

+ Emitter란?

• SSE에서 Emitter는 서버 측에서 클라이언트로 이벤트를 전송하는 역할을 하는 객체 또는 컴포넌트를 말한다.
• Emitter는 서버가 클라이언트에게 실시간으로 데이터를 emit(방출) 할 수 있게 해주며, 이를 통해 실시간 통신이 가능해진다.

웹소켓과 SSE(Server-Sent-Event)에 차이점

	Socket(웹소켓)	Server-Sent-Event(SSE)
통신 방향	양방향	단방향(서버에서 클라이언트로)
리얼타임	Y	Y
자동 재접속	N	Y(3초마다 제시도)
최대 동시 접속 수	브라우저 연결 한도는 없지만 서버 셋업에 따라 다름	HTTP를 통해서 할 때는 브라우저당 6개 까지 가능 / HTTP2로는 100개가 기본
프로토콜	websocket	HTTP
베터리 소모량	큼	작음

• Socket과 SSE에 가장 큰 차이점을 하나 말해보라고 한다면 Socket은 양방향(bidirectional)으로 데이터를 주고 받을 수 있지만 SSE(Server-Sent-Event)를 사용하게 되면 클라이언트는 데이터를 받을 수만(mono-directional) 있다.

 

참고 자료

- https://velog.io/@yuna706/SSE-%ED%86%B5%EC%8B%A0webSocket%EA%B3%BC-%EB%B9%84%EA%B5%90

- https://surviveasdev.tistory.com/entry/%EC%9B%B9%EC%86%8C%EC%BC%93-%EA%B3%BC-SSEServer-Sent-Event-%EC%B0%A8%EC%9D%B4%EC%A0%90-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B3%A0-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0

- https://braindisk.tistory.com/136

- https://velog.io/@baekgom/SSE-Server-Sent-Event-%EC%95%8C%EB%A6%BC-%EA%B8%B0%EB%8A%A5

•