topic★★★★★난이도

Socket.IO — 실시간 통신

이벤트 기반 실시간 양방향 통신 라이브러리. 방(room), 브로드캐스트, 자동 재연결 내장.

#Socket.IO#WebSocket#실시간#채팅

왜 배우는가

채팅, 실시간 알림, 공동 편집 — HTTP 요청-응답으로는 불가능한 실시간 양방향 통신을 WebSocket 위에 편리하게 구현한다.

Socket.IO는 실시간 양방향 통신 라이브러리다. HTTP가 편지(보내고 답장 기다리기)라면, WebSocket은 전화 통화(연결 유지, 동시에 말하기)다. Socket.IO는 이 전화 통화를 더 편하게 쓸 수 있도록 이벤트 기반 API, 자동 재연결, 방(room) 기능을 추가한 것.

HTTP는 1회성 편지 — Socket.IO는 이 위에 상시 연결된 '전화선'을 추가한다

용도	설명
채팅	1:1 대화, 그룹 채팅방
실시간 알림	새 주문, 메시지 도착 알림
공동 편집	구글 독스처럼 동시 작업
라이브 대시보드	주식 시세, 서버 모니터링 실시간 갱신

javascript

// 서버: npm install socket.io
import { Server } from "socket.io";
const io = new Server(3000, { cors: { origin: "*" } });

io.on("connection", (socket) => {
  console.log("접속:", socket.id);
  socket.on("chat", (msg) => {
    io.emit("chat", msg);  // 모든 클라이언트에 브로드캐스트
  });
});

// 클라이언트: npm install socket.io-client
// import { io } from "socket.io-client";
// const socket = io("http://localhost:3000");
// socket.emit("chat", "안녕!");

서버에서 `io.on('connection')`으로 접속을 받고, `socket.on()`으로 이벤트를 수신, `io.emit()`으로 전체에 전송한다. 클라이언트도 같은 이벤트 패턴을 사용.

Claude Code 팁: "Socket.IO로 실시간 채팅방 만들어줘"라고 하면 서버+클라이언트 코드, 방 입장/퇴장, 사용자 닉네임까지 한 번에 생성한다.