웹 소켓?

WebSocket은 HTML5 표준에 포함된 프로토콜로, 클라이언트와 서버 간의 양방향 통신을 실시간으로 수행할 수 있게 해준다. WebSocket의 주요 특징을 자세히 설명하면 다음과 같다.

1. 양방향 통신 (Full-duplex communication)

• WebSocket은 클라이언트와 서버 간의 양방향 통신을 지원한다. 이는 클라이언트와 서버가 서로 독립적으로 메시지를 보낼 수 있음을 의미한다. 클라이언트가 요청을 보낸 후 서버의 응답을 기다리는 HTTP와 달리, WebSocket은 양쪽에서 자유롭게 메시지를 주고받을 수 있다.

2. 지속적인 연결 (Persistent connection)

• WebSocket 연결은 초기 핸드셰이크 이후 지속된다. 한 번 연결이 이루어지면, 클라이언트와 서버 간의 연결이 닫힐 때까지 열려 있다. 이는 반복적인 연결과 해제를 피할 수 있어 효율적이다.

3. 낮은 오버헤드 (Low latency)

• WebSocket은 HTTP보다 더 적은 오버헤드를 가지며, 헤더 정보가 간소화되어 실시간 애플리케이션에서 높은 성능을 발휘할 수 있다. HTTP 요청/응답 패턴에 비해, WebSocket은 연결이 지속되기 때문에 데이터 전송에 따른 오버헤드가 적다.

4. 표준 기반 (Standards-based)

• WebSocket은 IETF의 RFC 6455로 표준화되어 있으며, HTML5에 포함되어 있다. 이는 다양한 브라우저와 플랫폼에서 일관되게 지원됨을 의미한다.

5. 핸드셰이크 (Handshake)

• WebSocket 연결은 HTTP 기반의 핸드셰이크로 시작된다. 클라이언트는 서버에 WebSocket 연결을 요청하는 HTTP 요청을 보내고, 서버가 이를 승인하면 WebSocket 연결이 수립된다. 이 과정은 다음과 같다
  • 클라이언트 -> 서버: HTTP 요청 (Upgrade 헤더 포함)
  • 서버 -> 클라이언트: HTTP 응답 (Switching Protocols 상태 코드)

6. 메시지 프레임 (Message Framing)

• WebSocket은 텍스트와 바이너리 메시지 프레임을 지원한다. 각 메시지는 프레임으로 나뉘며, 프레임은 메시지의 경계를 정의한다. 클라이언트와 서버는 프레임 단위로 데이터를 주고받는다.

7. 보안 (Security)

• WebSocket은 TLS를 통한 보안을 지원한다. ws://는 비보안 WebSocket 연결을, wss://는 보안 WebSocket 연결을 나타낸다. 보안 WebSocket은 HTTPS와 유사하게 데이터를 암호화하여 전송한다.

8. 효율적인 대규모 연결 (Efficient for large scale connections)

• WebSocket은 실시간 애플리케이션, 예를 들어 채팅 애플리케이션, 실시간 게임, 주식 거래 플랫폼 등에 적합하다. 지속적인 연결로 인해 서버는 많은 클라이언트와 효율적으로 통신할 수 있다.

9. 이벤트 기반 (Event-driven)

• WebSocket은 이벤트 기반 프로그래밍 모델을 지원한다. 클라이언트와 서버는 메시지가 도착할 때마다 이벤트를 트리거할 수 있으며, 이를 통해 실시간으로 데이터 처리가 가능하다.

10. 브라우저 지원 (Browser Support)

• 대부분의 현대적인 웹 브라우저는 WebSocket을 기본적으로 지원한다. 이는 개발자가 다양한 클라이언트 환경에서 WebSocket을 활용할 수 있음을 의미한다.

예제 코드

클라이언트 (JavaScript)

// WebSocket 객체 생성
let socket = new WebSocket("ws://example.com/socket");

// 연결이 열릴 때 호출되는 이벤트 핸들러
socket.onopen = function(event) {
    console.log("WebSocket connection established.");
    socket.send("Hello Server!");
};

// 메시지를 받을 때 호출되는 이벤트 핸들러
socket.onmessage = function(event) {
    console.log("Received message from server: " + event.data);
};

// 에러가 발생할 때 호출되는 이벤트 핸들러
socket.onerror = function(event) {
    console.error("WebSocket error: " + event);
};

// 연결이 닫힐 때 호출되는 이벤트 핸들러
socket.onclose = function(event) {
    console.log("WebSocket connection closed.");
};

 

서버 (Node.js 예제)

 

const WebSocket = require('ws');

// WebSocket 서버 생성
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
    console.log('Client connected');

    ws.on('message', function incoming(message) {
        console.log('Received: %s', message);
        ws.send('Hello Client!');
    });

    ws.on('close', function() {
        console.log('Client disconnected');
    });
});

 

이러한 특징 덕분에 WebSocket은 실시간 데이터를 주고받아야 하는 다양한 애플리케이션에서 널리 사용되고 있다.