[CS 지식] 실시간 통신을 하는 방법들

실시간 통신이란?

클라이언트(브라우저, 앱)와 서버가 연결을 유지하거나 주기적으로 확인하여 데이터가 발생하는 즉시 지연 없이 주고받는 통신 방식을 의미.

무슨 방법들이 있는가 ?

기술	설명
WebSocket	양방향 통신을 지원하는 대표적인 표준 프로토콜
SSE(Server-Sent Events)	서버에서 클라이언트로만 데이터를 실시간 푸시하는 단방향 기술
HTTP Polling (Short / Long Polling)	클라이언트가 서버에 주기적으로 데이터 유무를 물어보는 방식
WebRTC (Web Real-Time Communication)	서버를 거치지 않고 브라우저 간(P2P)에 직접 음성/영상/데이터를 주고받는 기술

사용시기?

1. 즉각적인 데이터 동기화가 필요할 때 (WebSocket, HTTP Polling)

사용자 간 입력이나 동작이 서로의 화면에 즉시 반영되어야 하는 서비스 환경에서 필요하다.

2. 서버에서 일방적으로 이벤트/알림을 내보내야 할 때 (SSE)

사용자가 요청하지 않아도 결제 완료, 배송 현황, 상태 변경 등의 알림을 전달해야 할 때 필요하다.

3. 대용량 미디어 스트리밍이 필요할 때 (WebRTC)

화상 회의, 화상 통화, 1:1 보이스톡 등 음성 및 영상 데이터를 실시간으로 주고받아야 할 때 사용한다.

각 기술 별 작동 방식

1. WebSocket

[클라이언트] --(1) HTTP Handshake (프로토콜 전환)--->  [서버]
[클라이언트] <==== (2) 양방향 연결 수립 (TCP) ====>    [서버]
[클라이언트] <------ (3) 양방향 실시간 데이터 -------> [서버]

초기에 HTTP로 Handshake 진행한 뒤 WebSocket 프로토콜(ws:// 또는 wss://)로 전환하여 TCP 연결을 유지한다. 

이후 헤더 오브헤드가 매우 적은 프레임 단위로 데이터를 자유롭게 주고받는다.

 

2. SSE (Server-Sent Events)

[클라이언트] ----(1) HTTP 연결 요청 (text/event-stream)---->  [서버]
[클라이언트] <---(2) 지속적인 데이터 스트림 (Server Push)----  [서버]

 클라이언트가 HTTP 요청을 보내면 서버는 text/event-stream 타임의 연결을 유지한다.

서버에 데이터 변경이 발생하면 클라이언트로 이벤트를 스트리밍 형태로 계속 쏘아보낸다.

 

3. HTTP Long Polling

[클라이언트] ----(1) 데이터 있나요? (HTTP 요청)----> [서버 (대기)]
[클라이언트] <---(2) 데이터 생성 시 즉시 응답 -----  [서버]
[클라이언트] ----(3) 받자마자 다시 요청 -----------> [서버 (대기)]

클라이언트가 요청을 보내면 서버는 데이터가 생길 때까지 응답을 보류한다.

데이터가 준비되면 응답을 전달하고 클라이언트는 받자마자 즉시 새로운 요청을 재전송한다.

 

4. WebRTC

[클라이언트 A] <--- (1) 시그널링 서버 (연결 정보 교환) --->  [클라이언트 B]
[클라이언트 A] <======= (2) P2P 직접 미디어 스트리밍 ======> [클라이언트 B]

중간에 위치한 시그널링 서버를 통해 두 기기가 서로의 IP와 네크워크 정보를 교환(ICE, SDP)한다.

연결이 수립되면 서버를 거치지 않고 사용자 디바이스끼리 직접 데이터를 통신한다.

실제 적용 사례

1. WebSocket 적용 사례

- 카카오톡/디스코드: 실시간 1:1 및 그룹 텍스트 채팅

- Figma / 구글 문서: 여러명의 사용자가 한 화면에서 동시에 디자인/문서를 편집하는 협업툴

- 업비트/바이낸스: 초 단위로 변하는 가상자산 및 주식 실시간 채결가/호가창

2. Long Polling 적용 사례

- 간단한 결제 인증 대기: 토스/카카오페이 QR 결제 시 사용자의 승인 완료 상태를 기다리는 화면

3. SSE 적용 사례

- ChatGPT/Claude: AI가 답변을 한 글자씩 실시간으로 작성해 주는 텍스트 스트리밍

- 웹 푸시 알림: 결제 완료 안내, 새로운 댓글 등록 알림, 배달 현황 알림

4. WebRTC 적용 사례

- Google Meet/Zoom: 브라우저 기반의 다자간 화상 회의 시스템

- Discord 음성 채널: 낮은 지연 시간의 실시간 보이스 채널 통화