Socket.IO 기본 사용법

Socket.IO 기본 사용법

Socket.IO는 웹소켓을 기반으로 한 실시간 양방향 통신 라이브러리입니다. 클라이언트와 서버 간의 이벤트 기반 통신을 제공합니다.

1. 설치

서버 (Node.js):

npm install socket.io

클라이언트 (브라우저):

npm install socket.io-client

---

2. 서버 설정

// Express와 함께 사용하는 기본적인 설정
const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const httpServer = http.createServer(app);
const io = new Server(httpServer, {
  cors: {
    origin: "http://localhost:3000", // 클라이언트 URL
    methods: ["GET", "POST"]
  },
  path: "/socket" // 연결될 엔드포인트(실제 url 과 연관은 없음)
});

// 소켓 서버 연결
io.on('connection', (socket) => {
  console.log('클라이언트 연결됨:', socket.id);

  // 이벤트 수신
  socket.on('message', (data) => {
    console.log('수신된 메시지:', data);

    // 클라이언트에게 응답
    socket.emit('response', { text: '메시지 받았습니다!' });
  });

  // 연결 해제 시
  socket.on('disconnect', () => {
    console.log('클라이언트 연결 해제:', socket.id);
  });
});

httpServer.listen(5000, () => {
  console.log('서버가 5000 포트에서 실행 중입니다.');
});

---

3. 클라이언트 설정

import { io } from "socket.io-client";

// 서버에 연결
const socket = io("http://localhost:5000", {
  path: "/socket", // 서버와 동일한 path 사용
  reconnectionAttempts: 5, // 재연결 시도 횟수
  timeout: 10000 // 연결 타임아웃 (ms)
});

// 연결 이벤트
socket.on('connect', () => {
  console.log('서버에 연결됨, ID:', socket.id);

  // 서버에 메시지 전송
  socket.emit('message', { text: '안녕하세요!' });
});

// 서버로부터 응답 수신
socket.on('response', (data) => {
  console.log('서버 응답:', data);
});

// 연결 해제
socket.on('disconnect', (reason) => {
  console.log('서버 연결 해제:', reason);
});

// 에러 처리
socket.on('connect_error', (error) => {
  console.log('연결 에러:', error);
});

---

4. 주요 메서드와 이벤트

기본적으로 제공되는 이벤트 및 커스텀 이벤트 또한 사용 가능합니다.

서버측 (io 객체)

메서드/이벤트	설명
io.on('connection', callback)	클라이언트 연결 시 호출
io.emit(event, data)	모든 클라이언트에게 이벤트 발송
io.to(room).emit(event, data)	특정 방의 모든 클라이언트에게 이벤트 발송
io.use(middleware)	미들웨어 등록

서버측 (socket 객체)

메서드/이벤트	설명
socket.id	소켓의 고유 식별자
socket.emit(event, data)	특정 클라이언트에게 이벤트 발송
socket.on(event, callback)	클라이언트로부터 이벤트 수신
socket.join(room)	소켓을 특정 방에 추가
socket.leave(room)	소켓을 특정 방에서 제거
socket.broadcast.emit(event, data)	자신을 제외한 모든 클라이언트에게 이벤트 발송
socket.disconnect()	소켓 연결 종료

클라이언트측 (socket 객체)

메서드/이벤트	설명
socket.connect()	서버에 연결 (자동으로 호출됨)
socket.emit(event, data)	서버에 이벤트 발송
socket.on(event, callback)	서버로부터 이벤트 수신
socket.disconnect()	서버와 연결 종료
socket.connected	연결 상태 확인 (boolean)
socket.id	소켓의 고유 식별자

---

5. 주요 개념

네임스페이스 (Namespaces)

다른 엔드포인트나 경로로 소켓을 구분하는 방법

// 서버
const nsp = io.of('/admin');
nsp.on('connection', (socket) => {
  console.log('admin 네임스페이스에 연결됨');
});

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

룸 (Rooms)

같은 네임스페이스 내에서 소켓들을 그룹화하는 방법

// 서버
io.on('connection', (socket) => {
  socket.join('room1');
  io.to('room1').emit('event', { message: 'room1의 모든 사용자에게' });
});

이벤트 확인 (Acknowledgements)

이벤트 수신 확인을 위한 콜백

// 클라이언트
socket.emit('message', { text: '확인 부탁드립니다' }, (response) => {
  console.log('서버 응답:', response);
});

// 서버
socket.on('message', (data, callback) => {
  console.log(data);
  callback({ status: 'received' });
});

---

6. 오류 처리 및 재연결

// 클라이언트
socket.on('connect_error', (error) => {
  console.log('연결 에러:', error);
});

socket.on('reconnect_attempt', (attemptNumber) => {
  console.log(`재연결 시도 ${attemptNumber}회`);
});

socket.on('reconnect', (attemptNumber) => {
  console.log(`${attemptNumber}회 시도 후 재연결 성공`);
});

socket.on('reconnect_failed', () => {
  console.log('모든 재연결 시도 실패');
});

---

7. 미들웨어 사용 (서버)

io.use((socket, next) => {
  // 인증 체크 등의 작업 수행
  const token = socket.handshake.auth.token;
  if (isValid(token)) {
    // 소켓에 사용자 데이터 저장
    socket.data.user = getUserFromToken(token);
    next();
  } else {
    next(new Error('authentication error'));
  }
});

---

8. 휘발성 이벤트 (Volatile Events)

네트워크 문제로 전송이 실패해도 재시도하지 않는 이벤트

// 실시간 위치 업데이트 같은 경우에 유용
socket.volatile.emit('position', { x: 123, y: 456 });

---

9. Socket.IO Admin UI

Socket.IO Admin UI는 웹 기반 관리 인터페이스로, Socket.IO 서버의 실시간 모니터링과 디버깅을 위한 도구입니다. 이를 통해 연결된 클라이언트, 네임스페이스, 룸, 이벤트 등을 시각적으로 확인하고 관리할 수 있습니다.

설치 및 설정

npm install @socket.io/admin-ui

서버 측 설정:

const { createServer } = require("http");
const { Server } = require("socket.io");
const { instrument } = require("@socket.io/admin-ui");

const httpServer = createServer();
const io = new Server(httpServer, {
  cors: {
    origin: ["https://admin.socket.io"], 
    credentials: true
  }
});

// Admin UI 설정
instrument(io, {
  auth: {
    type: "basic",
    username: "admin",
    password: "$2b$10$heqvAkYMez.Va6Et2uXInOnkCT6/uQj1brkrbyG3LpopDklcq7ZOS" // "changeit" 암호화됨
  },
  mode: "development" // 또는 "production"
});

httpServer.listen(3000);

접속 방법

1. 브라우저에서 https://admin.socket.io 방문
2. 서버 URL 입력 (예: http://localhost:3000) 및 path 설정 시 paht 내용 입력
3. 설정한 인증 정보로 로그인

주요 기능

1. 실시간 모니터링

• 활성 연결 수와 이벤트 전송량 추적
• 서버 부하와 성능 지표 확인

2. 클라이언트 관리

• 연결된 모든 클라이언트 목록 보기
• 특정 클라이언트 정보 확인 (ID, IP, 연결 시간 등)
• 특정 클라이언트 연결 강제 종료

3. 룸 및 네임스페이스 관리

• 모든 룸과 네임스페이스 시각화
• 각 룸에 속한 클라이언트 확인
• 룸 생성 및 삭제

4. 이벤트 디버깅

• 이벤트 로깅 및 모니터링
• 서버에서 임의의 이벤트 발송 테스트
• 이벤트 페이로드 검사

---

참고

https://socket.io/