실시간 알림 - 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를 선택한 이유

Websoket으로도 실시간 알림을 구현할 수 있다. 사실 Websoket을 사용해서 실시간 알림을 구현하는 방법이 더 편했을 수 도 있다.

왜냐하면 SSE는 클라이언트와 서버가 연결하기위해 HTTP 통신을하고 해당 HTTP 연결이 끊길 때 통신을 유지한다했다.

 

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

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

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

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

 

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

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

그리고 이 양방향 통신 때문에 websoket은 리소스 사용량이 큰편인데,

그 이유는 websockets는 지속적인 연결 상태를 유지하기 위해 더 많은 리소스를 필요로 하며, 그에 따라 서버 부하가 커질 수 있기 때문이다.

 

그래서 실시간 알림 같이 양방향 연결이 필요없는 경우에 굳이 리소스 낭비로 websoket을 사용하는 것 보다 SSE를 사용하는 것이 더 적합하다고 판단해 SSE로 실시간 알림을 구현하게 되었다.

 

알림 기능 구현 포스팅 링크

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

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