Socket.IO 완벽 가이드 | 실시간 통신·WebSocket·Room·Broadcasting·실전 활용

2026년 4월 7일 · 16분 읽기 · 수정 2026년 4월 7일 중급

이 글의 핵심

Socket.IO로 실시간 통신을 구현하는 완벽 가이드입니다. WebSocket, Room, Broadcasting, Namespace, 인증까지 실전 예제로 정리했습니다.

실무 경험 공유: 폴링 방식을 Socket.IO로 전환하면서, 서버 부하가 80% 감소하고 실시간성이 크게 향상된 경험을 공유합니다.

들어가며: “실시간 통신이 필요해요”

실무 문제 시나리오

시나리오 1: 폴링이 비효율적이에요
반복 요청은 서버 부하가 높습니다. Socket.IO는 실시간 연결을 제공합니다.

시나리오 2: WebSocket이 복잡해요
Native WebSocket은 어렵습니다. Socket.IO는 간단합니다.

시나리오 3: Room 관리가 필요해요
직접 구현이 어렵습니다. Socket.IO는 Room을 기본 제공합니다.

1. Socket.IO란?

핵심 특징

Socket.IO는 실시간 양방향 통신 라이브러리입니다.

주요 장점:

자동 재연결: 연결 끊김 처리
Room: 그룹 통신
Broadcasting: 다중 전송
Fallback: WebSocket 불가 시 폴링
간단한 API: 직관적인 문법

2. 설치 및 기본 사용

설치

npm install socket.io socket.io-client

서버

// server.ts
import { createServer } from 'http';
import { Server } from 'socket.io';

const httpServer = createServer();
const io = new Server(httpServer, {
  cors: {
    origin: 'http://localhost:3000',
  },
});

io.on('connection', (socket) => {
  console.log('User connected:', socket.id);

  socket.on('message', (data) => {
    console.log('Message:', data);
    socket.emit('message', `Echo: ${data}`);
  });

  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
  });
});

httpServer.listen(3001, () => {
  console.log('Socket.IO server running on :3001');
});

클라이언트

// client.ts
import { io } from 'socket.io-client';

const socket = io('http://localhost:3001');

socket.on('connect', () => {
  console.log('Connected:', socket.id);
});

socket.emit('message', 'Hello Server!');

socket.on('message', (data) => {
  console.log('Received:', data);
});

socket.on('disconnect', () => {
  console.log('Disconnected');
});

3. Room

서버

io.on('connection', (socket) => {
  // Room 참가
  socket.on('join-room', (roomId) => {
    socket.join(roomId);
    console.log(`${socket.id} joined room ${roomId}`);

    // Room에 메시지 전송
    io.to(roomId).emit('user-joined', socket.id);
  });

  // Room에 메시지 전송
  socket.on('room-message', ({ roomId, message }) => {
    io.to(roomId).emit('message', {
      userId: socket.id,
      message,
    });
  });

  // Room 나가기
  socket.on('leave-room', (roomId) => {
    socket.leave(roomId);
    io.to(roomId).emit('user-left', socket.id);
  });
});

4. Broadcasting

// 모든 클라이언트에게
io.emit('broadcast', 'Hello everyone!');

// 자신 제외 모든 클라이언트에게
socket.broadcast.emit('broadcast', 'Hello others!');

// 특정 Room에게
io.to('room1').emit('message', 'Hello room1!');

// 여러 Room에게
io.to('room1').to('room2').emit('message', 'Hello!');

// 자신 제외 Room에게
socket.to('room1').emit('message', 'Hello room1!');

5. Namespace

// 서버
const chatNamespace = io.of('/chat');
const adminNamespace = io.of('/admin');

chatNamespace.on('connection', (socket) => {
  console.log('Chat connected:', socket.id);
});

adminNamespace.on('connection', (socket) => {
  console.log('Admin connected:', socket.id);
});

// 클라이언트
const chatSocket = io('http://localhost:3001/chat');
const adminSocket = io('http://localhost:3001/admin');

6. 인증

서버

io.use((socket, next) => {
  const token = socket.handshake.auth.token;

  if (verifyToken(token)) {
    next();
  } else {
    next(new Error('Authentication error'));
  }
});

io.on('connection', (socket) => {
  console.log('Authenticated user:', socket.id);
});

클라이언트

const socket = io('http://localhost:3001', {
  auth: {
    token: 'your-jwt-token',
  },
});

socket.on('connect_error', (error) => {
  console.error('Connection error:', error.message);
});

7. React 통합

// hooks/useSocket.ts
import { useEffect, useState } from 'react';
import { io, Socket } from 'socket.io-client';

export function useSocket() {
  const [socket, setSocket] = useState<Socket | null>(null);

  useEffect(() => {
    const newSocket = io('http://localhost:3001');
    setSocket(newSocket);

    return () => {
      newSocket.close();
    };
  }, []);

  return socket;
}

// components/Chat.tsx
export default function Chat() {
  const socket = useSocket();
  const [messages, setMessages] = useState<string[]>([]);
  const [input, setInput] = useState('');

  useEffect(() => {
    if (!socket) return;

    socket.on('message', (message) => {
      setMessages((prev) => [...prev, message]);
    });

    return () => {
      socket.off('message');
    };
  }, [socket]);

  const sendMessage = () => {
    socket?.emit('message', input);
    setInput('');
  };

  return (
    <div>
      <div>
        {messages.map((msg, i) => (
          <div key={i}>{msg}</div>
        ))}
      </div>

      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
}

8. Redis Adapter (확장성)

import { createAdapter } from '@socket.io/redis-adapter';
import { createClient } from 'redis';

const pubClient = createClient({ url: 'redis://localhost:6379' });
const subClient = pubClient.duplicate();

await Promise.all([pubClient.connect(), subClient.connect()]);

io.adapter(createAdapter(pubClient, subClient));

정리 및 체크리스트

핵심 요약

Socket.IO: 실시간 양방향 통신
Room: 그룹 통신
Broadcasting: 다중 전송
Namespace: 논리적 분리
인증: 토큰 기반
Redis Adapter: 확장성

구현 체크리스트

같이 보면 좋은 글

WebSocket 완벽 가이드
NestJS 완벽 가이드
Redis 고급 가이드

이 글에서 다루는 키워드

Socket.IO, WebSocket, Realtime, Chat, Node.js, Backend, Communication

자주 묻는 질문 (FAQ)

Q. WebSocket과 비교하면 어떤가요?

A. Socket.IO가 더 많은 기능을 제공하고 사용이 편리합니다. WebSocket은 표준이고 가볍습니다.

Q. 확장성은 어떤가요?

A. Redis Adapter를 사용하면 여러 서버에서 확장 가능합니다.

Q. 모바일 앱에서도 사용할 수 있나요?

A. 네, React Native, Flutter 등에서 사용할 수 있습니다.

Q. 프로덕션에서 사용해도 되나요?

A. 네, Slack, Trello 등 많은 서비스에서 사용합니다.