[기술부채 해결하기] SSE(Server-Sent-Event)와 WebSocket

기술부채 해결하기

 

주제선정이유

사이드 프로젝트 CHIT을 개발하고 있습니다.

CHIT의 주요 핵심기능은 순번대기 기능인데요. 다들 티켓팅 해보셨나요? 티켓팅 화면에서 서버대기 화면 한번쯤 다들 보신적 있을텐데, 그거랑 비슷한 기능이라고 보시면 됩니다!

 

으악

 

이 기능을 구현하기 위해 SSE(Server-Side-Events) 를 사용하고 있습니다.

간단히 말하자면 SSE는 서버로부터만 이벤트를 받는 단방향 통신입니다. 채팅과 달리 서버로부터 일방적으로 메시지를 받기만 합니다.

 

사용하는 기술인 SSE를 제대로 알고싶었고 겸사겸사 WebSocket에 대해서도 알아보려합니다. (부채질중)

 

1.✅ 개념알아보기

1. SSE(Server-side-events) 란 무엇인가
   1. 보통 웹브라우저에선 웹이 request를 보내면 서버가 response를 보내는 방식이다.
   2. 하지만 SSE를 사용하면 최초의 연결을 제외하고는 서버는 언제든지 웹브라우저에게 데이터를 보낼 수 있다.
   3. 서버에서 일방적으로 데이터를 받는 단방향 통신이다. 브라우저는 서버로 데이터를 보낼 수 없다.
   4. SSE API는 EventSource 인터페이스를 사용한다.
   1. 웹소켓은 웹 API중 하나로 브라우저 <->  서버사이에서 양방향 통신이 가능하다.
   2. 우리는 서버로 메세지를 보낼 수 있고 굳이 요청하지 않아도 응답을 받을 수도있다.
   3. 웹소켓 api는 두가지 웹소켓 연결을 할 수 있는 방법이 있는데. 1. WebSocket이고 2. WebSocketStream이다
   4. WebSocket은 BackPressure를 지원하지 않지만 WebSocketStream은 지원한다고 한다. WebSocket이란 무엇인가.
   1. backPressure : 데이터가 너무 빨리 도착해서 시스템이 과부화되지 않도록 조절하는 기술
      1. 어플리케이션이 아직 준비가 되지 않았는데 메세지가 너무 빠르게 도착하면,
         디바이스의 메모리 버퍼가 가득차거나 cpu 사용량이 100%가 되어 제대로 응답을 받지 않을 수 있다.
      2. 이럴때 사용하는게 backPressure기술로 reading/writing 속도를 규제하는 기술이다. 이 기술을 이용하면 스트림이 너무 많고 준비가 안됐을때 시그널을 보내 속도를 늦추게 한다.
   2. 공부하는 중에 차세대 네트워크 통신 webAPI도 알게되었다. WebTransportAPI인데 스트리밍이나 메타버스 등에 이용된다고 한다. 아직 표준 API는 아니지만 차세대 표준이 되어 웹소켓을 대체할 가능성이 높다고한다! 기대중!

2.✅ SSE(Server-Sent-Events) 와 WebSocket의 차이점

구분	SSE(Server-Sent-Events)	웹소켓 (WebSocket)
방향	단방향 통신(서버만 보냄)	양방향 통신 (서버-웹브라우저)
프로토콜	HTTP(http://, https://)	WS(ws//) ,WSS(wss://)
주요 활용 예시	실시간 알림, 뉴스피드, 주식데이터, 라이브 스코어	실시간 채팅, 온라인게임

 

3. 이왕 이렇게 된 거 Socket에 대해서도 알아보자

1. 소켓 이란, 네트워크를 통해 데이터를 주고받을 때 사용하는 가상의 문이다.
2. 좀 더 전문적으로 소켓 컴퓨터 네크워크에서 데이터를 주고받기 위해 사용하는 endpoint이다.
3. 소켓을 연결하려면 양쪽이 같은 방식(프로토콜)을 따라야 한다. (규칙이 같아야 소통이 됩니다)
4. 주소(ip)와 포트(port)가, 통신 프로토콜(TCP/UDP), 전송하는 데이터 형식(XML, JSON)등이 맞아야한다.

어라? 그럼 웹소켓과 일반 소켓은 무슨 차이인거지?!

4. ✅ 웹소켓과 일반 소켓의 차이

구분	소켓 (TCP/UDP)	웹소켓 (WebSocket)
주로 사용되는 곳	네트워크 프로그래밍 (서버-클라이언트 통신)	웹 브라우저와 서버 간 실시간 통신
통신 방식	TCP/UDP 기반	HTTP를 통해 연결 후, 양방향 TCP 통신
주요 활용 예시	게임 서버, 파일 전송, 데이터 스트리밍	실시간 채팅, 주식 데이터, 알림 시스템

 

웹 환경에서 브라우저가 웹소켓을 쉽게 사용할 수 있도록 표준화 되어있다.

일반 소켓은 웹브라우저에서 사용할 수 없지만, 웹소켓은 HTTP와 호환되면서 TCP처럼 동작하기때문에 웹 브라우저에서 실시간 기능이 필요하면 웹소켓을 쓰는게 좋다.

 

5. 마무리하는 말🪭

사용하는 기술을 대략적으로 알고 있었는데 정리하니까 확실히 도움이 된다. SSE와 WebSocket에 대해 더 정확히 이해하게 된것 같다. 공부하면서 생기는 꼬리질문을 따라가다 보니 소켓과 프로토콜에 대해서도 공부하게 됐다.

CS지식의 중요성을 다시한 번 느낀다! 기술부채가 사라지는 그 날까지! 🪭

 

 

- Reference

https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events

Server-sent events - Web APIs | MDN

https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API

The WebSocket API (WebSockets) - Web APIs | MDN

https://helloworld-88.tistory.com/215

[기본] 소켓(SOCKET)통신 이란?