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

웹 소켓은 실시간 양방향 통신을 제공하는 HTML5 기술입니다. 이를 활용하여 웹 애플리케이션에 채팅 기능을 추가할 수 있습니다. 자바스크립트를 사용하여 웹 소켓을 구현하고, 이를 통해 실시간으로 메시지를 주고받는 간단한 채팅 기능을 만들어보겠습니다.

1. 웹 소켓 서버 구성하기

먼저, 웹 소켓 서버를 구성해야 합니다. 이 예제에서는 ws 모듈을 사용하여 간단한 웹 소켓 서버를 구축할 것입니다. 다음은 서버를 구성하는 코드입니다.

const WebSocket = require('ws');

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

wss.on('connection', (ws) => {
  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');
  });
});

위의 코드에서는 ws 모듈을 가져와 WebSocket.Server 인스턴스를 생성합니다. 이 인스턴스를 사용하여 클라이언트와의 웹 소켓 연결을 수립하고, 메시지를 주고받습니다. 연결이 수립되었을 때, 메시지가 도착하면 wss.clients를 통해 모든 클라이언트에게 메시지를 전송합니다. 클라이언트가 연결을 끊었을 때는 close 이벤트 핸들러에서 관련 로직을 처리할 수 있습니다.

2. 클라이언트 측 구성하기

다음으로, 클라이언트 측에서 웹 소켓을 사용하여 서버와 연결하고 메시지를 주고받는 기능을 구현해야 합니다. 아래는 클라이언트 측 코드의 예입니다.

const socket = new WebSocket('ws://localhost:8080');

// 웹 소켓이 연결되었을 때
socket.onopen = () => {
  console.log('Connected to WebSocket server');
};

// 웹 소켓으로부터 메시지를 받았을 때
socket.onmessage = (event) => {
  const message = event.data;
  console.log(`Received message: ${message}`);
};

// 웹 소켓이 닫혔을 때
socket.onclose = () => {
  console.log('Disconnected from WebSocket server');
};

// 메시지를 서버로 보낼 때
function sendMessage(message) {
  socket.send(message);
}

위의 코드에서는 WebSocket 생성자를 통해 서버와의 웹 소켓 연결을 수립합니다. 연결이 성공적으로 이루어졌을 때, open 이벤트 핸들러에서 연결 성공 메시지를 출력합니다. 메시지를 받았을 때는 message 이벤트 핸들러에서 해당 메시지를 출력합니다. 웹 소켓 연결이 종료되었을 때는 close 이벤트 핸들러에서 연결 종료 메시지를 출력합니다. 마지막으로 sendMessage 함수를 통해 서버로 메시지를 보낼 수 있습니다.

3. 채팅 인터페이스 구성하기

마지막으로, 채팅 인터페이스를 구성해야 합니다. 이 예제에서는 간단한 HTML과 CSS를 사용하여 채팅창과 입력란을 만들고, 자바스크립트를 통해 메시지를 전송하고 받도록 구현합니다. 아래는 채팅 인터페이스를 구성하는 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    .chatbox {
      height: 300px;
      overflow-y: scroll;
    }
  </style>
</head>
<body>
  <div id="chatbox" class="chatbox"></div>
  <input type="text" id="messageInput" />
  <button onclick="sendMessage()">Send</button>

  <script>
    const chatbox = document.getElementById('chatbox');
    const messageInput = document.getElementById('messageInput');

    // 웹 소켓 생성
    const socket = new WebSocket('ws://localhost:8080');

    // 웹 소켓 이벤트 처리
    socket.onopen = () => {
      console.log('Connected to WebSocket server');
    };

    socket.onmessage = (event) => {
      const message = event.data;
      const messageElement = document.createElement('p');
      messageElement.textContent = message;
      chatbox.appendChild(messageElement);
    };

    socket.onclose = () => {
      console.log('Disconnected from WebSocket server');
    };

    // 메시지 전송
    function sendMessage() {
      const message = messageInput.value;
      if (message !== '') {
        socket.send(message);
        messageInput.value = '';
      }
    }
  </script>
</body>
</html>

채팅 인터페이스에서는 chatbox라는 div 요소를 사용하여 채팅 내용을 표시합니다. 메시지를 입력하는 입력란과 전송 버튼도 마찬가지로 HTML 요소로 구성합니다. 자바스크립트에서는 이러한 요소들을 가져와 이벤트를 처리하고, 서버로부터 받은 메시지를 chatbox에 추가하여 실시간으로 표시합니다. 또한, 메시지를 입력하고 전송 버튼을 클릭하면 해당 메시지를 서버로 전송합니다.

이렇게 구현된 자바스크립트 웹 소켓을 활용한 채팅 기능을 통해 실시간으로 메시지를 주고받을 수 있습니다. 이 예제를 기반으로 더 다양한 기능을 추가하여 채팅 애플리케이션을 더욱 풍부하게 만들어볼 수 있습니다.

© 2018 Colin. All rights reserved.