HTTP vs SSE vs WebSocket

Lucy·2022년 12월 11일

Dev.note

목록 보기

4/4

Qvest Flutter App에 Alpaca로부터 가져온 실시간 데이터를 수신하여 표시해주어야 하는 task를 진행하게 되었다.
이는 Http와 Websocket이 어떻게 다른지 공부하는 기회가 되었는데 이를 통해 정리한 바를 기록으로 남긴다.

실시간 데이터 전송에 사용되는 HTTP 프로토콜과 WebSocket 프로토콜에 대해 알아보고 이를 비교한다.
추가적으로 SSE 기술에 대해서도 알아볼 것이다.

기본적으로 HTTP Protocol은 비연결성의 특징을 가지기 때문에, 실시간 통신에는 적합하지 않은데 이를 구현하는 3가지 방식은 다음과 같다.

브라우저가 일정한 주기마다 서버에 HTTP request를 보내는 방식

HTTP가 클라이언트에서 서버로만 요청이 가기 때문에 이벤트가 없어도 주기적으로 서버에 요청을 보내 업데이트가 있는지 확인하고 있다면 업데이트 시킴
클라이언트가 주기적으로 서버에 request를 보내므로 부담이 큼
실시간 데이터의 업데이트 주기는 예측 불가능하여 불필요한 요청에 따른 서버 및 네트워크의 부하가 늘어남
time interval에 따라 서버의 부하가 커지거나 실시간성이 떨어지는 문제가 발생

<활용> 실시간성이 중요하지 않거나 time interval을 늘려 여러 대의 client와 통신할 때 사용

polling의 서버 부하를 줄이면서 실시간성을 높이기 위한 방식

HTTP 요청 시 서버는 해당 연결을 바로 해제하지 않고 일정 시간 대기함. 이 동안 데이터 업데이트가 일어나면(이벤트) 바로 클라이언트에게 response를 보내고 전달 받은 데이터를 처리함. 그리고 응답을 받은 클라이언트는 서버에 다시 request를 보냄
응답이 와 연결이 끊기면 클라이언트가 서버에 다시 연결 request를 하므로 클라이언트의 부담이 줄어듦
잦은 데이터 변경이 발생하면 서버의 부담이 커짐
일반 polling 방식보다는 서버의 부담이 줄겠지만 데이터 업데이트가 빈번해지면 일반 polling 방식과 차이가 큰 차이가 없음

<활용> 실시간성이 필요한 적은 수의 클라이언트와 연결되어 있는 경우에 사용

요청에 대한 응답을 완료하지 않은 상태에서 데이터를 계속 내려받는 방식으로 응답을 받더라도 연결을 끊고 다시 request를 보내는 과정이 없고 계속 응답을 받아 처리하는 방식

실시간 양방향 데이터 전송을 위한 기술

ws/wss 프로토콜 사용
- ws 프로토콜을 지원하지 않는 오래된 브라우저에서는 사용할 수 없음
- Ex. Node.js : ws나 Socket.IO와 같은 패키지를 통해 웹 소켓 사용 가능
Full-Duplex (전이중) 방식
클라이언트와 서버 간 양방향 통신이 가능
불필요한 요청(한 번의 요청) / 응답 헤더 데이터가 존재하지 않음
최초 WebSocket 연결(접속)은 Http 요청인 Handshaking을 활용
TCP 연결임에도 Byte stream만이 아닌 UTF-8의 Text와 Binary 모두를 보낼 수 있음
실시간성이 강조될 때, Http보다 빠른 Websocket을 사용
HTTP와 포트 공유가 가능하며 좋은 성능을 보여줌