웹 소켓(WebSocket) 프로토콜: 실시간 데이터 스트리밍 구현

8월 28, 2024

현대 웹 애플리케이션은 실시간 데이터 전송이 필수적인 기능이 되었습니다. 금융 거래, 채팅 애플리케이션, 온라인 게임, IoT 디바이스와 같은 시스템에서는 서버와 클라이언트 간의 즉각적인 데이터 통신이 필요합니다. 이러한 요구를 충족시키기 위해 웹 소켓(WebSocket) 프로토콜이 도입되었습니다. 이 글에서는 웹 소켓의 기본 개념, 작동 원리, 그리고 실시간 데이터 스트리밍 구현 방법에 대해 설명하겠습니다.

웹 소켓(WebSocket) 프로토콜이란?

웹 소켓은 HTML5 사양에서 정의된 프로토콜로, 클라이언트와 서버 간의 양방향 통신을 가능하게 합니다. HTTP 기반의 요청-응답 모델과 달리, 웹 소켓은 한 번의 연결로 지속적인 데이터 전송이 가능하여 실시간 애플리케이션에 최적화되어 있습니다.

주요 특징

양방향 통신: 서버와 클라이언트가 동시에 데이터를 주고받을 수 있어, 실시간 통신이 가능합니다.
지속적인 연결: 웹 소켓 연결은 유지되며, 새로운 요청을 할 필요 없이 데이터를 지속적으로 주고받을 수 있습니다.
저지연(Low Latency): HTTP 기반의 폴링(polling)과 비교해, 웹 소켓은 지연 시간이 낮아 실시간 애플리케이션에 적합합니다.
표준 포트 사용: 웹 소켓은 HTTP와 같은 포트(80, 443)를 사용하므로, 방화벽을 우회할 수 있습니다.

웹 소켓의 작동 원리

웹 소켓 연결은 클라이언트가 서버에 HTTP 요청을 보내는 것으로 시작됩니다. 이 요청은 웹 소켓 프로토콜로 업그레이드를 요청하며, 서버가 이를 수락하면 웹 소켓 연결이 수립됩니다. 그 이후로는 클라이언트와 서버 간의 모든 통신이 웹 소켓을 통해 이루어집니다.

핸드셰이크 과정

클라이언트 요청: 클라이언트는 ws:// 또는 wss:// 스키마를 사용하여 서버에 연결 요청을 보냅니다. 이때 HTTP 헤더에 Upgrade와 Connection 헤더를 포함하여, 웹 소켓 프로토콜로 업그레이드를 요청합니다.

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

서버 응답: 서버는 요청을 수락하고, HTTP 상태 코드 101(Switching Protocols)을 응답합니다. 이후 웹 소켓 연결이 수립되며, 양방향 통신이 가능해집니다.

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

데이터 프레임 전송: 연결이 수립되면 클라이언트와 서버는 데이터 프레임을 주고받습니다. 이 데이터 프레임은 텍스트, 바이너리, 제어 메시지 등을 포함할 수 있습니다.

실시간 데이터 스트리밍 구현

웹 소켓을 사용하여 실시간 데이터 스트리밍을 구현하려면, 서버와 클라이언트 간의 지속적인 데이터 전송이 가능하도록 해야 합니다. 예를 들어, 채팅 애플리케이션, 실시간 주식 거래 시스템, 또는 온라인 게임에서 웹 소켓을 활용할 수 있습니다.

Node.js와 WebSocket을 사용한 예시

1. 서버 설정

Node.js 환경에서 웹 소켓 서버를 설정하려면 ws 패키지를 사용할 수 있습니다.

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });

server.on('connection', ws => {
    console.log('Client connected');

    // 클라이언트로부터 메시지를 받을 때
    ws.on('message', message => {
        console.log(`Received message: ${message}`);
        ws.send(`Echo: ${message}`);
    });

    // 클라이언트 연결이 종료될 때
    ws.on('close', () => {
        console.log('Client disconnected');
    });
});

console.log('WebSocket server is running on ws://localhost:8080');

2. 클라이언트 설정

브라우저에서 웹 소켓 클라이언트를 설정하여 서버와 연결할 수 있습니다.

const ws = new WebSocket('ws://localhost:8080');

ws.onopen = () => {
    console.log('Connected to server');
    ws.send('Hello Server!');
};

ws.onmessage = event => {
    console.log(`Received: ${event.data}`);
};

ws.onclose = () => {
    console.log('Disconnected from server');
};

3. 실시간 데이터 스트리밍 예시

주식 거래 애플리케이션에서 실시간 주가 데이터를 스트리밍하려면, 서버에서 주기적으로 주가 데이터를 생성하고 이를 클라이언트로 전송할 수 있습니다.

setInterval(() => {
    const stockPrice = (Math.random() * 1000).toFixed(2);
    server.clients.forEach(client => {
        if (client.readyState === WebSocket.OPEN) {
            client.send(`Stock Price: $${stockPrice}`);
        }
    });
}, 1000);

웹 소켓과 보안 고려사항

웹 소켓을 사용할 때는 보안 문제에 대해 신중하게 고려해야 합니다. 특히, 민감한 데이터를 전송할 때는 SSL/TLS를 사용하여 보안을 강화하는 것이 중요합니다.

1. SSL/TLS 사용

wss:// 스키마를 사용하여 웹 소켓 통신을 암호화합니다. 이를 통해 데이터가 전송 중에 도청되거나 변경되는 것을 방지할 수 있습니다.

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080, secure: true });

2. CORS(Cross-Origin Resource Sharing) 설정

웹 소켓 서버는 CORS 설정을 통해 특정 도메인에서만 연결을 허용하여, 악의적인 도메인에서의 접근을 차단할 수 있습니다.

3. 인증 및 권한 관리

웹 소켓 연결 시 클라이언트 인증을 수행하여, 권한이 없는 사용자가 접근하지 않도록 해야 합니다. JWT(JSON Web Token)와 같은 토큰 기반 인증을 사용할 수 있습니다.

ws.on('connection', (ws, req) => {
    const token = req.headers['sec-websocket-protocol'];
    if (!validateToken(token)) {
        ws.close(1008, 'Invalid token');
    }
});

결론

웹 소켓 프로토콜은 실시간 데이터 스트리밍을 구현하기 위한 강력한 도구입니다. 양방향 통신, 저지연, 지속적인 연결 등 웹 소켓의 주요 특징을 활용하여, 웹 애플리케이션에서 실시간 기능을 손쉽게 구현할 수 있습니다. Node.js와 같은 서버 환경에서 웹 소켓을 설정하고 클라이언트와의 실시간 데이터 통신을 구현하면, 사용자에게 더욱 빠르고 반응성 있는 경험을 제공할 수 있습니다. 웹 소켓을 활용할 때는 보안 문제를 철저히 고려하여, 안전하고 신뢰할 수 있는 실시간 애플리케이션을 개발하는 것이 중요합니다.

인포아카이브

Python의 GIL(Global Interpreter Lock)과 멀티스레딩의 한계