[Web] 실시간 알림 구현 - SSE(Server Sent Event), Websoket 차이점 정리

판매자가 회원의 리뷰에 답글을 달면 위와같이 알림 메세지를 보내는 기능이 필요했다.

현재는 답글을 달 경우 "어드민 서버"에서 Kakfa로 메세지를 보내고,  "회원 서버"에서는 해당 topic을 구독하는 회원들에게 전달 받은 메세지를 SSE로 프론트에 뿌려주도록 구현했다.

SSE로 메세지를 수신했을 경우 "빨간불" 이 나오도록 했다.

DB에 저장하는 것 만으로 알림은 충분히 구현이 가능하다.

다만 위 처럼 서버에 요청을 보내지 않으면 알림을 표시할 수 없다. (실시간으로 알림을 보내줄순 없다.)

 

실시간 알림을 구현하는 경우 대표적으로 SSE, Websoket, Polling 3가지가 있다.

 

이번 포스팅에서는 자주 사용되는 SSE와 Websoket에 대한 차이점에 대해 이야기하고, SSE를 사용해 해당 실시간 알림을 구현한 이유에 대해 설명하고자 한다.

---

SSE vs Websoket

SSE (Server Send Event)

클라이언트가 서버로 HTTP 연결 요청을 보내면 해당 HTTP  연결이 끝날 때 까지

서버가 클라이언트에게 단방향으로 이벤트를 보내주는 방법이다. (클라이언트는 Only Read)

 

주기적으로 HTTP 요청을 보낼 필요가 없기 때문에 효율적으로 단방향 통신이 가능하고

주로 일반적인 데이터 전송이 필요한 주식 가격 업데이트, 실시간 알림 메시지에 사용한다.

 

 

 

Websoket

 

실시간 양방향 통신을 위한 기술로 양방향 통신으로 연결이 이루어지면 클라이언트가 요청하지 않아도 서버의 데이터를 받을 수 가 있다.

즉 한번 연결이 이뤄지면 HTTP처럼 별도의 요청을 보내지 않아도 클라이언트와 서버가 서로 원할 때 데이터를 송수신할 수 있는 것이다.

 

클라이언트와 서버의 연결은 HTTP 요청으로 이뤄지고, HandShake 연결까지 정상적으로 이뤄진다면 웹소켓 프로토콜로 변경 되고 이 웹소켓 프로토콜에서 데이터를 주고 받게 된다.

 

주로 양방향으로 통신이 필요한 채팅, 게임 등에 사용된다.

 

 

SSE vs Websoket 비교 표

	Websocket	Server-Sent-Event
브라우저 지원	대부분 브라우저에서 지원	대부분 모던 브라우저 지원(polyfills 가능)
통신 방향	양방향	일방향(서버 -> 클라이언트)
실시간	O	O
데이터 형태	Binary, UTF-8	UTF-8
자동 재접속	X	O (3초마다 재시도)
최대 동시 접속 수	브라우저 연결 한도는 없지만 서버 셋업에 따라 다르다.	HTTP를 통해서 할 때는 브라우저당 6개 까지 가능 HTTP2로는 100개가 기본
프로토콜	websocket	HTTP
리소스 사용량	큼	작음
Firewall 친화적	X	O

---

실시간 알림 구현에 SSE를 선택한 이유

보통 프론트 개발자들은 React, Vue, Angler 같은 SPA(단일 페이지) 프레임워크를 사용해서 문제 될 것 없겠지만,

나는 MPA(멀티 페이지)를 사용해서 다른 페이지로 이동할 때마다 HTTP 연결이 끊기기 때문에 다시 연결이 필요했다.

바로 이 부분 때문에 SSE로 실시간 알림을 구현하면서 가장 복잡했었지만

결국 각 페이지 로드마다 SSE 연결 요청을 보내도록 하고, 3분 주기로 HearBeat를 보내 사용되지 않는 SSE 연결을 제거하는 방법으로 구현했다.

 

그럼에도 불구하고 내가 SSE를 선택한 이유는 아래와 같다.

실시간 알림같은 경우는 양방향 통신이 필요없고 일방적으로 서버에서 클라이언트에게 데이터를 보내주기만 된다.

이러한 점에서 양방향 통신까지는 필요가 없었다.

 

WebSocket은 HTTP에서 WebSocket 전용 프로토콜로 전환하는 추가적인 과정이 필요하다.

반면 SSE는 HTTP만 사용한 통신으로 초기 연결이 빠르다. (이 속도 차이가 얼마나 유의미할지는 모르겠다.)

또한 SSE는 Last-Event-ID 헤더를 통해 마지막 이벤트를  추적 가능하지만 WebSocket은 디버깅이 힘들다는 점이 문제라고 알고 있다.

(직접 WebSocket을 구현해보진 않아서 경험하게 된다면 추가로 포스팅해볼 예정) 

 

위와 같은 이유로 실시간 알림 같이 양방향 연결이 필요없는 경우에는 SSE를 사용하는 것이 더 적합하다고 판단해

SSE로 실시간 알림을 구현하게 되었다.

 

알림 기능 구현 포스팅 링크

해당 알림 기능 구현에 대한 설명은 아래 포스팅에서 설명한다.

[Spring] kafka와 SSE(Server Send Event)를 사용한 실시간 알림 전송 방법