반응형
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와 연동하기에 대해 알아보겠습니다. 다음 글에서 만나요!
반응형
'JavaScript 프로젝트 시리즈' 카테고리의 다른 글
| [JavaScript 프로젝트 시리즈] 7일차: JavaScript로 프런트엔드 프레임워크와 통합하기 (0) | 2024.08.07 |
|---|---|
| [JavaScript 프로젝트 시리즈] 6일차: JavaScript로 RESTful API 연동하기 (0) | 2024.08.06 |
| [JavaScript 프로젝트 시리즈]4일차: JavaScript로 로컬 스토리지를 이용한 메모 앱 만들기 (0) | 2024.08.04 |
| [JavaScript 프로젝트 시리즈] 3일차: JavaScript로 간단한 틱택토 게임 만들기 (0) | 2024.08.03 |
| [JavaScript 프로젝트 시리즈] 2일차: JavaScript로 날씨 API를 이용한 날씨 앱 만들기 (0) | 2024.08.02 |