WebSocket: 개념, 전이중 통신 프로토콜 및 작동 방식

WebSocket이란?

WebSocket은 TCP 위에서 작동하며 클라이언트와 서버 간 전이중 채널을 제공하는 통신 프로토콜입니다. 2011년 IETF에 의해 RFC 6455로 표준화되었으며 모든 최신 브라우저, 모바일 플랫폼 및 서버 프레임워크에서 지원됩니다.

클라이언트가 요청을 시작하고 응답을 받는 HTTP와 달리, WebSocket은 연결이 설정된 후 양측이 언제든지 메시지를 보낼 수 있습니다. 이는 즉시 전달이 필요한 시나리오(채팅, 알림, 공동 문서 편집)에 이상적입니다.

WebSocket 프로토콜은 초기 핸드셰이크에 HTTP 포트 80 또는 HTTPS 포트 443을 사용한 후, 최소 헤더(HTTP의 800+바이트 대비 2바이트)만 있는 자체 프로토콜로 전환합니다. 이 기능은 많은 수의 메시지를 처리할 때 상당한 성능 이점을 제공합니다.

프로토콜의 주요 특성

WebSocket 연결은 HTTP 업그레이드 요청(Upgrade)으로 시작된 후 바이너리 프레임 형식으로 전환됩니다. 프레임 크기는 2바이트에서 2^63바이트까지 다양하여 짧은 텍스트 메시지와 대용량 바이너리 데이터를 모두 전송할 수 있습니다. 프로토콜은 메시지 분할, 클라이언트에서 서버로의 데이터 마스킹, 연결 유지를 위한 ping/pong을 지원합니다.

WebSocket 작동 방식

WebSocket 연결 설정 프로세스는 핸드셰이크와 데이터 전송의 두 단계로 구성됩니다. 핸드셰이크 단계에서 클라이언트는 Upgrade: websocket 헤더와 함께 HTTP 요청을 보내고, 서버는 상태 101 Switching Protocols로 프로토콜 전환을 확인합니다. 그 후 연결은 전이중 전송 모드로 전환됩니다.

WebSocket의 각 메시지는 프레임으로 나뉩니다. 프레임에는 opcode(텍스트, 바이너리 데이터, 종료, ping/pong), 페이로드 길이 및 클라이언트 데이터의 마스킹 키가 포함됩니다. 프레임은 분할될 수 있으며, 제어 프레임(ping/pong)은 메시지 프래그먼트 사이에 전송되어 긴 전송 중 연결 타임아웃을 방지할 수 있습니다.

const ws = new WebSocket('wss://example.com/chat')

ws.addEventListener('open', () => {
    console.log('연결이 설정되었습니다')
    ws.send('안녕하세요, 서버!')
})

ws.addEventListener('message', (event) => {
    console.log('수신됨:', event.data)
})

ws.addEventListener('close', () => {
    console.log('연결이 종료되었습니다')
})

위 예제에서 클라이언트는 보안 URL wss://를 지정하여 WebSocket 객체를 생성합니다. 연결이 열린 후 환영 메시지가 전송되고 메시지 핸들러가 서버의 응답을 수신합니다. 종료 시 close 핸들러가 실행됩니다. 이는 네트워크 중단 시 재연결을 위해 중요합니다.

WebSocket vs HTTP: 비교

WebSocket과 HTTP의 주요 차이점은 상호작용 모델에 있습니다. HTTP는 요청-응답 방식으로 작동합니다. 클라이언트가 요청을 시작하고 서버가 응답을 반환하며 연결이 종료됩니다. 반면 WebSocket은 양측이 언제든지 전송을 시작할 수 있는 지속적 채널을 설정합니다.

낮은 지연 시간과 지속적인 데이터 스트림이 필요한 애플리케이션의 경우 WebSocket이 훨씬 더 효율적입니다. HTTP Long Polling(서버가 데이터를 사용할 수 있을 때까지 요청을 열어두는 대안)은 서버에 과도한 부하를 일으키고 여러 동시 연결로 인해 메모리 소비를 증가시킵니다.

High Performance Browser Networking(Grigorik, O'Reilly)에 따르면, WebSocket은 HTTP Long Polling에 비해 실시간 시나리오에서 네트워크 지연 시간을 40-60% 감소시키며, 반복적인 핸드셰이크 제거로 서버 부하가 3-5배 감소합니다.

WebSocket 사용 사례

낮은 지연 시간과 양방향 통신 덕분에 WebSocket은 광범위한 애플리케이션에서 사용됩니다. 주요 시나리오에는 인스턴트 메시징, 게임의 상태 동기화 및 금융 시스템의 시장 데이터 전송이 포함됩니다.

채팅 및 메신저

WebSocket은 채팅 애플리케이션의 사실상 표준이 되었습니다. Slack, Telegram Web, WhatsApp Web과 같은 플랫폼은 즉각적인 메시지 전달을 위해 WebSocket을 사용합니다. 프로토콜은 단일 채널을 통해 텍스트 메시지와 파일을 모두 보낼 수 있으며, ping/pong 메커니즘은 비활성 기간 동안에도 연결을 활성 상태로 유지합니다.

온라인 게임

멀티플레이어 브라우저 및 모바일 게임은 플레이어 상태 동기화를 위해 최소한의 지연 시간이 필요합니다. WebSocket은 HTTP 요청의 지연 없이 좌표, 동작 및 이벤트를 실시간으로 전송합니다. Socket.IO 및 Colyseus와 같은 프레임워크는 저수준 프로토콜 작업을 추상화하고 자동 재연결 및 방을 추가합니다.

금융 애플리케이션

트레이딩 터미널과 거래 플랫폼은 실시간 시세 수신을 위해 WebSocket을 사용합니다. 몇 밀리초의 지연이 수백만 달러의 손실을 초래할 수 있으므로 Binance WebSocket Streams, Coinbase Pro와 같은 금융 API는 시장 데이터에 WebSocket 인터페이스를 제공합니다.

모바일 애플리케이션 및 IoT

모바일 개발에서 WebSocket은 네이티브 API(iOS의 URLSessionWebSocketTask, Android의 OkHttp WebSocket)를 통해 사용됩니다. Flutter용 web_socket_channel 라이브러리와 React Native용 react-native-websocket이 있습니다. IoT 기기는 텔레메트리 전송 및 제어 명령 수신에 WebSocket을 사용하는데, 이는 프로토콜이 지속적인 HTTP 폴링보다 에너지 소비가 적기 때문입니다.

WebSocket 코드 예제

Node.js에서 ws 라이브러리(JavaScript에서 가장 인기 있는 WebSocket 구현)를 사용한 서버 측 예제를 살펴보겠습니다. 서버는 연결을 수락하고, 메시지를 처리하며, 연결된 모든 클라이언트에 브로드캐스트합니다.

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

wss.on('connection', (ws) => {
    console.log('새 클라이언트가 연결됨')

    ws.on('message', (data) => {
        console.log('수신됨:', data.toString())
        ws.send('서버가 메시지를 수신했습니다')
    })

    ws.on('close', () => {
        console.log('클라이언트 연결 끊김')
    })
})

console.log('WebSocket 서버가 포트 8080에서 시작됨')

서버는 포트 8080에서 WebSocket.Server 인스턴스를 생성하고 연결을 기다립니다. 각 새 클라이언트에는 서버가 개별 메시지를 보낼 수 있는 별도의 ws 객체가 할당됩니다. 모든 클라이언트에 대한 메시지 브로드캐스팅은 연결 배열을 반복하여 구현됩니다. 클라이언트 수가 많은 경우(1000개 이상) Redis 기반 스케일링과 자동 재연결을 추가하는 Socket.IO와 같은 클러스터링 지원 라이브러리를 사용하는 것이 좋습니다.

모든 클라이언트에 메시지 보내기

wss.clients.forEach((client) => {
    if (client.readyState === WebSocket.OPEN) {
        client.send('모든 참가자를 위한 메시지')
    }
})

전송 전에 readyState를 확인하는 것이 필수입니다. 클라이언트가 이미 연결이 끊어진 경우 send를 호출하면 오류가 발생합니다. WebSocket.OPEN 플래그는 연결이 활성 상태이고 메시지가 전달됨을 보장합니다.

iOS 모바일 애플리케이션의 경우 WebSocket은 iOS 13부터 사용 가능한 URLSessionWebSocketTask를 통해 구현됩니다. 세션은 wss:// 프로토콜 URL로 작업을 생성한 후 send 및 receive 메서드가 호출됩니다. 메시지 수신은 이전 메시지를 처리한 후 다음 메시지를 기다리는 연속 receive 재귀로 구성할 수 있어 재연결 없이 지속적인 데이터 수신을 보장합니다. Android의 경우 onOpen, onMessage, onClosing 및 onClosed 콜백과 연결 끊김 시 자동 재연결을 제공하는 OkHttp WebSocket이 사용됩니다.

모바일 애플리케이션에서 WebSocket으로 작업할 때는 라이프사이클 관리를 고려하는 것이 중요합니다. 앱이 백그라운드로 전환되면 시스템이 연결을 종료할 수 있습니다. iOS에서는 sceneDidBecomeActive 델리게이트를 통해 포그라운드로 돌아올 때 연결을 다시 설정해야 합니다. Android에서는 연결을 유지하기 위해 Lifecycle-aware 컴포넌트 또는 Service를 사용해야 합니다. 또한 일시적인 네트워크 문제 시 서버에 과도한 부하를 생성하지 않도록 재연결에 지수 백오프(시도 간격을 1초에서 30초로 증가)를 구현하는 것이 좋습니다.