자바스크립트 웹 소켓을 활용한 채팅 기능

10 Sep 2023

javascript

자바스크립트를 사용하여 웹 애플리케이션에 실시간 채팅 기능을 추가하는 방법을 알아보겠습니다. 이를 위해 웹 소켓 (WebSocket) 프로토콜을 사용하겠습니다. 웹 소켓은 사용자의 웹 브라우저와 서버 간에 양방향 통신을 제공하는 기술입니다.

웹 소켓의 기본 개념

웹 소켓은 실시간 통신을 위한 프로토콜로, 클라이언트와 서버 간 소켓 연결을 유지합니다.
웹 소켓을 사용하면 클라이언트와 서버 간에 양방향 통신이 가능하며, 실시간으로 데이터를 주고받을 수 있습니다.
클라이언트의 웹 브라우저는 웹 소켓 연결을 열고, 서버는 클라이언트와 소켓 연결을 유지하며 메시지를 주고받습니다.

웹 소켓 채팅 구현 절차

클라이언트의 웹 브라우저에서 웹 소켓 연결을 엽니다.
서버는 클라이언트가 연결되었음을 인식하고, 클라이언트를 소켓 연결에 추가합니다.
클라이언트가 채팅 메시지를 입력하면, 메시지를 서버에 전송합니다.
서버는 받은 메시지를 다른 모든 클라이언트에게 전달합니다.
서버에서 받은 메시지를 클라이언트의 웹 브라우저에서 표시합니다.

예제 코드

아래는 웹 소켓을 사용하여 채팅 기능을 구현한 예제 코드입니다. 이 예제 코드는 클라이언트와 서버간의 간단한 채팅을 할 수 있는 기능을 제공합니다.

// 클라이언트 측 코드

const socket = new WebSocket('ws://localhost:3000'); // 서버의 웹 소켓 주소에 연결

socket.addEventListener('open', () => {
  console.log('연결이 열렸습니다.');

  // 메시지 전송 예시
  const message = {
    user: 'John',
    content: 'Hello, World!'
  };
  socket.send(JSON.stringify(message));
});

socket.addEventListener('message', (event) => {
  console.log('새로운 메시지가 도착했습니다:', event.data);

  // 메시지 처리 예시
  const message = JSON.parse(event.data);
  console.log('받은 메시지:', message.user, message.content);
});

// 서버 측 코드

const WebSocket = require('ws');

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

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

  ws.on('message', (message) => {
    console.log('새로운 메시지가 도착했습니다:', message);

    // 메시지 전달 예시
    wss.clients.forEach((client) => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

위의 예제 코드에서는 클라이언트는 ws://localhost:3000 주소로 서버에 웹 소켓 연결을 엽니다. 서버는 3000 포트로 웹 소켓을 열어 클라이언트의 연결을 기다립니다. 클라이언트는 연결이 열리면 “Hello, World!” 메시지를 보내고, 서버는 이 메시지를 모든 클라이언트에게 전달합니다.

이와 같은 방식으로 자바스크립트 웹 소켓을 활용하여 채팅 기능을 구현할 수 있습니다. 추가적인 기능이나 보안을 고려해야 하는 경우, 실제 프로덕션 환경에 맞게 수정 및 보완해야 합니다.