Post

웹 소켓

웹 소켓 (WebSocket)

웹 소켓(WebSocket)은 웹 브라우저와 서버 간에 전이중 통신을 가능하게 하는 프로토콜입니다. 전통적인 HTTP 요청/응답 모델과 달리, 웹 소켓은 한 번의 연결 설정 후 클라이언트와 서버 간에 자유롭게 데이터를 주고받을 수 있습니다. 이를 통해 실시간 애플리케이션에서 높은 성능과 효율성을 제공합니다.

1. 웹 소켓의 특징

  • 전이중 통신: 클라이언트와 서버가 동시에 데이터를 주고받을 수 있습니다.
  • 지속 연결: 연결이 한 번 설정되면 클라이언트와 서버는 지속적으로 연결을 유지합니다.
  • 낮은 오버헤드: HTTP의 헤더 오버헤드 없이 데이터를 주고받아 효율성이 높습니다.
  • 실시간 데이터 전송: 지연 시간이 적고, 실시간으로 데이터를 전송할 수 있습니다.

2. 웹 소켓의 동작 원리

  1. 핸드셰이크: 클라이언트가 서버에 연결을 요청하고, 서버가 이를 수락하면 웹 소켓 연결이 설정됩니다. 이 과정은 HTTP를 통해 이루어집니다.
  2. 데이터 전송: 연결이 설정되면 클라이언트와 서버는 양방향으로 데이터를 주고받을 수 있습니다.
  3. 연결 종료: 클라이언트 또는 서버가 연결을 종료할 수 있습니다.

핸드셰이크 예제:

클라이언트가 서버에 연결을 요청하는 HTTP 헤더 예제:

1
2
3
4
5
6
GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

서버가 연결을 수락하는 HTTP 헤더 예제:

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

3. 웹 소켓의 주요 이벤트

  • onopen: 웹 소켓 연결이 성공적으로 열렸을 때 발생합니다.
  • onmessage: 서버로부터 메시지가 도착했을 때 발생합니다.
  • onerror: 통신 중 오류가 발생했을 때 발생합니다.
  • onclose: 웹 소켓 연결이 닫혔을 때 발생합니다.

4. 웹 소켓의 사용 예제

클라이언트 측 (JavaScript):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const socket = new WebSocket('ws://example.com/socket');

socket.onopen = function(event) {
    console.log('WebSocket is open now.');
    socket.send('Hello Server!');
};

socket.onmessage = function(event) {
    console.log('Received from server: ', event.data);
};

socket.onerror = function(event) {
    console.error('WebSocket error: ', event);
};

socket.onclose = function(event) {
    console.log('WebSocket is closed now.');
};

서버 측 (Node.js):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });

server.on('connection', function(socket) {
    console.log('Client connected');

    socket.on('message', function(message) {
        console.log('Received: ', message);
        socket.send('Hello Client!');
    });

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

    socket.on('error', function(error) {
        console.error('WebSocket error: ', error);
    });
});

5. 웹 소켓의 장점과 단점

장점

  • 실시간 통신: 실시간으로 양방향 데이터를 주고받을 수 있어 채팅, 온라인 게임 등에 유용합니다.
  • 효율성: 지속적인 연결을 유지하여 불필요한 연결 설정 및 해제 과정을 줄입니다.
  • 낮은 지연 시간: 데이터를 실시간으로 전송하므로 지연 시간이 적습니다.

단점

  • 복잡성: 초기 설정 및 관리가 HTTP보다 복잡할 수 있습니다.
  • 방화벽 문제: 일부 네트워크 환경에서는 웹 소켓 연결이 차단될 수 있습니다.
  • 보안: 전이중 통신이므로 보안에 신경 써야 합니다. 예를 들어, XSS(Cross-Site Scripting) 공격에 취약할 수 있습니다.

6. 웹 소켓의 활용 사례

  • 실시간 채팅 애플리케이션: 빠르고 실시간으로 메시지를 주고받을 수 있습니다.
  • 온라인 게임: 실시간으로 게임 상태를 동기화할 수 있습니다.
  • 실시간 통계/알림: 서버 상태, 주식 시세, 스포츠 경기 결과 등의 실시간 데이터를 제공합니다.
  • IoT 장치 통신: IoT 장치와 서버 간의 실시간 데이터를 주고받습니다.

결론

웹 소켓은 실시간 애플리케이션에서 매우 유용한 통신 프로토콜입니다. 전이중 통신, 낮은 오버헤드, 실시간 데이터 전송 등의 장점을 통해 효율적인 네트워크 통신을 가능하게 합니다. 웹 소켓을 적절히 활용하면 다양한 실시간 서비스에서 높은 성능과 사용자 경험을 제공할 수 있습니다.

다음시간에 계속…

image

This post is licensed under CC BY 4.0 by the author.