[HTTP 추가 프로토콜]WebSocket

[HTTP 추가 프로토콜]WebSocket

WebSocket은 서버와 클라이언트 간의 양방향 통신을 지원하는 통신 프로토콜입니다.

일반적인 HTTP 요청/응답 방식과 달리, 하나의 연결을 유지한 상태에서 양방향 데이터 교환을 실시간으로 수행할 수 있습니다. WebSocket은 HTML5 표준의 일부로 정의되었으며, 웹 애플리케이션에서 실시간 데이터 전송을 필요로 하는 다양한 경우에 활용됩니다.

---

주요 특징

1. 양방향 통신:
   • 서버와 클라이언트가 모두 데이터를 주고받을 수 있습니다. 클라이언트의 요청 없이도 서버는 데이터를 푸시(push)할 수 있습니다.
2. 지속적인 연결:
   • 초기 연결 이후, 클라이언트와 서버 간의 연결이 유지되며, 재연결 없이 데이터를 주고받을 수 있습니다.
3. 저지연 및 효율성:
   • HTTP 프로토콜처럼 요청/응답 과정이 반복되지 않으므로 네트워크 오버헤드가 줄어들어 빠른 데이터 전송이 가능합니다.
4. 텍스트 및 바이너리 데이터 지원:
   • 텍스트 데이터와 바이너리 데이터(WebSocket Binary Frames)를 모두 전송할 수 있습니다.
5. 프로토콜 및 포트:
   • 전용 프로토콜: ws:// (기본) 및 wss:// (TLS/SSL 암호화).
   • 기본 포트: 80(HTTP), 443(HTTPS).

---

WebSocket 동작 과정

1. 핸드셰이크 (Handshake):
   • 클라이언트가 HTTP 프로토콜로 WebSocket 서버에 연결을 요청합니다.
   • 서버는 HTTP 101 Switching Protocols 응답으로 연결을 업그레이드합니다.
   • 이후, 연결이 WebSocket 프로토콜로 전환됩니다.

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

2. 지속적인 데이터 전송:
   • 연결이 성립되면 클라이언트와 서버는 메시지를 자유롭게 교환합니다.
3. 연결 종료:
   • 클라이언트 또는 서버가 명시적으로 연결을 종료(close)할 수 있습니다.

---

WebSocket 사용 사례

1. 실시간 채팅 애플리케이션:
   • 양방향 대화가 필요한 채팅 앱.
2. 온라인 게임:
   • 게임 상태, 위치 정보 등 실시간 데이터 업데이트.
3. 실시간 데이터 스트리밍:
   • 주식 시세, 스포츠 점수, 뉴스 피드 등.
4. 협업 도구:
   • Google Docs와 같은 실시간 협업 플랫폼.
5. IoT(사물인터넷):
   • 센서 데이터의 실시간 전송 및 제어.

---

WebSocket과 HTTP의 차이점

특성	HTTP	WebSocket
연결 방식	요청/응답 (Stateless)	지속적인 연결 (Stateful)
통신 방향	단방향 (클라이언트 → 서버)	양방향 (서버 ↔ 클라이언트)
데이터 형식	텍스트 기반	텍스트 및 바이너리
네트워크 오버헤드	높은 오버헤드 (요청/응답 반복)	낮은 오버헤드 (지속 연결)
사용 사례	API 호출, 페이지 요청	실시간 데이터, 채팅, 스트리밍

---

WebSocket과 SSE(Server-Sent Events) 비교

특성	WebSocket	SSE
통신 방향	양방향	단방향 (서버 → 클라이언트)
데이터 형식	텍스트, 바이너리 지원	텍스트만 지원
연결 유지	클라이언트와 서버 간 지속 연결	HTTP 연결을 유지하며 단방향 통신
사용 사례	채팅, 게임, 실시간 협업 도구	실시간 알림, 뉴스 피드
브라우저 호환성	대부분의 현대 브라우저 지원	일부 브라우저 제한 (e.g., IE 미지원)

---

WebSocket 예제 코드

클라이언트 측 (JavaScript):

const socket = new WebSocket('ws://example.com/socket');

// 연결 열기
socket.onopen = () => {
    console.log('WebSocket 연결이 열렸습니다.');
    socket.send('Hello Server!');
};

// 메시지 수신
socket.onmessage = (event) => {
    console.log('서버로부터 메시지:', event.data);
};

// 오류 처리
socket.onerror = (error) => {
    console.error('WebSocket 오류:', error);
};

// 연결 닫기
socket.onclose = () => {
    console.log('WebSocket 연결이 닫혔습니다.');
};

서버 측 (Node.js):

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

server.on('connection', (ws) => {
    console.log('클라이언트가 연결되었습니다.');

    ws.on('message', (message) => {
        console.log('클라이언트로부터 메시지:', message);
        ws.send('Hello Client!');
    });

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

---

장점

• 실시간 양방향 통신: 요청 없이도 클라이언트와 서버가 자유롭게 데이터 교환 가능.
• 효율성: 요청/응답 반복이 없으므로 네트워크 리소스 절약.
• 유연성: 텍스트와 바이너리 모두 지원.

단점

• 복잡한 구현: SSE나 HTTP에 비해 설정 및 관리가 복잡.
• 방화벽/프록시 문제: 일부 네트워크 환경에서 WebSocket 차단 가능.
• 지속 연결 비용: 연결을 유지하는 데 추가적인 서버 리소스가 필요.

WebSocket은 실시간 통신과 양방향 데이터 교환이 중요한 애플리케이션에서 필수적인 기술입니다.

 

https://developer.mozilla.org/en-US/docs/Web/API/WebSocket

WebSocket - Web APIs | MDN