25.02.12 TIL 웹소켓

1. 웹소켓(WebSocket)이란?

웹소켓(WebSocket)은 클라이언트와 서버 간의 양방향, 실시간 통신을 가능하게 하는 프로토콜입니다.
HTTP와 달리 연결을 유지한 상태에서 데이터를 주고받을 수 있어 채팅, 실시간 알림, 스트리밍 서비스 등에 활용됩니다.

웹소켓은 기존 HTTP 요청/응답 방식과 다르게
클라이언트와 서버가 한 번 연결되면 지속적으로 데이터를 주고받을 수 있는 프로토콜입니다.

---

2. 웹소켓 vs HTTP 비교

비교 항목	HTTP	WebSocket
통신 방식	요청-응답 (Request-Response)	양방향 (Full-duplex)
연결 상태	요청마다 새 연결 생성	지속적인 연결 유지
데이터 전송 속도	상대적으로 느림	빠름 (헤더 오버헤드가 적음)
주요 사용 사례	정적인 웹 페이지, API 호출	실시간 채팅, 주식 시세, 게임, 스트리밍

---

3. 웹소켓 동작 방식

웹소켓은 핸드셰이크(Handshake) 과정을 통해 HTTP에서 웹소켓으로 프로토콜을 업그레이드합니다.

1) 웹소켓 핸드셰이크 요청 (클라이언트 → 서버)

클라이언트는 일반 HTTP 요청에서 Upgrade: websocket 헤더를 포함하여 웹소켓 연결을 요청합니다.

GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

2) 웹소켓 핸드셰이크 응답 (서버 → 클라이언트)

서버가 웹소켓 연결을 승인하면 101 Switching Protocols 응답을 반환합니다.

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

3) 실시간 양방향 통신 시작

• 핸드셰이크 후, 클라이언트와 서버는 지속적으로 데이터를 주고받을 수 있음
• 추가적인 요청 없이 서버에서 클라이언트로 데이터를 PUSH할 수도 있음

---

4. 웹소켓 예제

1) 웹소켓 설정 (서버)

Spring Boot에서는 @EnableWebSocket과 WebSocketHandler를 사용하여 웹소켓을 설정할 수 있습니다.

import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.*;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new ChatWebSocketHandler(), "/chat").setAllowedOrigins("*");
    }
}

2) 웹소켓 핸들러 (서버)

import org.springframework.web.socket.*;
import org.springframework.web.socket.handler.TextWebSocketHandler;

public class ChatWebSocketHandler extends TextWebSocketHandler {
    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        String payload = message.getPayload();
        System.out.println("Received message: " + payload);
        session.sendMessage(new TextMessage("Echo: " + payload));
    }
}

3) 웹소켓 클라이언트 (JavaScript)

const socket = new WebSocket("ws://localhost:8080/chat");

socket.onopen = function () {
    console.log("WebSocket 연결 완료");
    socket.send("안녕하세요, 서버!");
};

socket.onmessage = function (event) {
    console.log("서버 응답:", event.data);
};

socket.onclose = function () {
    console.log("WebSocket 연결 종료");
};

---

5. 웹소켓의 장점과 단점

- 장점

• 실시간 양방향 통신 가능 (서버 → 클라이언트 데이터 Push 가능)
• 빠른 데이터 전송 속도 (HTTP보다 오버헤드가 적음)
• 연결 유지 비용이 낮음

- 단점

• 일반 HTTP보다 구현이 복잡함
• 방화벽, 프록시에서 WebSocket을 차단할 수 있음
• 모든 브라우저와 네트워크 환경에서 완벽히 지원되지 않을 수도 있음

---

6. 웹소켓과 대체 기술 비교

기술	특징	사용 사례
WebSocket	실시간 양방향 통신	채팅, 게임, 실시간 알림
SSE (Server-Sent Events)	서버 → 클라이언트 단방향 푸시	실시간 알림, 뉴스 피드
Long Polling	클라이언트가 주기적으로 서버에 요청	채팅, 푸시 알림 (구형 브라우저 지원)

---

7. 마무리

웹소켓을 사용하면 HTTP보다 훨씬 효율적으로 실시간 데이터를 처리할 수 있다는 점이 인상적이었습니다.
Spring Boot에서 간단하게 설정할 수 있지만 클라이언트와의 연결 관리나 성능 튜닝도 고려해야 한다는 점을 배웠습니다.
실시간 서비스에 필수적인 기술이므로 다양한 활용 사례를 직접 경험해보고 싶습니다.