[javascript] Express.js에서의 웹소켓 채팅 구현 방법

04 Dec 2023

javascript

웹소켓은 실시간 통신을 위해 사용되는 프로토콜입니다. Express.js는 Node.js를 위한 웹 애플리케이션 프레임워크로, 웹 서버를 구성하고 라우팅을 처리하는 데 사용됩니다. 여기에서는 Express.js를 사용하여 웹소켓 채팅을 구현하는 방법을 살펴보겠습니다.

웹소켓 라이브러리 설치

Express.js에서 웹소켓을 사용하기 위해서는 ws 패키지를 설치해야 합니다. 아래 명령을 사용하여 ws 패키지를 설치합니다.

npm install ws

Express.js 앱 작성

const express = require('express');
const WebSocket = require('ws');

const app = express();
const server = app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

// 웹소켓 서버 생성
const wss = new WebSocket.Server({ server });

// 클라이언트 연결 이벤트 처리
wss.on('connection', (ws) => {
  console.log('Client connected');

  // 클라이언트로부터 메시지 수신 이벤트 처리
  ws.on('message', (message) => {
    console.log('Received message:', message);

    // 모든 클라이언트에게 메시지 전송
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

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

위의 코드는 Express.js 앱을 작성하고 웹소켓 서버를 생성하는 코드입니다. 클라이언트 연결 이벤트에서는 클라이언트로부터 메시지를 수신하고, 해당 메시지를 모든 클라이언트에게 전송하는 코드를 작성했습니다.

웹소켓 채팅 클라이언트 작성

웹소켓 채팅을 사용하기 위해서는 클라이언트도 구현해야 합니다. 웹 브라우저에서 사용할 수 있는 WebSocket 객체를 사용하여 클라이언트를 작성할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>WebSocket Chat</title>
</head>
<body>
  <h1>WebSocket Chat</h1>

  <input id="message-input" type="text" placeholder="메시지를 입력하세요">
  <button id="send-button">전송</button>

  <ul id="message-list"></ul>

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

    const messageInput = document.getElementById('message-input');
    const sendButton = document.getElementById('send-button');
    const messageList = document.getElementById('message-list');

    // 서버로부터 메시지 수신 이벤트 처리
    socket.addEventListener('message', (event) => {
      const message = event.data;
      const listItem = document.createElement('li');
      listItem.textContent = message;
      messageList.appendChild(listItem);
    });

    // 전송 버튼 클릭 이벤트 처리
    sendButton.addEventListener('click', () => {
      const message = messageInput.value;
      socket.send(message);
      messageInput.value = '';
    });
  </script>
</body>
</html>

위의 코드는 웹소켓 채팅 클라이언트를 작성한 HTML 파일입니다. 웹소켓을 사용하여 서버에 연결하고, 메시지 수신 및 전송 이벤트를 처리하도록 구현되어 있습니다. 서버의 IP 주소와 포트 번호를 올바르게 설정해야 합니다.

실행 및 테스트

Express.js 앱을 실행하려면 터미널에서 다음 명령을 실행합니다.

node app.js

웹 브라우저에서 클라이언트를 엽니다. http://localhost:3000을 입력하여 접속할 수 있습니다.
여러 개의 클라이언트를 실행하여 서로 대화를 나눌 수 있습니다. 메시지 입력 후 전송 버튼을 클릭하면 메시지가 서로에게 전송됩니다.

위의 방법을 통해 Express.js에서 웹소켓 채팅을 구현할 수 있습니다. Express.js의 간편한 웹 애플리케이션 프레임워크와 웹소켓을 조합하여 실시간 통신 기능을 손쉽게 구현할 수 있습니다.

웹소켓 라이브러리 설치

Express.js 앱 작성

웹소켓 채팅 클라이언트 작성

실행 및 테스트

참고 자료