WebSocket 정리

WebSocket 개요

1. 웹 환경에서의 실시간 통신 프로토콜

WebSocket은 웹 브라우저와 서버 간의 실시간 양방향 통신을 가능하게 하는 프로토콜이다. 일반적인 HTTP 요청-응답 구조와 달리, WebSocket은 연결을 유지하면서 클라이언트와 서버가 자유롭게 데이터를 주고받을 수 있다.

---

2. HTTP 핸드셰이크로 연결 시작

WebSocket 연결은 처음에는 HTTP 프로토콜로 시작된다. 클라이언트는 서버에 Upgrade 헤더가 포함된 HTTP 요청을 보내며 WebSocket으로의 전환을 요청한다. 서버가 이를 수락하면 "101 Switching Protocols" 응답을 보내고, 이후부터는 WebSocket 프로토콜로 전환된다.

예시 요청 헤더:

GET /socket HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: xxxxx
Sec-WebSocket-Version: 13

---

3. WebSocket의 특징

WebSocket의 주요 특징은 다음과 같다:

• 전이중(Full-Duplex) 통신: 서버와 클라이언트가 서로 독립적으로 동시에 데이터를 주고받을 수 있음
• 지속적인 연결 유지: 초기 핸드셰이크 후 연결이 끊기지 않음 (HTTP 요청처럼 매번 연결 X)
• 낮은 오버헤드: 지속 연결과 프레임 기반 메시지 전송으로 HTTP 대비 효율적
• 서버 푸시 가능: 클라이언트 요청 없이도 서버가 클라이언트로 메시지를 전송 가능
• 실시간 애플리케이션에 최적: 채팅, 실시간 게임, 알림 시스템 등에 적합

---

4. 라이브러리를 이용한 구현

Node.js 환경에서는 다음과 같은 라이브러리를 통해 WebSocket을 쉽게 구현할 수 있다:

• ws: 순수 WebSocket 구현에 가까운 저수준 라이브러리. 성능 중심이며 프로토콜 학습에 적합하다.

• socket.io: WebSocket 위에 다양한 기능을 추가한 고수준 라이브러리로, 자동 재연결, fallback, 채널 관리 기능 등을 제공한다.

Express와 함께 사용할 경우 http.Server 객체에 WebSocket 서버를 결합하여, HTTP 라우팅과 WebSocket을 동시에 운용할 수 있다.

ws 사용 예시

서버:

import WebSocket, { WebSocketServer } from 'ws';
import http from 'http';

const server = http.createServer();
const wss = new WebSocketServer({ server });

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

  ws.on('message', (message) => {
    console.log('수신 메시지:', message.toString());
    ws.send('서버 응답: ' + message);
  });

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

server.listen(3000, () => {
  console.log('서버 실행 중: http://localhost:3000');
});

ws 사용 예시

클라이언트:

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

socket.onopen = () => {
  console.log('서버에 연결됨');
  socket.send('안녕하세요, 서버!');
};

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

socket.onclose = () => {
  console.log('연결 종료');
};

socket.onerror = (error) => {
  console.error('오류 발생:', error);
};

socket.io 사용 예시

클라이언트:

  const socket = io('http://localhost:3000');

  socket.on('connect', () => {
    console.log('서버에 연결됨:', socket.id);
    socket.emit('chat message', '안녕하세요!');
  });

  socket.on('chat message', (msg) => {
    console.log('서버로부터 수신:', msg);
  });

  socket.on('disconnect', () => {
    console.log('연결이 종료되었습니다.');
  });

서버:

import express from 'express';
import { createServer } from 'http';
import { Server as SocketIO } from 'socket.io';

const app = express();
const httpServer = createServer(app);
const io = new SocketIO(httpServer);

io.on('connection', (socket) => {
  console.log('클라이언트 연결됨:', socket.id);

  socket.on('chat message', (msg) => {
    console.log('수신 메시지:', msg);
    io.emit('chat message', msg);
  });

  socket.on('disconnect', () => {
    console.log('클라이언트 연결 종료:', socket.id);
  });
});

httpServer.listen(3000, () => {
  console.log('서버 실행 중: http://localhost:3000');
});

---

5. 요약

• WebSocket은 웹 환경에서 작동하는 실시간 양방향 통신 프로토콜이다.
• HTTP 핸드셰이크를 통해 시작되며, 이후에는 지속 연결을 유지한다.
• 헤더 오버헤드가 적고, 메시지를 효율적으로 교환할 수 있다.
• socket.io, ws 같은 라이브러리를 사용해 빠르게 개발 가능하다.

실시간 게임, 채팅 시스템, 주식 가격 전송 등 다양한 분야에서 널리 사용되고 있다.

 

*이 글은 ChatGPT 캔버스를 통해 작성함