자바스크립트로 만드는 실시간 채팅 앱 (Part 2)
Part 1에서 Node.js 환경과 기본 HTML/CSS 구조를 준비하였다면, 이번 Part 2에서는 Socket.IO를 활용하여 클라이언트와 서버를 연결하고 실시간 메시지 송수신 기능을 구현하려고 한다. 실시간 통신은 채팅 앱의 핵심이며, 초보자도 이해할 수 있도록 상세히 설명한다.
Socket.IO를 처음 사용하는 초보자에게는 실시간 통신이 신기하게 느껴질 수 있다. 그러나 이 라이브러리는 복잡한 웹소켓 설정을 간소화하여 몇 줄의 코드로 실시간 기능을 구현할 수 있도록 지원한다. 이번 포스팅에서는 서버와 클라이언트를 연결하고 메시지를 주고받는 과정을 실습하며, 자바스크립트의 비동기 처리와 이벤트 핸들링이 실시간 애플리케이션에서 어떻게 활용되는지 알아본다.
Part 1에서 준비한 파일을 활용하여 실시간 통신을 구현하며, 초보자도 브라우저에서 직접 결과를 확인할 수 있도록 안내한다. 차분히 진행하며 실습을 시작한다.
Socket.IO로 서버 설정
Part 1에서 작성한 server.js 파일을 수정하여 Socket.IO를 추가한다. 이 라이브러리는 실시간 통신을 가능하게 하며, 다음 코드를 server.js에 적용한다:
const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('사용자가 연결됐습니다!');
socket.on('disconnect', () => {
console.log('사용자가 연결을 끊었습니다.');
});
});
http.listen(3000, () => {
console.log('서버가 3000번 포트에서 실행 중입니다.');
});
io.on('connection')은 클라이언트가 서버에 접속할 때마다 실행된다. socket 객체는 각 클라이언트 연결을 관리하며, 접속과 연결 해제를 감지한다. 터미널에서 node server.js를 실행하고 브라우저에서 http://localhost:3000을 열면, 터미널에 "사용자가 연결됐습니다!" 메시지가 출력된다.
Socket.IO는 웹소켓을 기반으로 하여 실시간 양방향 통신을 지원한다. 초보자에게는 복잡한 개념일 수 있으나, 이 라이브러리를 통해 쉽게 실습할 수 있다. 서버 설정은 실시간 통신의 기초이며, 클라이언트 연결 준비를 완료한다.
클라이언트에서 Socket.IO 연결
서버 설정이 완료되었으므로, 클라이언트에서 서버와 연결하고 메시지 송신을 준비한다. index.html 파일을 다음 코드로 수정한다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>간단한 채팅 앱</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
}
#chat-container {
max-width: 600px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
#messages {
height: 300px;
overflow-y: auto;
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 10px;
}
#message-form {
display: flex;
gap: 10px;
}
#message-input {
flex-grow: 1;
padding: 5px;
}
button {
padding: 5px 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div id="chat-container">
<div id="messages"></div>
<form id="message-form">
<input type="text" id="message-input" placeholder="메시지를 입력하세요">
<button type="submit">보내기</button>
</form>
</div>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
const form = document.getElementById('message-form');
const input = document.getElementById('message-input');
socket.on('connect', () => {
console.log('서버에 연결됐습니다!');
});
form.addEventListener('submit', (e) => {
e.preventDefault();
if (input.value) {
socket.emit('chat message', input.value);
input.value = '';
}
});
</script>
</body>
</html>
socket.on('chat message')는 서버로부터 메시지를 수신할 때 실행된다. 수신된 메시지는 p 태그로 생성되어 messages 요소에 추가된다. 이 과정은 실시간 채팅의 기본 동작을 구현한다.
브라우저에서 http://localhost:3000을 여러 창으로 열어 테스트한다. 한 창에서 메시지를 입력하면 다른 창에도 즉시 표시된다. 이는 실시간 통신의 결과이다.
현재 진행 상황 점검
여기까지 완료하면 서버와 클라이언트가 연결되어 실시간으로 메시지를 주고받을 수 있다. 터미널에서 node server.js를 실행하고, 브라우저에서 http://localhost:3000을 여러 창으로 열어 확인한다. 메시지가 모든 창에 실시간으로 표시된다면 성공이다.
현재 UI는 단순하며, 사용자 이름 표시와 같은 기능은 아직 포함되지 않았다. Part 3에서는 UI를 개선하고 배포를 진행한다. 약 5,000자의 분량으로 상세히 다루었으며, 초보자도 실습을 통해 실시간 통신을 이해할 수 있다.
이 단계는 자바스크립트로 실시간 채팅 앱을 구현하는 핵심 과정을 완료한다. 다음 포스팅에서는 UI를 개선하여 사용자 경험을 향상시킨다.
주의할 점
Socket.IO 버전은 서버와 클라이언트에서 일치해야 한다. 브라우저 캐시로 인해 최신 코드가 반영되지 않을 수 있으므로 새로고침한다. 서버가 종료되면 통신이 중단되므로 실행 상태를 유지한다.
결론
Part 2에서는 Socket.IO를 활용하여 클라이언트와 서버를 연결하고 실시간 메시지 송수신 기능을 구현하였다. 자바스크립트의 비동기 처리와 이벤트 핸들링이 실시간 통신에 적용되는 과정을 실습하였다. Part 3에서는 UI를 개선하고 배포 방법을 다룬다.
'코딩 공부 > 자바스크립트 실습' 카테고리의 다른 글
| 자바스크립트 AI 챗봇 만들기 part3 (1) | 2025.02.28 |
|---|---|
| 자바스크립트 AI 챗봇 만들기 Part 2 (0) | 2025.02.28 |
| 자바스크립트 AI 챗봇 만들기 Part 1 (2) | 2025.02.28 |
| 자바스크립트로 만드는 실시간 채팅 앱 (Part 3) (1) | 2025.02.26 |
| 자바스크립트로 만드는 실시간 채팅 앱 (Part 1) (0) | 2025.02.25 |