실시간 통신
Real Time Communication
실시간 통신은 거의 동시에 발생하는 발신자에서 수신자로의 모든 유형의 통신 서비스
이런 실시간 통신 서비스를 만들기 위해서 사용되는 기술이 몇 가지 존재
Polling
HTTP는 Stateless와 Connectionless한 특징을 가진다
=> 서버는 반드시 요청을 받아야만 클라이언트로 응답을 보낼 수 있다!
HTTP가 더 궁금하다면? http/https
그럼 서버에서 클라이언트로 전송해야 하는 데이터가 생겨도 요청 전엔 발송 불가

이를 해결한 방식이 Polling
http 요청을 주기적으로 보내서 서버가 전송해야 하는 데이터가 있는지, 이벤트가 발생했는지 확인하는 방식
개발하기에 가장 쉽고 기존 개발 상태에서도 어렵지 않게 확장 구현 가능하지만... 단점이 존재
- 클라이언트가 지속적으로 요청을 날려 서버의 부담이 증가
- 요청이 특정 주기를 가지기 때문에 빠른 응답을 기대할 수 없음
- http 오버헤드가 발생
대시보드 갱신같은 일정하게 갱신되는 서버 데이터의 경우 유용하게 사용할 수 있지만...
이를 보완한 방법이 상당 수 존재함
Long Polling

Polling과 유사하게 동작하나 조건이 추가 된 형태
서버가 요청에 바로 응답하는 것이 아닌 이벤트가 발생할 때 까지 대기하는 방식
즉, 클라이언트가 일정한 주기로 서버에 데이터를 요청하면 서버는 데이터가 업데이트 되거나 타임아웃이 발생하면 응답을 반환
응답이 반환되면 클라이언트는 즉시 요청을 다시 보냄
Polling에 비해 불필요한 네트워크 트래픽을 줄이고, 실시간성을 보다 효과적으로 구현 가능
다만 서버가 클라이언트로 보내는 이벤트들의 시간 간격이 좁다면 polling 방식과 별 차이가 없음
다수의 클라이언트에게 동시에 이벤트가 발생하면 오히려 서버의 부담이 증가
=> 다수의 클라이언트가 요청을 동시에 보내게 되니까...!
Server Sent Event
결국 클라이언트가 요청을 많이 보내는게 문제인건데...
SSE는 해당 문제를 해결할 수 있는 HTTP 기반의 단방향 통신 기술

단 위의 두 기술과는 다르게 한번 클라이언트가 요청을 보내면 여러번의 응답을 받을 수 있어
=> 클라이언트가 한번 요청을 보내면 요청을 다시 보내지 않아도 서버가 데이터를 전달할 수 있다고...!!!
만약 연결이 끊어지면 EventSource가 오류 이벤트를 발생시키고 자동으로 다시 연결을 시도
표준 기술로 IE를 제외한 브라우저 대부분을 지원하며 Pollyfill로 IE도 사용 가능
하지만 이 방법 또한 http를 사용하기 때문에 요청과 응답 시 둘 다 Header가 불필요하게 크다는 단점
또 서버에서 클라이언트로 메세지를 보낼 수는 있지만 클라이언트에서 서버로 메세지를 보내는 것은 조금 어려움
Web Socket
사실 서버와 클라이언트의 통신이 http 프로토콜만을 이용해서 이루어져있지 않음
실시간 통신이 필요한 서비스를 구현하기 위해서 웹소켓 프로토콜도 많이 사용함

웹소켓은 HTML5 표준 기술로, 사용자의 브라우저와 서버 사이의 동적인 양방향 연결 채널을 구성
웹소켓 API를 통해 서버로 메세지를 보내고, 요청 없이 응답을 받아오는 것이 가능
간단하게 Web Socket 동작방식에 대해서 알아보자면
- WebSocket 열기 : 해당 과정은 Handshake라고도 하며, 클라이언트와 서버 간의 HTTP 요청과 응답 교환으로 구성
- WebSocket을 통한 데이터 전송 : 선공적인 Handshake 이후, 클라이언트와 서버는 지속적으로 메세지를 교환할 수 있음
- Web Socket 연결 닫기 : 목적을 달성하면 클라이언트와 서버 모두 종료 메세지를 전송 가능
웹소켓은 TCP 프로토콜을 기반으로 동작하고, 더 낮은 지연과 더 효율적인 네트워크 통신을 제공
Handshake 과정에서 http 프로토콜이 사용되는 이유가 궁금하다면? http vs tcp
그럼 제일 좋은 웹소켓만 사용하면 되는거 아냐?
물론 Polling, Long Polling, SSE를 몰라도 웹소켓만 알면 구현하는데 문제는 없다
양방향 통신만 알면 단방향 통신도 웹소켓으로 구현할 수 있지 뭐
하지만 웹소켓도 다른 기술처럼 비교적 배터리 소모량도 크고, 자동 재접속도 안되고, firewall에 친화적이지 않다는 점 등 단점이 존재
또한 특별한 프로토콜이나 서버 구현이 필요하지 않은 SSE와 달리 웹소켓은 프로토콜 처리를 위해 전이중 연결과 새로운 웹소켓 서버가 필요함
결국... 사용해야 할 곳에 적절한 기술을 사용하는게 제일 중요
예를 들어 웹소켓은 주로 실시간 채팅같은 리얼타임이 필요한 곳에서 많이 사용
SSE는 알람을 줄 때 많이 사용 => 알람은 단방향으로 보내기만 하면 되고, 완전히 실시간일 필요도 없고
오버헤드 되다 처리 시간 및 메모리 등이 추가적으로 사용이 되었다는 의미
'FE Study' 카테고리의 다른 글
| [FE] TypeScript (0) | 2024.09.18 |
|---|---|
| [FE] JavaScript Array (1) | 2024.08.31 |
| Nginx (0) | 2024.08.24 |
| SEO (0) | 2024.08.24 |
| [FE] webpack vs vite (0) | 2024.08.16 |