웹소켓 (WebSocket)

HTTP는 매번 문을 두드려야 답을 준다 — 웹소켓은 문을 한 번만 열어두고 양쪽 다 아무 때나 말을 건다

① 폴링 vs 웹소켓 — 직접 돌려보기

양쪽 다 같은 속도로 "새 메시지"가 서버에 무작위로 생긴다고 가정한다. 왼쪽은 1초마다 클라이언트가 직접 물어보고, 오른쪽은 연결을 한 번 맺어두고 서버가 생기는 즉시 밀어준다. 10초 실행을 눌러 요청 수와 낭비를 비교해보자.

② 연결은 어떻게 시작될까 — HTTP Upgrade 핸드셰이크

웹소켓도 처음엔 평범한 HTTP 요청으로 시작한다. 다만 "이 연결을 웹소켓으로 업그레이드해달라"는 헤더를 붙인다. 서버가 동의하면 101 Switching Protocols 로 응답하고, 그 순간부터 같은 TCP 연결이 HTTP가 아닌 웹소켓 프레임을 주고받는 통로로 바뀐다.

# 클라이언트 → 서버 (여전히 HTTP 요청처럼 보임)
GET /ws/chat HTTP/1.1
Host: offset0xf.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

# 서버 → 클라이언트 (동의하면 101로 응답, 이후 계속 열려 있음)
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

③ 프레임 안에는 무엇이 들었나

클라이언트가 보내는 프레임은 마스킹(XOR)이 의무다. 캐시 프록시가 "이건 그냥 이미지 데이터야"라고 오해해 내용을 캐싱하거나 변형하는 걸 막기 위한 보안 장치다.

④ 실시간 채팅 미니 데모

아래 두 창은 같은 웹소켓 연결을 공유하는 두 사용자라고 가정한다. 한쪽에서 메시지를 보내면 폴링과 달리 새로고침이나 재요청 없이 즉시 반대편에 나타난다.

⑤ 서버 쪽 코드는 어떤 모습일까 (FastAPI)

from fastapi import FastAPI, WebSocket

app = FastAPI()
connections: list[WebSocket] = []

@app.websocket("/ws/chat")
async def chat(ws: WebSocket):
    await ws.accept()             # 101 응답 + 연결 유지 시작
    connections.append(ws)
    try:
        while True:
            msg = await ws.receive_text()   # 도착할 때까지 대기(블로킹 아님)
            for conn in connections:
                await conn.send_text(msg)   # 접속자 전원에게 즉시 push
    except Exception:
        connections.remove(ws)         # 연결 끊기면 목록에서 제거

⑥ 언제 무엇을 쓸까