아래 예제는 Node.js 기반의 서버와 HTML + JavaScript 기반의 클라이언트를 이용해 간단한 실시간 채팅 기능을 구현한 것입니다.
1. 서버 코드 (Node.js)
아래 코드를 server.js 파일로 저장하세요.
const express = require("express");
const http = require("http");
const { Server } = require("socket.io");
const app = express();
const server = http.createServer(app);
const io = new Server(server);
// 정적 파일 제공 (index.html)
app.use(express.static("public"));
// 클라이언트 연결 처리
io.on("connection", (socket) => {
console.log("사용자 연결됨:", socket.id);
// 메시지 수신 및 모든 클라이언트에 전송
socket.on("chat message", (msg) => {
io.emit("chat message", msg);
});
// 연결 종료 처리
socket.on("disconnect", () => {
console.log("사용자 연결 종료:", socket.id);
});
});
// 서버 실행
server.listen(3000, () => {
console.log("서버 실행 중: http://localhost:3000");
});
2. 클라이언트 코드 (HTML & JavaScript)
아래 코드를 public/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>
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
<style>
body { font-family: Arial, sans-serif; text-align: center; }
#messages { list-style-type: none; padding: 0; }
#messages li { padding: 8px; background: #f4f4f4; margin: 5px; border-radius: 5px; }
</style>
</head>
<body>
<h2>실시간 채팅</h2>
<ul id="messages"></ul>
<input id="messageInput" autocomplete="off" placeholder="메시지 입력" />
<button onclick="sendMessage()">전송</button>
<script>
const socket = io(); // 서버에 연결
// 메시지 전송
function sendMessage() {
const input = document.getElementById("messageInput");
if (input.value) {
socket.emit("chat message", input.value);
input.value = "";
}
}
// 서버에서 메시지 수신
socket.on("chat message", (msg) => {
const li = document.createElement("li");
li.textContent = msg;
document.getElementById("messages").appendChild(li);
});
</script>
</body>
</html>3. 실행 방법
- Node.js 서버 실행
node server.js - 브라우저에서 접속
- http://localhost:3000 에 접속하면 채팅 화면이 나타납니다.
- 여러 개의 브라우저 창을 열어서 테스트하면 메시지가 실시간으로 동기화됩니다.
4. 결과 화면
- 사용자가 메시지를 입력하고 전송하면, 모든 접속된 사용자에게 메시지가 실시간으로 업데이트됩니다.
🔥 요약
- 서버(server.js): 클라이언트 연결 관리 및 메시지 중계
- 클라이언트(index.html): 메시지 입력 및 송수신 처리
- 실시간으로 동작하는 간단한 채팅 기능 구현 🎉
이 코드를 활용해서 로그인 기능을 추가하거나, 방(Room) 기능을 확장할 수도 있습니다! 🚀
728x90
'웹개발 > javascript' 카테고리의 다른 글
| [jQuery] DOM에 새로운 요소를 추가 (0) | 2025.02.12 |
|---|---|
| [자바스크립트] 웹에서 부모창과 자식창 간에 데이터 교환 (0) | 2025.02.11 |
| [자바스크립트] 비동기 처리 순서 (1) | 2025.01.20 |
| [자바스크립트] reduce() (0) | 2025.01.09 |
| [자바스크립트] 큐(Queue) (0) | 2024.08.09 |