자바스크립트를 활용한 실시간 채팅 애플리케이션

13 Oct 2023

javascript

이번 기술 블로그에서는 자바스크립트를 사용하여 실시간 채팅 애플리케이션을 만드는 방법에 대해 알아보겠습니다. 실시간 채팅은 사용자 간에 실시간으로 메시지를 주고받을 수 있는 기능을 제공하는 애플리케이션입니다. 이를 위해 웹 소켓을 사용하여 서버와 클라이언트 간에 양방향 통신을 구현할 것입니다.

웹 소켓(Web Socket)이란?

웹 소켓은 브라우저와 서버 간의 양방향 실시간 통신을 제공하는 프로토콜입니다. 이전에는 HTTP 프로토콜을 통해 클라이언트가 서버에 요청을 보내고, 서버는 요청에 대한 응답을 보내는 방식으로 통신했지만, 웹 소켓은 클라이언트와 서버 간에 지속적인 연결을 유지하고 양방향으로 데이터를 주고받을 수 있습니다.

실시간 채팅 애플리케이션 구현 과정

HTML과 CSS 작성: 먼저 채팅 화면의 UI를 구성하기 위해 HTML과 CSS를 작성합니다. 채팅창, 메시지 입력창 등 필요한 요소들을 디자인합니다.

<!DOCTYPE html>
<html>
<head>
  <title>실시간 채팅 애플리케이션</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div id="chat-container">
    <div id="chat-messages"></div>
    <input type="text" id="message-input" placeholder="메시지를 입력하세요">
    <button id="send-button">전송</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

클라이언트 측 스크립트: 웹 소켓을 사용하여 클라이언트 측에 실시간 통신을 구현하는 스크립트를 작성합니다. 클라이언트는 서버와의 웹 소켓 연결을 생성하고, 사용자로부터 입력받은 메시지를 서버로 보내고, 서버로부터 수신된 메시지를 화면에 표시해줍니다.

const chatContainer = document.getElementById('chat-container');
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-button');
const chatMessages = document.getElementById('chat-messages');

// 웹 소켓 연결 생성
const webSocket = new WebSocket('ws://localhost:3000');

// 연결이 수립되었을 때
webSocket.onopen = function() {
  // 메시지 전송
  sendButton.addEventListener('click', function() {
    const message = messageInput.value;
    webSocket.send(message);
    messageInput.value = '';
  });

  // 메시지 수신
  webSocket.onmessage = function(event) {
    const message = event.data;
    const messageElement = document.createElement('div');
    messageElement.textContent = message;
    chatMessages.appendChild(messageElement);
  };
};

서버 측 스크립트: 웹 소켓 서버를 구현하기 위해 서버 측 스크립트를 작성합니다. 서버는 클라이언트로부터 메시지를 수신하고, 수신된 메시지를 다른 클라이언트들에게 전송합니다.

const http = require('http');
const WebSocketServer = require('websocket').server;

// HTTP 서버 생성
const server = http.createServer(function(request, response) {
  // ...
});
server.listen(3000);

// WebSocket 서버 생성
const wsServer = new WebSocketServer({
  httpServer: server
});

// 클라이언트 요청이 들어왔을 때
wsServer.on('request', function(request) {
  const connection = request.accept(null, request.origin);

  // 메시지 수신
  connection.on('message', function(message) {
    const messageText = message.utf8Data;

    // 모든 클라이언트에게 메시지 전송
    wsServer.connections.forEach(function(client) {
      client.sendUTF(messageText);
    });
  });
});

마무리

위의 과정을 따라하면 간단한 실시간 채팅 애플리케이션을 구현할 수 있습니다. 웹 소켓을 사용하여 양방향 통신을 구현하고, 클라이언트와 서버 간에 메시지를 주고받을 수 있습니다.

이를 기반으로 더 다양한 기능을 추가하거나 UI를 개선할 수 있으며, 라이브러리나 프레임워크를 활용하여 보다 편리하게 개발할 수도 있습니다. 자바스크립트를 활용한 실시간 채팅 애플리케이션을 개발해보고, 다양한 기술을 응용하여 독특하고 효과적인 사용자 경험을 제공해보세요!

#자바스크립트 #실시간채팅