Colin's Blog
Promise를 활용한 실시간 채팅 기능 구현

실시간 채팅 기능은 웹 애플리케이션에서 사용자들이 실시간으로 메시지를 주고받을 수 있는 기능입니다. 이 기능은 Promise를 활용하여 구현할 수 있습니다. 이번 포스트에서는 Promise를 사용하여 실시간 채팅 기능을 구현하는 방법에 대해 알아보겠습니다.

1. Socket.io 설치

먼저, 실시간 통신을 위해 Socket.io를 설치해야 합니다. Socket.io는 Node.js 기반의 실시간 통신을 위한 라이브러리로서, 클라이언트와 서버 간 실시간 메시지 전송을 가능하게 합니다. 다음 명령어를 실행하여 Socket.io를 설치합니다.

npm install socket.io

2. 서버 설정

Socket.io를 사용하기 위해 서버를 설정해야 합니다. 먼저, Node.js 서버 파일을 생성하고 다음과 같이 Socket.io를 초기화합니다.

const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);

// 서버 포트 설정
const port = 3000;

// 클라이언트가 연결될 때 이벤트 리스너 등록
io.on('connection', (socket) => {
  console.log('a user connected');

  // 클라이언트로부터 메시지를 받았을 때 이벤트 리스너 등록
  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);

    // 받은 메시지를 모든 클라이언트에게 전송
    io.emit('chat message', msg);
  });

  // 클라이언트가 연결을 끊었을 때 이벤트 리스너 등록
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

// 서버 시작
http.listen(port, () => {
  console.log('listening on *:' + port);
});

위 코드에서는 Socket.io를 사용하여 클라이언트가 서버에 연결될 때, 메시지를 받을 때, 연결이 끊어질 때 각각 이벤트 리스너를 등록하고 있습니다.

3. 클라이언트 설정

클라이언트 측에서도 Socket.io를 초기화해야 합니다. HTML 파일에 다음과 같은 스크립트를 추가하여 Socket.io를 사용할 준비를 합니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Real-time Chat</title>
  </head>
  <body>
    <ul id="messages"></ul>
    <form id="chat-form">
      <input id="chat-input" autocomplete="off" />
      <button>Send</button>
    </form>

    <script src="/socket.io/socket.io.js"></script>
    <script>
      // 서버에 소켓 연결
      const socket = io();

      // 메시지를 받았을 때 이벤트 리스너 등록
      socket.on('chat message', (msg) => {
        const li = document.createElement('li');
        li.textContent = msg;
        document.getElementById('messages').appendChild(li);
      });

      // 폼 제출 시 메시지를 서버로 전송
      document.getElementById('chat-form').addEventListener('submit', (e) => {
        e.preventDefault();
        const msg = document.getElementById('chat-input').value;
        socket.emit('chat message', msg);
        document.getElementById('chat-input').value = '';
      });
    </script>
  </body>
</html>

위 스크립트는 서버에 소켓을 연결하고, 메시지를 받을 때마다 채팅 창에 표시하는 기능을 구현합니다. 또한, 사용자가 메시지를 입력하고 전송 버튼을 클릭하면 서버로 메시지를 전송합니다.

4. 실행

이제 서버와 클라이언트가 준비되었으므로, 서버를 시작하고 웹 애플리케이션에 접속하여 실시간 채팅을 테스트할 수 있습니다. 다음 명령어를 통해 서버를 실행합니다.

node server.js

웹 브라우저에서 http://localhost:3000에 접속하면 실시간 채팅 창이 표시되고, 여러 사용자 간에 실시간으로 메시지를 주고받을 수 있습니다.

마무리

위에서 설명한 방법을 통해 Promise를 활용하여 실시간 채팅 기능을 구현할 수 있습니다. Socket.io를 사용하면 클라이언트와 서버 간의 양방향 통신을 쉽게 구현할 수 있으며, 메시지를 실시간으로 전송할 수 있습니다. 이를 통해 웹 애플리케이션에서 실시간 채팅 기능을 구현하는데 도움이 되었기를 바랍니다.

#RealTimeChat #SocketIO

© 2018 Colin. All rights reserved.