[React+TypeScript] ShortPolling, LongPolling, SSE, WebSocket 차이점

목표

실시간 알림 서비스를 구현하고자, 어떤 방식이 알림 서비스에 적합한지 알아보고, 실시간 통신 방식에 대해서 학습한다.

ShortPolling

---

특징

- 클라이언트는 일정한 간격(예:1~2초) 으로 HTTP요청을 계속해서 보내는 방법

- 서버에서 업데이트가 없을 경우, 대부분의 요청은 빈응답으로 받는다.

단점

• 높은 HTTP 오버헤드가 발생한다.
• 불필요한 네트워크 호출이 발생한다.
• 실시간 통신 애플리케이션으로 적합하지 않다.

HTTP 오버헤드란?
- 네트워크를 통해 대상으로 라우팅되는 데이터와 함께 전송되어야하는 정보를 말하며, 올바른 대상에 도달하기 위해 
전송중인 데이터에 추가로 보내지는 정보라 보면 된다.
장점
-  정보 전송의 신뢰성을 높일 수 있고 시스템을 안정적으로 운용할 수 있다.
단점
- 작은 정보라도 TPS(전송시간)가 늘어나게 되는데, 거기서 HTTP 오버헤드가 발생한다.

LongPolling

---

특징

• 클라이언트는 서버가 응답을 제공할 때까지 기다린다.
• 서버가 응답을 보내거나 시간 초과가 발생할 때까지 연결이 열려있는다.
• HTTP 오버헤드가 낮다.

단점

• 채팅 애플리케이션에는 비효율적이다.
• 사용자가 채팅을 많이 하지 않는 경우에도 긴 폴링은 시간 초과 후에도 정기적인 연결을 한다.

WebSocket

---

특징

• 클라이언트와 서버 간의 지속적인 연결이다.
• 단일 TCP/IP 소켓 연결을 통해 HTTP를 통해 작동하는 양방향 전이중 통신 채널을 제공한다.
• 클라이언트와 서버 간의 메시지 전달에 용이하다.

장점

1. 빠른 반응 시간

• 빠르게 반응하기 때문에, 실시간 데이터 전송에 용이하다.
• 보내고 받는 각 메시지에 대해 HTTP 요청/응답 오버헤드가 필요하지 않기 때문에 REST에 비해 효율성이 더 높다.
• 처음에 한번만 핸드셰이킹을 수행하므로 통신 오버헤드가 낮다.

핸드셰이킹이란?
- 통신의 양측 간에 조건에 합의해가는 정보 교환 과정에 붙이는 용어이다.
- 데이터를 전송할 때에, 두 장치 간에 동기(同期)를 맞추기 위하여 일련의 신호를 주고받는 행위이다.

 

2. 지속적인 업데이트

- 클라이언트가 언제 변경이 발생할지 예측할 수 없고 단기간에 변경이 발생할 가능성이 있는 경우 적합하다.

3. 임시 메시징

- 메시지는 언제든지 연결의 양쪽 끝에서 전송될 수 으며, 한 메시지가 다른 메시지와 관련되어 있음을 나타내는 기본 지원은 없기 때문에, "실행 후 잊어버리는" 메시징 시나리오에 적합하다.

4. 비용

- 개별 메시지에는 전송을 설정하기 위한 추가 비용이 발생하지 않는다. 

단점

• 기능을 사용하려면 동일한 서비스에 대해 동시에 여러 WebSocket을 열어야 한다.
• 연결이 매우 적거나, 짧은 시간 동안 사용될 경우 이벤트에 빠르게 반응할 필요가 없기 때문에 불필요하다.
• SSL 설정, 콘텐츠 협상, 대용량 헤더 교환 등의 비용은 연결이 설정될 때 부과되며, 연결을 유지하는 것 자체가 비용이 많이 부과된다.
• 트래픽 양이 많은 서버의 경우 CPU에 큰 부담이 될 수 있다.

SSE(Sever-Sent Events)

---

특징

• HTTP 스트리밍을 통해 클라이언트가 서버로부터 자동 업데이트를 받을 수 있도록하는 서버 푸시 기술이다.
• 서버에서 클라이언트로 흐르는 단방향 통신 기술이다.

장점

• 웹소켓의 경우, 서버와 클라이언트 간의 연결을 유지시켜야하지만, http 연결만 되어 있으면, 클라이언트 요청없이도 서버에서 클라이언트로 데이터를 보낼 수 있다.
• 별도의 복잡한 기술 없이, HTTP 프로토콜을 기반으로 서버에서 클라이언트로 Real-Time Push Notification을 전송할 수 있다.
• 서버는 연결이 되면, 클라이언트의 요청 없이 서버에서 클라이언트로 데이터를 계속해서 보낼 수 있다.
• 오버헤드가 낮다.

단점

• 클라이언트에서는 서버로 데이터를 보낼 수 없다.

 

참고 링크

https://medium.com/techieahead/http-short-vs-long-polling-vs-websockets-vs-sse-8d9e962b2ba8

HTTP Short vs Long Polling vs WebSockets vs SSE

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-HTTP-Overhead-%EB%9E%80

🌐 HTTP Overhead 란?

https://blogs.windows.com/windowsdeveloper/2016/03/14/when-to-use-a-http-call-instead-of-a-websocket-or-http-2-0/

When to use a HTTP call instead of a WebSocket (or HTTP 2.0)

https://isoomni.tistory.com/entry/SERVERHTTP-AJAX-%ED%86%B5%EC%8B%A0-WebSocket-SSE-%ED%8A%B9%EC%A7%95-%EC%9E%A5%EB%8B%A8%EC%A0%90

[SERVER][HTTP, AJAX 통신, WebSocket, SSE] 특징, 장단점