Ch.2 JavaScript 라이브러리 15선
Socket.IO — 실시간 채팅
핵심 내용
Socket.IO는 실시간 양방향 통신 라이브러리입니다
한 줄 요약: 서버와 브라우저가 실시간으로 메시지를 주고받을 수 있게 해주는 라이브러리. 실생활 비유: 일반 HTTP는 '편지'입니다 — 보내고 답장을 기다려야 해요. Socket.IO는 '전화 통화'입니다 — 연결되면 양쪽 모두 언제든 말할 수 있습니다.
카카오톡을 떠올려보세요. 상대방이 메시지를 보내면 내 화면에 즉시 나타나죠? 새로고침을 누르지 않아도요. 이게 바로 Socket.IO가 하는 일입니다. 서버가 먼저 '너한테 새 메시지 있어!'라고 밀어주는 거예요.
새로고침 없이 데이터가 바로 나타납니다
일반 HTTP: 브라우저가 서버에 요청해야만 데이터를 받음. 새 메시지 확인하려면 새로고침 필요. 실시간 느낌이 안 남.
Socket.IO: 서버가 먼저 브라우저에 데이터를 밀어줌. 상대방이 메시지 보내는 순간 내 화면에 즉시 표시.
서버와 클라이언트 양쪽 모두 설치합니다
npm install express socket.io// server.js — 서버 코드
const express = require('express');
const { createServer } = require('http');
const { Server } = require('socket.io');
const app = express();
const http = createServer(app);
const io = new Server(http);
io.on('connection', (socket) => {
console.log('유저 접속!');
socket.on('chat', (msg) => {
io.emit('chat', msg); // 모든 유저에게 전송
});
socket.on('disconnect', () => {
console.log('유저 퇴장');
});
});
http.listen(3000, () => {
console.log('채팅 서버 실행: http://localhost:3000');
});핵심 개념: `io.on('connection')`은 유저가 접속할 때 실행됩니다. `socket.on('chat')`으로 메시지를 수신하고, `io.emit('chat')`으로 접속한 모든 유저에게 메시지를 전달합니다.
AI에게 이렇게 요청하세요
좋은 프롬프트 예시 "Socket.IO로 닉네임 입장 + 실시간 메시지 전달 채팅방 만들어줘. 서버는 Express + Socket.IO, 클라이언트는 HTML 파일 하나. 닉네임 입력 → 채팅방 입장 → 메시지 전송/수신 기능 넣어줘."
프롬프트 변형 • "채팅방을 여러 개 만들 수 있게 room 기능 추가해줘" • "누가 입장/퇴장했는지 알림 메시지 보여줘" • "현재 접속 인원 수를 실시간으로 표시해줘" • "'상대방이 입력 중...' 표시 기능도 넣어줘"
// 닉네임 + 입장/퇴장 알림 추가 버전
io.on('connection', (socket) => {
socket.on('join', (nickname) => {
socket.nickname = nickname;
io.emit('chat', {
system: true,
text: `${nickname}님이 입장했습니다`,
});
});
socket.on('chat', (msg) => {
io.emit('chat', {
nickname: socket.nickname,
text: msg,
});
});
socket.on('disconnect', () => {
if (socket.nickname) {
io.emit('chat', {
system: true,
text: `${socket.nickname}님이 퇴장했습니다`,
});
}
});
});실시간 채팅방 미니 프로젝트
// server.js — 완성 버전
const express = require('express');
const { createServer } = require('http');
const { Server } = require('socket.io');
const app = express();
const http = createServer(app);
const io = new Server(http);
let onlineCount = 0;
app.get('/', (req, res) => {
res.sendFile(__dirname + '/chat.html');
});
io.on('connection', (socket) => {
onlineCount++;
io.emit('online', onlineCount);
socket.on('join', (nickname) => {
socket.nickname = nickname;
io.emit('chat', `[알림] ${nickname}님이 입장했습니다`);
});
socket.on('chat', (msg) => {
io.emit('chat', `${socket.nickname}: ${msg}`);
});
socket.on('disconnect', () => {
onlineCount--;
io.emit('online', onlineCount);
if (socket.nickname) {
io.emit('chat', `[알림] ${socket.nickname}님이 퇴장했습니다`);
}
});
});
http.listen(3000, () => console.log('채팅 서버 실행중'));실행 방법: `node server.js` 실행 후 브라우저 탭을 2~3개 열어 localhost:3000에 접속하세요. 각 탭에서 닉네임을 입력하고 채팅방에 입장하면, 한쪽에서 보낸 메시지가 다른 탭에도 즉시 표시됩니다. 접속 인원 수도 실시간으로 바뀝니다.
Socket.IO가 일반 HTTP와 다른 핵심 특징은?
핵심 용어
채팅 앱
카카오톡처럼 메시지를 보내면 상대방 화면에 바로 표시
실시간 알림
주문 상태 변경, 새 댓글 등을 즉시 사용자에게 전달
협업 도구
Google Docs처럼 여러 명이 동시에 같은 문서를 편집
라이브 대시보드
주식 시세, 서버 모니터링 등 데이터가 실시간으로 갱신
핵심 정리
- 1Socket.IO는 서버와 브라우저 간 실시간 양방향 통신 라이브러리
- 2io.on('connection')으로 연결, emit()으로 전송, on()으로 수신
- 3채팅, 알림, 협업 도구, 라이브 대시보드 등 실시간 기능에 필수
- 4AI 프롬프트에 '이벤트 이름 + 닉네임/방 구분 + 전달할 데이터 구조'를 명시하면 정확한 코드 생성
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작