웹소켓(WebSocket)

웹소켓(WebSocket)은 웹에서 실시간 양방향 통신을 가능하게 하는 기술입니다. 이 기술을 이용하면 서버와 클라이언트가 지속적인 연결을 유지하면서 데이터를 실시간으로 교환할 수 있습니다. 웹소켓은 특히 실시간 채팅 앱, 게임, 라이브 스포츠 업데이트 등에 유용합니다.

웹소켓의 특징

실시간 통신: 클라이언트와 서버 간의 지속적인 연결을 통해 실시간 데이터 교환이 가능합니다.
양방향 통신: 데이터를 서버에서 클라이언트로, 클라이언트에서 서버로 동시에 전송할 수 있습니다.
효율적인 자원 사용: HTTP 폴링 방식에 비해 서버 자원과 대역폭을 효율적으로 사용합니다.

웹소켓 프로토콜

웹소켓 프로토콜은 클라이언트와 서버 간의 하나의 연결을 시작할 때 사용되는 핸드셰이크를 기반으로 합니다. 이 초기 핸드셰이크 이후, 웹소켓 연결은 지속적으로 열려있으며 데이터를 양방향으로 전송할 수 있습니다.

사용 예제

웹소켓을 사용하는 기본적인 코드 예제는 다음과 같습니다:

// 클라이언트 사이드
const socket = new WebSocket('ws://example.com/socket');

socket.onopen = function(event) {
    console.log('Connection established');
};

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

socket.onclose = function(event) {
    console.log('Connection closed');
};

위 예제는 간단한 웹소켓 연결과 데이터 교환 방법을 보여줍니다.

WebSocket API (MDN Web Docs): WebSocket API
WebSocket Protocol (RFC 6455): WebSocket Protocol

웹 소켓 관련 자바스크립트 라이브러리

웹 소켓(WebSockets)을 사용하기 위해 많은 자바스크립트 라이브러리가 있습니다. 그 중 몇 가지를 소개합니다.

1. Socket.IO

Socket.IO는 실시간 양방향 통신을 위한 라이브러리로, 웹 소켓 프로토콜을 기본으로 하여 다양한 폴백(HTTP Long Polling 등)을 지원합니다. 서버와 클라이언트 모두에 사용할 수 있습니다.

설치

npm install socket.io
npm install socket.io-client

서버 예제

// 서버 측 (Node.js)
const io = require('socket.io')(3000);

io.on('connection', socket => {
  console.log('A user connected');
  socket.on('message', msg => {
    console.log('Message received: ' + msg);
    io.emit('message', msg);
  });
});

WebSocket API (MDN Web Docs): WebSocket API
WebSocket Protocol (RFC 6455): WebSocket Protocol

웹 소켓 관련 자바스크립트 라이브러리

Socket.IO

활용 사례:

실시간 채팅 애플리케이션: 다수의 사용자가 동시에 접속하여 실시간으로 메시지를 주고받을 수 있는 채팅 앱.
실시간 협업 도구: 여러 사용자가 동시에 문서나 프로젝트에 협업할 수 있는 애플리케이션.
실시간 알림 시스템: 실시간으로 알림을 전송하여 사용자에게 즉시 알림을 제공하는 시스템.

공식 문서:

Socket.IO 공식 문서

ws

활용 사례:

IoT 데이터 스트리밍: 센서 데이터 등을 실시간으로 스트리밍하여 모니터링하는 시스템.
실시간 게임 서버: 게임 클라이언트와 서버 간의 빠르고 지속적인 통신이 필요한 실시간 멀티플레이어 게임.
주식 거래 플랫폼: 실시간 주가 변동을 사용자에게 실시간으로 제공하는 시스템.

공식 문서:

ws 공식 문서

SockJS

활용 사례:

다양한 네트워크 환경을 지원하는 실시간 애플리케이션: 네트워크 환경에 따라 웹 소켓이 불가능한 경우에도 안정적으로 실시간 통신을 제공.
백엔드와의 실시간 데이터 통신: 다양한 클라이언트와 서버 환경에서 안정적인 실시간 통신을 제공.
채팅 애플리케이션: 네트워크 환경에 상관없이 안정적인 채팅 서비스를 제공.

공식 문서:

SockJS 공식 문서

Server-Sent Events (SSE)

활용 사례:

실시간 대시보드: 서버에서 실시간 데이터를 스트리밍하여 클라이언트 측 대시보드에 실시간 업데이트를 제공.
뉴스 피드 업데이트: 서버에서 실시간으로 새로운 뉴스 기사를 클라이언트에 스트리밍.
주식 시세 스트리밍: 실시간으로 주식 시세 변동을 사용자에게 스트리밍하여 보여주는 시스템.

공식 문서:

MDN SSE 문서

=======

클라이언트 예제

<!-- 클라이언트 측 (HTML 파일) -->
<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io('http://localhost:3000');
  socket.on('message', msg => {
    console.log('Message from server: ' + msg);
  });

  function sendMessage(msg) {
    socket.emit('message', msg);
  }
</script>

2. ws

ws는 Node.js 환경에서 웹 소켓 서버를 쉽게 구축할 수 있게 해주는 단순한 웹 소켓 라이브러리입니다.

설치

npm install ws

서버 예제

// 서버 측 (Node.js)
const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 3000 });

wss.on('connection', ws => {
  console.log('A user connected');
  ws.on('message', message => {
    console.log('Received: ' + message);
    ws.send('Message received: ' + message);
  });
});

클라이언트 예제

<!-- 클라이언트 측 (HTML 파일) -->
<script>
  const socket = new WebSocket('ws://localhost:3000');

  socket.addEventListener('message', event => {
    console.log('Message from server: ' + event.data);
  });

  function sendMessage(msg) {
    socket.send(msg);
  }
</script>

3. SockJS

SockJS는 다양한 브라우저와 네트워크 환경에서 웹 소켓과 호환되는 폴백 옵션을 제공하는 라이브러리입니다.

설치

npm install sockjs

서버 예제

// 서버 측 (Node.js)
const sockjs = require('sockjs');
const http = require('http');

const sockjs_echo = sockjs.createServer();
sockjs_echo.on('connection', conn => {
  conn.on('data', message => {
    conn.write(message);
  });
});

const server = http.createServer();
sockjs_echo.installHandlers(server, {prefix:'/echo'});
server.listen(3000, '0.0.0.0');

클라이언트 예제

<!-- 클라이언트 측 (HTML 파일) -->
<script src="https://cdn.jsdelivr.net/npm/sockjs-client/dist/sockjs.min.js"></script>
<script>
  const socket = new SockJS('http://localhost:3000/echo');

  socket.onopen = function() {
    console.log('Connection opened');
  };

  socket.onmessage = function(e) {
    console.log('Message from server: ' + e.data);
  };

  function sendMessage(msg) {
    socket.send(msg);
  }
</script>

서버-센트 이벤트 (SSE) 예제

서버-센트 이벤트(Server-Sent Events, SSE)는 서버에서 클라이언트로 실시간 데이터를 보내는 방법입니다. 웹 소켓과는 다르게, SSE는 단방향 통신을 위해 사용됩니다. 주로 클라이언트에서 서버로의 요청이 적고 서버에서 클라이언트로의 이벤트 스트림이 많은 경우에 유용합니다.

SSE(Server-Sent Events) 예제

서버 측 (Node.js)

Node.js를 사용하여 SSE 서버를 설정하는 예제입니다.

설치

SSE 서버는 특별한 라이브러리가 필요하지 않지만, Express.js를 사용하면 쉽게 설정할 수 있습니다.

npm install express

서버 코드

const express = require('express');
const app = express();
const port = 3000;

app.get('/events', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  setInterval(() => {
    res.write(`data: ${new Date().toLocaleTimeString()}

`);
  }, 1000);

  req.on('close', () => {
    console.log('Client disconnected');
  });
});

app.listen(port, () => {
  console.log(`SSE server running at http://localhost:${port}/events`);
});

클라이언트 측 (HTML)

클라이언트 측에서 SSE를 수신하는 예제입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SSE Example</title>
</head>
<body>
  <h1>SSE Example</h1>
  <div id="events"></div>

  <script>
    const eventSource = new EventSource('http://localhost:3000/events');

    eventSource.onmessage = function(event) {
      const newElement = document.createElement('div');
      newElement.textContent = 'Server Time: ' + event.data;
      document.getElementById('events').appendChild(newElement);
    };

    eventSource.onerror = function(event) {
      console.error('EventSource failed:', event);
    };
  </script>
</body>
</html>

SSE의 장점과 단점

장점

간편성: 설정 및 사용이 간단합니다.
재연결: 기본적으로 클라이언트가 연결이 끊어지면 자동으로 다시 연결을 시도합니다.
효율적: 텍스트 기반으로 동작하므로 HTTP 헤더 오버헤드가 적습니다.

단점

단방향 통신: 서버에서 클라이언트로만 데이터 전송이 가능하며, 클라이언트에서 서버로 데이터를 보내려면 다른 메커니즘이 필요합니다.
브라우저 호환성: 최신 브라우저는 대부분 지원하지만, 오래된 브라우저는 지원하지 않을 수 있습니다.
방화벽 및 프록시 문제: 일부 네트워크 환경에서 HTTP 연결을 유지하는 것이 어려울 수 있습니다.