[CS Study] 실시간 업데이트 기법(웹소켓과 SSE)

개요

1. 실시간 업데이트 기법
2. SSE(Server-Sent-Event)란?
3.웹소켓이란?

 

✅ 실시간 업데이트

---

 

알람 기능과 채팅 기능 등 실시간으로 백엔드에서 정보를 받아서 클라이언트에 나타내야하는 기능들이 많아진 근래의 애플리케이션에서는 기존의 HTTP 통신만으로는 실시간성을 보장하기 힘들고 효율적이지 못한 부분이 생기게 되었다. 실시간 업데이트를 위해 사용되는 다양한 기법과 우리가 주로 사용하고 있는 SSE 및 웹소켓에 대해 알아보자!

 

📦 폴링(Polling)

클라이언트가 일정 주기로 서버에 필요한 데이터를 요청하는 방식으로 가장 쉽지만 데이터의 변경 유무에 관계 없이 계속 요청을 보내 서버에 부담을 주며, 주기가 짧아질수록 부담이 가증된다.(요청과 응답이 1대1로 이루어짐)

• 주기적인 데이터 요청은 의미없는 서버의 리소스를 소비하게 된다.

폴링(Polling) 방식

 

---

📦 롱 폴링(Long Polling)

클라이언트에서 보낸 요청에 대해서 즉시 응답을 주지 않고 특정 이벤트의 발생 또는 타임아웃이 발생 시 응답을 전달하는 방식이다. 응답을 받은 클라이언트는 즉시 요청을 다시 보낸다.(폴링과 마찬가지로 요청과 응답이 1대 1로 이루어짐)

• 트래픽이 많은 경우 급작스런 요청에 대해 서버 부하가 발생할 수 있어 적은 사용자의 경우 유리한 방식

롱 폴링(Long Polling) 방식

 

---

 

📦 폴링과 롱 폴링의 특징

장점

• 웹소켓, SSE와 같은 실시간 통신 기술을 사용하지 않고도 데이터를 실시간으로 업데이트 할 수 있어 러닝커브가 낮다.

단점

• 서버의 부하가 웹소켓, SSE에 비해 심하다.
• 실시간 데이터 처리 기술에 비해 실시간성을 보장하기 어렵다.
• 트래픽이 과할 경우 쉽게 처리할 수 없다.

 

---

 

✅ SSE(Server-Sent-Event)란? 

---

 

📦 개념

서버에서 클라이언트로 실시간 이벤트를 전달하는 웹 기술로 HTTP 프로토콜의 비연결성을 해결하여 단방향으로 별도의 추가 요청없이 서버에서 업데이트된 데이터를 클라이언트로 전송할 수 있게 해주는 기술이다.

• 클라이언트에서 SSE 통신 요청에 대해 서버는 수락했음에 대한 메시지를 보내고 정해진 이벤트마다 클라이언트에게 메시지를 보냄

---

 

📦 장 · 단점

장점

• HTTP 프로토콜을 통해 구현하므로 러닝커브가 낮다.
• 연결이 비정상적으로 끊겼을 때 자동으로 재연결을 시도한다.
• 폴링과 롱폴링에서 보장하지 못한 완전한 실시간성을 보장한다.
• 로드밸런싱이 되어있는 환경에서도 별도의 설정없이 사용할 수 있다.
• HTTP 기반으로 방화벽에 친화적이다(80번 443번 포트를 사용하여 웹소켓처럼 따로 설정을 해주지 않아도 됨).

단점

• 단방향 통신으므로 GET요청만 지원하며, 파라미터를 보내는데 한계가 있다.
• 클라이언트가 페이지를 닫아도 서버에서 감지하기 어렵다
• 지속적인 연결을 유지해야하므로 트래픽이 많아질 수록 서버에 부담이 간다.

 

---

 

📦 사용 방법 및 예시

SSE 통신 방식

사용 방법

const evtSource = new EventSource("//api.example.com/ssedemo.php", {
  withCredentials: true,
});

1. Client에서 EventSource 인스턴스 생성 및 해당 URI를 통해 Sever로 요청을 보낸다
2. Server에서는 event-stream에 대한 정보를 확인 후 keep-alive를 통해 해당 TCP 연결을 지속적으로 유지한다.
3. 특정 이벤트마다 서버에서 보낸 message 이벤트를 수신하여 해당 이벤트에 대한 핸들러를 연결한다.

evtSource.onmessage = (event) => {
  const newElement = document.createElement("li");
  const eventList = document.getElementById("list");

  newElement.textContent = `message: ${event.data}`;
  eventList.appendChild(newElement);
};

 

 

 

프로그래스바

• 회원가입 또는 특정 상품에 가입할 때 마지막으로 진행 중이라는 문구와 함께 제공되어 유저에게 어느정도 진행되었는지 진행도를 알려주는 경우

알림 기능

• 어플리케이션에서 발생하는 실시간 이벤트에 대해 사용자에게 알려주는 기능 및 알람 기능

 

---

 

✅ 웹 소켓이란? 

---

 

📦 개념

HTTP와는 다른 개념으로 실시간으로 양방향 소통을 해야하는 경우에 사용되는 프로토콜이다. 이는 웹 소켓 연결을 맺기 위해 핸듯셰이크를 주고받은 후 지속적으로 연결이 유지되며, 메시지 전송 시마다 새롭게 연결을 맺을 필요가 없어 앞선 폴링기법에 비해 효율적이고 빠르다.

• 지연시간이 매우 짧고, 실시간 통신에 최적화 되어 있다.
• 브라우저 소켓으로 4계층의 TCP, UDP 소켓과는 이름만 유사할 뿐 7계층에 위치해 있다.
• ws, wss 프로토콜을 사용한다.(wss는 https와 같이 신뢰성이 있다.)
• 양방향 통신에 최적화되어있어 채팅, 게임, 금융 거래 등과 같은 서비스에 주로 사용된다.

 

---

 

📦 연결 과정

핸드셰이크 과정

• 브라우저에서 HTTP 통신을 이용해 서버에 소켓 통신이 가능한지 요청을 보내며, 헤더에 소켓을 사용하기 위한 정보를 함께 전송한다.

GET /chat
Host: https://chanstory.dev
Origin: https://chanstory.dev
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Key: ...
Sec-WebSocket-Version: 13

• 서버에서 웹 소켓이 가능하다면 101 상태 응답과 함께 클라이언트에서 받은 Sec-WebSocket-Key 값에 문자를 더하여 암호화 한뒤 Sec-WebSocket-Accept로 응답한다.(이는 클라이언트에서 복호화하여 자신이 보낸 key가 맞는지 검증하는데 사용된다.)

101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: ...

• 이후 ws 또는 wss 프로토콜을 통해 양방향 통신을 시작한다.

이러한 웹 소켓은 HTML5 이전의 기술로 구현되거나 웹소켓을 지원하지 않는 브라우저에서는 동작하지 않기에 WebSocket Emulation을 가능케하는 Socket.io 또는 SockJS 같은 자바스크립트 라이브러리를 이용하면 해당 문제를 해결하며 웹소켓 기술을 사용할 수 있다.

 

---

 

📦 Socket.io

Node.js 기반으로 클라이언트와 서버 간의 실시간 양방향 통신을 위해 설계된 실시간 메시징 라이브러리로 기본적으로 웹소켓을 지원한다.

• 브로드캐스팅, 재접속, 멀티 플렉싱 기능을 제공한다.

 

---

 

📦 SockJS (with STOMP)

웹 소켓 API를 모방하여 웹소켓이 지원되지 않는 경우에도 유사한 기능을 제공하는 자바스크립트 라이브러리로 웹 소켓을 사용할 수 없는 상황에 대비할 필요가 없도록 보호하는 것이 핵심이다.

• HTTP 롱 폴링과 같은 메서드에 대한 fallback 제공
• 내부적으로 웹소켓을 먼저 사용하려 싣도하며 실패 시 다른 기법을 통해 웹 소켓과 같은 추상화를 통해 기능을 제공한다.
• STOMP라는 메시지 프로토콜과 함께 사용된다.

STOMP

• 메시지 전송을 효율적으로 하기 위한 프로토콜로 클라이언트와 서버가 전송할 메시지의 유형, 형식, 내용을 정의하는 매커니즘이다.
• 메세징 프로토콜 및 형식에 대한 개발이 필요 없어 개발시간 단축에 도움이 된다.

 

 

 

📌 Reference

• [코딩애플] 오늘의 테크용어: 웹소켓이 뭐냐면  
• 폴링, 롱 폴링  
• [얄팍한 코딩사전] SSE - 서버가 그대에게 보낸다  
• MDN - Using server-sent event 
• [얄팍한 코딩사전] 웹소켓을 알아봅시다.  
• 웹 소켓의 개념과 간단한 예제  
• 웹소켓과 SSE 차이점  
• WebSocket Emulation