Express 개발 강좌, 웹소켓을 활용한 실시간 애플리케이션 예제

웹 개발의 발전에 따라 사용자는 점점 더 실시간으로 상호작용하는 웹 애플리케이션을 기대하게 되었습니다. 이러한 요구를 충족시키기 위해 웹소켓(WebSocket) 프로토콜은 필수적인 요소로 자리잡았습니다. 이 글에서는 Node.js의 Express 프레임워크와 웹소켓을 사용하여 실시간 애플리케이션을 만드는 방법에 대해 자세히 알아보겠습니다.

웹소켓이란?

웹소켓은 클라이언트와 서버 간의 전이중(Full-Duplex) 통신을 가능하게 하는 프로토콜입니다. 이는 HTTP 요청/응답 모델에 비해 효율적이며, 특히 실시간 데이터 전송이 필요한 애플리케이션에서 유용합니다. 웹소켓을 사용하면 클라이언트와 서버 간의 연결이 지속적으로 유지되며, 데이터가 필요할 때마다 연결을 설정할 필요가 없습니다.

웹소켓의 주요 특징

  • 전이중 통신 지원: 클라이언트와 서버가 동시에 데이터를 전송할 수 있습니다.
  • 낮은 레이턴시: 빠른 데이터 전송이 가능하여 실시간 애플리케이션에 적합합니다.
  • 효율적인 리소스 사용: HTTP 프로토콜에 비해 적은 리소스를 사용합니다.

Express와 웹소켓으로 실시간 애플리케이션 만들기

이제 Express와 ws 라이브러리를 사용하여 간단한 실시간 애플리케이션을 만들어 보겠습니다. 이번 예제에서는 사용자가 입력한 메시지를 실시간으로 다른 사용자에게 전송하는 채팅 애플리케이션을 개발할 것입니다.

1. 프로젝트 설정하기

bash
mkdir websocket-chat
cd websocket-chat
npm init -y
npm install express ws

2. 서버 코드 작성하기

디렉토리 내에 server.js 파일을 생성하고 다음 코드를 입력합니다:

javascript
const express = require('express');
const http = require('http');
const WebSocket = require('ws');
const path = require('path');

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

// 정적 파일 제공
app.use(express.static(path.join(__dirname, 'public')));

// 클라이언트 연결 이벤트
wss.on('connection', (ws) => {
    console.log('새로운 클라이언트가 연결되었습니다.');

    // 클라이언트로부터 메시지를 받을 때
    ws.on('message', (message) => {
        console.log(`받은 메시지: ${message}`);
        
        // 모든 클라이언트에게 메시지 전송
        wss.clients.forEach((client) => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });

    // 클라이언트 연결 종료 이벤트
    ws.on('close', () => {
        console.log('클라이언트가 연결을 종료했습니다.');
    });
});

// 서버 포트 설정
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
    console.log(`서버가 http://localhost:${PORT} 에서 실행 중입니다.`);
});

3. 클라이언트 코드 작성하기

이제 public 디렉토리를 생성하고 그 안에 index.html 파일을 추가합니다. 다음과 같은 코드로 클라이언트를 작성합니다:

html




    
    
    웹소켓 채팅
    


    
웹소켓 채팅 애플리케이션

    4. 애플리케이션 실행하기

    이제 서버를 실행해 보겠습니다. 터미널에 다음 명령어를 입력하여 서버를 시작합니다:

    bash
node server.js

    서버가 성공적으로 실행되면 브라우저에서 http://localhost:3000로 이동해보세요. 여러 개의 브라우저 탭을 열고 메시지를 입력하면 실시간으로 서로의 메시지를 확인할 수 있습니다.

    코드 분석

    서버 코드 분석

    서버 코드는 Express 서버를 설정하고, 웹소켓 서버를 구성하여 메시지를 처리하는 부분이 포함되어 있습니다. 주요 기능은 다음과 같습니다:

    • Express와 WS 설치: Express는 HTTP 서버를 구성하고, WebSocket은 실시간 통신을 지원합니다.
    • 정적 파일 제공: app.use(express.static(...))를 사용하여 public 폴더의 정적 파일을 제공합니다.
    • 클라이언트 연결 이벤트: 웹소켓 서버에 새로운 클라이언트가 연결되면 connection 이벤트가 발생합니다.
    • 메시지 처리: 클라이언트로부터 메시지를 받으면, 이를 다른 모든 클라이언트에게 전송합니다.

    클라이언트 코드 분석

    클라이언트 코드에서는 웹소켓 서버에 연결하고, 사용자 입력을 처리하여 서버로 메시지를 전송하는 기능을 구현합니다. 주요 부분은 다음과 같습니다:

    • 웹소켓 연결: new WebSocket('ws://localhost:3000');를 통해 서버에 연결합니다.
    • 서버로부터 메시지 수신: socket.addEventListener(...)로 서버에서 수신한 메시지를 처리합니다.
    • 사용자 입력 전송: 사용자 입력이 있을 때마다 서버로 메시지를 전송합니다.

    추가 기능 및 확장

    이번 예제에서는 간단한 채팅 기능만을 구현하였습니다. 하지만 여기서 더 나아가 다양한 기능을 추가할 수 있습니다:

    • 사용자 인증: 사용자 ID나 닉네임을 통해 각 사용자를 식별할 수 있습니다.
    • 메시지 저장: Redis나 MongoDB와 같은 데이터베이스를 사용하여 메시지를 저장하고, 사용자가 재접속했을 때 이전 메시지를 불러오는 기능을 구현할 수 있습니다.
    • 더 복잡한 UI: React, Vue.js 또는 Angular와 같은 프론트엔드 프레임워크를 사용하여 더 직관적인 사용자 인터페이스를 만들 수 있습니다.

    결론

    이번 강좌에서는 Express와 웹소켓을 사용하여 간단한 채팅 애플리케이션을 구현했습니다. 웹소켓을 통해 실시간으로 데이터를 주고받을 수 있는 가능성을 확인할 수 있었습니다. 이를 기반으로 다양한 실시간 애플리케이션을 개발할 수 있으니, 여러분도 자신의 아이디어를 구현해 보세요!