최신 웹 애플리케이션에는 채팅 시스템, 실시간 업데이트, 공동 편집, 알림 등 실시간 통신이 필요한 경우가 많습니다. 기존 HTTP 통신은 요청-응답 패턴에 의존하기 때문에 실시간 애플리케이션에는 충분하지 않습니다. 여기서는 웹소켓이 작동하여 서버와 클라이언트 간의 전이중 통신을 허용합니다.

이 도움말에서는 다음을 살펴보겠습니다.

1. WebSocket이 무엇이며 실시간 애플리케이션에 필수적인 이유는 무엇입니까?
2. Node.js에서 WebSocket을 구현하는 방법
3. Socket.IO를 사용하여 WebSocket 구현을 단순화합니다.
4. 실제 사용 사례의 예

WebSocket이란 무엇입니까?

WebSocket은 단일 TCP 연결을 통해 전이중 통신 채널을 제공하는 프로토콜입니다. 요청-응답 기반이고 지속적으로 새로운 연결을 설정하는 데 오버헤드가 있는 기존 HTTP 요청과 달리 WebSocket은 지속적인 통신

주요 특징:

• 전이중 통신: 클라이언트와 서버 모두 서로 기다리지 않고 언제든지 메시지를 보낼 수 있습니다.
• 낮은 지연 시간: WebSocket은 지속적으로 연결을 열고 닫을 필요성을 제거하여 지연 시간을 줄이고 실시간 앱의 성능을 향상시킵니다.
• 이벤트 기반: 양쪽에서 데이터를 푸시할 수 있으므로 채팅, 게임 또는 실시간 알림과 같은 동적 애플리케이션에 이상적입니다.

Node.js에서 WebSocket 구현

1단계: ws WebSocket 라이브러리 설치

Node.js에는 WebSocket이 내장되어 있지 않으므로 라이브러리가 필요합니다. Node.js용으로 가장 인기 있는 WebSocket 라이브러리 중 하나는 ws.
입니다.

npm install ws

2단계: WebSocket 서버 생성

다음은 ws 라이브러리를 사용하는 간단한 WebSocket 서버입니다.

const WebSocket = require('ws');

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

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

    // Listen for messages from the client
    ws.on('message', (message) => {
        console.log('Received:', message);
        // Respond to the client
        ws.send(`Hello, you sent -> ${message}`);
    });

    // On client disconnect
    ws.on('close', () => {
        console.log('Client disconnected');
    });
});

console.log('WebSocket server running on ws://localhost:8080');

이 예에서는:

• 포트 8080에 WebSocket 서버를 생성합니다.
• 클라이언트가 연결되면 연결 이벤트가 트리거됩니다.
• 서버는 클라이언트의 메시지를 듣고 확인 메시지로 응답합니다.
• 클라이언트의 연결이 끊어지면 메시지가 기록됩니다.

3단계: WebSocket 클라이언트 생성

브라우저에서 JavaScript를 사용하여 WebSocket 클라이언트를 생성할 수 있습니다.

    
WebSocket Example
    Send Message
    

• WebSocket 연결이 열리면 클라이언트는 성공 메시지를 기록합니다.
• 버튼을 클릭하면 서버로 메시지가 전송되고, 서버의 응답이 표시됩니다.

산출:

1. 클라이언트 로그:

   Connected to WebSocket server
   Message from server: Hello, you sent -> Hello from client

1. 서버 로그:

   Client connected
   Received: Hello from client

Socket.IO: 단순화된 WebSocket

WebSocket은 강력하지만 재연결, 브로드캐스팅, 폴백 관리(예: 긴 폴링)와 같은 이벤트를 처리하려면 일부 수동 작업이 필요합니다. Socket.IO는 다음과 같은 기능을 제공하여 실시간 통신을 단순화합니다.

• 자동으로 다시 연결됩니다.
• 여러 고객에게 이벤트를 방송합니다.
• WebSocket이 지원되지 않는 경우 폴링으로 대체됩니다.

1단계: Socket.IO 설치

npm install socket.io

2단계: Socket.IO 서버 생성

const http = require('http');
const socketio = require('socket.io');

// Create an HTTP server
const server = http.createServer();
const io = socketio(server);

io.on('connection', (socket) => {
    console.log('Client connected');

    // Listen for messages from the client
    socket.on('message', (msg) => {
        console.log('Received message:', msg);
        socket.emit('message', `Server received: ${msg}`);
    });

    // On client disconnect
    socket.on('disconnect', () => {
        console.log('Client disconnected');
    });
});

server.listen(3000, () => {
    console.log('Socket.IO server running on http://localhost:3000');
});

여기:

• Socket.IO를 사용하여 연결 및 수신 메시지를 수신하는 서버를 만듭니다.
• Socket.emit은 클라이언트에게 메시지를 다시 보내는 데 사용됩니다.

3단계: Socket.IO 클라이언트 생성

    
Socket.IO Example
    Send Message
    

이 예에서 Socket.IO 클라이언트는 서버에 대한 연결을 자동으로 처리하고 양방향 통신을 허용합니다.

산출:

1. 클라이언트 로그:

   Connected to server
   Message from server: Server received: Hello from client

1. 서버 로그:

   Client connected
   Received message: Hello from client

WebSocket 및 Socket.IO 사용 사례

4.1 실시간 채팅 애플리케이션

문제: 메시징 플랫폼은 사용자 간의 실시간 커뮤니케이션을 지원해야 합니다.

해결책: WebSocket(또는 Socket.IO)은 이벤트 중심의 지속적인 연결을 제공하여 사용자가 지연 없이 실시간으로 메시지를 보내고 받을 수 있도록 합니다.

4.2 실시간 공동 문서 편집

문제: 문서에서 공동 작업하는 사용자는 다른 사람이 변경한 내용을 즉시 확인해야 합니다.

해결책: WebSocket을 사용하면 변경 사항이 실시간으로 모든 클라이언트에 푸시되어 문서가 모든 사용자 간에 동기화된 상태로 유지됩니다.

4.3 웹 애플리케이션의 알림

문제: 웹 애플리케이션은 사용자에게 새 메시지, 업데이트 또는 경고와 같은 이벤트를 알려야 합니다.

해결책: WebSocket을 사용하면 이벤트가 발생하는 즉시 서버가 클라이언트에 알림을 푸시하여 사용자 참여를 높일 수 있습니다.

WebSocket 및 Socket.IO 확장

WebSocket과 Socket.IO를 확장하는 것은 지속적인 특성으로 인해 어렵습니다. 각 WebSocket 연결은 수명이 긴 TCP 연결이므로 연결 수가 증가하면 리소스 집약적일 수 있습니다.

확장을 위한 일반적인 전략:

1. 수평 확장: 여러 서버에 걸쳐 WebSocket 트래픽의 부하를 분산합니다.
2. 고정 세션: 클라이언트의 모든 WebSocket 연결이 동일한 서버로 라우팅되는지 확인합니다.
3. Pub/Sub용 Redis: 서버 전체의 이벤트 게시 및 구독에 Redis를 사용하여 모든 클라이언트가 실시간 업데이트를 받을 수 있도록 합니다.

npm install socket.io-redis

다음은 Redis를 사용하도록 Socket.IO를 구성하는 예입니다.

const io = require('socket.io')(server);
const redisAdapter = require('socket.io-redis');
io.adapter(redisAdapter({ host: 'localhost', port: 6379 }));

결론

WebSocket과 Socket.IO는 최신 웹 애플리케이션의 실시간 통신을 위한 필수 기술입니다. WebSocket은 전이중 통신을 위한 낮은 수준의 프로토콜을 제공하는 반면, Socket.IO는 자동 재연결 및 브로드캐스팅과 같은 추가 기능을 제공하여 구현을 단순화합니다. 두 기술 모두 채팅 애플리케이션부터 협업 도구에 이르기까지 중요한 실제 애플리케이션을 갖추고 있습니다.

다음 글에서는 Node.js Streams에 대해 자세히 알아보고 확장성과 성능에 중점을 두고 대용량 데이터를 효율적으로 처리하는 방법을 살펴보겠습니다.