Node.js WebSockets 사용법: 실시간 통신 구현하기

작성일 : 2024-07-20

Node.js WebSockets 사용법: 실시간 통신 구현하기

웹 애플리케이션이 발전함에 따라 사용자에게 실시간으로 데이터를 제공하는 것이 중요해졌습니다. 그 중 하나의 방법이 바로 WebSockets를 이용한 통신입니다. 이 글에서는 Node.js를 사용하여 WebSockets를 설정하고, 간단한 실시간 챗 애플리케이션을 구현하는 방법에 대해 설명하겠습니다.

WebSocket이란?

WebSocket은 웹 클라이언트와 서버 간의 양방향 통신을 가능하게 하는 프로토콜입니다. 이는 HTTP와는 달리, 클라이언트와 서버가 지속적인 연결을 유지하며 데이터를 주고받을 수 있도록 합니다. 이러한 특성 덕분에 채팅 애플리케이션, 실시간 알림 시스템, 주식 시세 업데이트 등 다양한 분야에서 활용됩니다.

Node.js와 WebSockets 설정하기

Node.js에서 WebSockets를 사용하려면 기본적으로 ws 모듈을 사용합니다. 이 모듈은 WebSocket 기능을 구현하는 데 필요한 모든 기능을 제공합니다. 다음은 ws 모듈을 설치하고 기본 설정을 완료하는 단계입니다.

1. 프로젝트 생성과 모듈 설치

먼저 새로운 Node.js 프로젝트를 생성하고 ws 모듈을 설치합니다.


bash
mkdir websocket-demo
cd websocket-demo
npm init -y
npm install ws

2. 기본 WebSocket 서버 설정

이제 WebSocket 서버 파일을 생성하여 기본 설정을 합니다. server.js 파일을 생성하고 다음과 같이 작성합니다.


javascript
const WebSocket = require('ws');

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

server.on('connection', (ws) => {
  console.log('A new client connected');

  ws.on('message', (message) => {
    console.log('Received: %s', message);

    // Echo the message back to the client
    ws.send(`You said: ${message}`);
  });

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

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

위 코드에서는 포트 8080에서 WebSocket 서버를 시작합니다. 클라이언트가 연결되면 메시지를 받기 위한 이벤트 리스너를 설정하고, 받은 메시지를 콘솔에 출력한 후 다시 클라이언트로 에코합니다.

간단한 실시간 챗 애플리케이션 만들기

이번 섹션에서는 Node.js와 WebSockets를 이용한 간단한 채팅 애플리케이션을 만들어 보겠습니다. 클라이언트는 HTML과 JavaScript로 구성되며, 서버는 앞서 작성한 WebSocket 서버를 사용합니다.

1. HTML 클라이언트 파일 생성

index.html 파일을 생성하고 다음과 같이 작성합니다.


html
<!DOCTYPE html>
<html lang=