기존 HTTP 통신은 클라이언트가 "요청"해야만 서버가 "응답"하고 전화가 뚝 끊어지는 단방향 구조입니다. 반면 웹소켓(Socket.io)은 서버와 클라이언트가 연결 터널을 계속 열어둔 채 통화 상태를 유지하며, 서버가 원할 때 언제든 클라이언트에게 카톡 알림이나 주식 호가처럼 데이터를 실시간으로 밀어 넣어줄 수 있는 강력한 양방향 통신 기술입니다.
💡 핵심 비유: 편지(HTTP) vs 전화통화(WebSocket)
- HTTP: 편지. 답장을 받으려면 무조건 내가 먼저 편지를 써서 우체통에 넣어야 합니다.
- 웹소켓: 전화통화. 한 번 전화를 걸어서 연결해두면 끊기 전까지 서로 언제든 말을 걸고 대답할 수 있습니다.
🔌 전통적 HTTP vs 실시간 웹소켓 비교
📡 Socket.io 핵심 메서드
메서드
설명
비유
.on('이벤트', 콜백)
특정 이름의 이벤트가 도착할 때까지 기다렸다가 수신
무전기 수신 대기 (귀를 열고 듣기)
.emit('이벤트', 데이터)
나와 연결된 대상에게 이벤트를 발생시키며 데이터 전송
무전기 발신 (말하기)
io.emit()
현재 접속 중인 모든 클라이언트에게 데이터 전송
확성기로 전체 방송하기
socket.broadcast.emit()
나(발신자)를 제외한 나머지 모든 사람에게 전송
"나 빼고 다 들어~!"
Socket.io 실시간 통신 시뮬레이션
서버가 어떻게 클라이언트와의 연결을 유지하고 데이터를 실시간으로 밀어넣어 주는지(Push) 그룹 채팅 예제로 확인해 보세요.
socket_server.js
const express = require('express');
const { Server } = require('socket.io'); // Socket.io 모듈
const http = require('http');
const app = express();
const server = http.createServer(app); // Express로 HTTP 서버 생성
// HTTP 서버 위에 Socket.io 서버 얹기
const io = new Server(server, { cors: { origin: '*' } });
// 클라이언트가 터널을 뚫고 처음 접속할 때 발생하는 이벤트 ('connection')
io.on('connection', (socket) => {
console.log(`🔌 새 클라이언트 접속: ${socket.id}`);
// 클라이언트가 'chat_message' 라는 이름으로 무전기를 칠 때
socket.on('chat_message', (data) => {
console.log(`수신: [${data.sender}] "${data.text}"`);
// 💥 [핵심] 현재 접속해 있는 모든 사람에게(나 포함) 확성기로 방송!
io.emit('chat_message', data);
});
// 클라이언트가 터널을 끊고 나갈 때
socket.on('disconnect', () => {
console.log(`접속 종료: ${socket.id}`);
});
});
server.listen(3000, () => {
console.log('Socket.io 서버 실행 완료 (포트 3000)');
});
