본문 바로가기
JavaScript 프로젝트 시리즈

[JavaScript 프로젝트 시리즈] 5일차: JavaScript로 간단한 채팅 애플리케이션 만들기

by cogito30 2024. 8. 5.
반응형

5. 간단한 채팅 애플리케이션 개발

프로젝트 개요

이번 프로젝트에서는 JavaScript와 웹소켓(WebSocket)을 사용하여 간단한 채팅 애플리케이션을 만들어보겠습니다. 사용자는 실시간으로 메시지를 주고받을 수 있습니다.

준비물

  • HTML
  • CSS
  • JavaScript
  • WebSocket 서버

단계 1: 기본 HTML 구조 만들기

먼저, 채팅 애플리케이션의 기본 HTML 구조를 만듭니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chat App</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Chat App</h1>
    <div id="chat-window">
      <ul id="messages"></ul>
    </div>
    <form id="message-form">
      <input type="text" id="message-input" placeholder="Type a message" autocomplete="off">
      <button type="submit">Send</button>
    </form>
  </div>
  <script src="script.js"></script>
</body>
</html>

단계 2: 기본 CSS 스타일링

채팅 애플리케이션의 기본 스타일을 정의합니다.

/* styles.css */
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.container {
  width: 100%;
  max-width: 500px;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
}

#chat-window {
  height: 300px;
  border: 1px solid #ccc;
  padding: 10px;
  overflow-y: scroll;
  margin-bottom: 10px;
}

#messages {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#messages li {
  padding: 5px;
  border-bottom: 1px solid #eee;
}

form {
  display: flex;
  justify-content: space-between;
}

input[type="text"] {
  flex-grow: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 10px;
}

button {
  padding: 10px;
  border: none;
  background-color: #007bff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

단계 3: WebSocket 서버 준비

간단한 WebSocket 서버를 Node.js를 사용하여 구현합니다. 먼저, ws 패키지를 설치해야 합니다.

npm install ws

서버 코드를 작성합니다.

// server.js
const WebSocket = require('ws');

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

server.on('connection', socket => {
  console.log('Client connected');

  socket.on('message', message => {
    console.log(`Received: ${message}`);
    server.clients.forEach(client => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  socket.on('close', () => {
    console.log('Client disconnected');
  });
});

단계 4: JavaScript로 기능 구현하기

이제 JavaScript를 사용하여 클라이언트 측에서 WebSocket을 통해 메시지를 주고받는 기능을 구현합니다.

// script.js
document.addEventListener('DOMContentLoaded', function() {
  const messageForm = document.getElementById('message-form');
  const messageInput = document.getElementById('message-input');
  const messages = document.getElementById('messages');

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

  socket.addEventListener('open', function(event) {
    console.log('Connected to WebSocket server');
  });

  socket.addEventListener('message', function(event) {
    const li = document.createElement('li');
    li.textContent = event.data;
    messages.appendChild(li);
  });

  messageForm.addEventListener('submit', function(event) {
    event.preventDefault();
    const message = messageInput.value.trim();
    if (message !== '') {
      socket.send(message);
      messageInput.value = '';
    }
  });
});

결론

이로써 간단한 채팅 애플리케이션을 완성했습니다. 사용자는 WebSocket을 통해 실시간으로 메시지를 주고받을 수 있습니다. 이 프로젝트를 통해 JavaScript와 WebSocket을 활용하여 실시간 통신을 구현하는 방법을 배울 수 있습니다.

다음 글에서는 RESTful API와 연동하기에 대해 알아보겠습니다. 다음 글에서 만나요!

반응형