1. 기본 사용 구조

- 서버 측

js
io.on("connection", (socket) => {
  // 클라이언트가 연결되면 실행됨
  console.log("클라이언트 연결됨:", socket.id);

  // 이벤트 수신
  socket.on("이벤트명", (data) => {
    // 처리 로직
  });

  // 이벤트 전송
  socket.emit("이벤트명", payload);
})

- 클라이언트

js
const socket = io("<http://localhost:3000>");

// 서버로 이벤트 전송
socket.emit("join-room", roomId);

// 서버에서 이벤트 수신
socket.on("game-event", (data) => {
  console.log("서버에서 받은 이벤트:", data);
});

2. 주요 메서드 정리

3. 실제 프로젝트 구조

• 개요
  • 방 입장 → 게임 시작 - 진행 - 종료까지의 멀티 플레이 흐름을 하나의 서버 채널로 통합 관리
  • Firebase의 Firestore와 연동해 방 생성, 게임 결과 등 저장 구현
• 구현 기술 스택

• 게임 흐름
  • 클라이언트 연결 시 join-room으로 방 입장
  • 게임 관련 이벤트는 모두 game-event 채널로 통일
  • 서버는 각 게임별 이벤트의 type 기준으로 처리 후, 대상에게 emit
  • 게임 종료 후 점수는 Firestore에 저장되고, 양쪽 저장이 완료되면 게임 결과 씬으로 이동
  • 방을 나가면 호스트/게스트 여부에 따라 다른 처리를 수행

4. 코드 리뷰

1. 서버 초기화 및 소켓 연결

Socket.IO 서버를 초기화하고, CORS를 허용한 상태로 클라이언트 연결을 대기

js
const io = new Server(httpServer, {
  cors: { origin: "*" }
});

io.on("connection", (socket) => {
  console.log("클라이언트 연결됨:", socket.id);
});

2. 방 입장 처리 (join-room)

클라이언트가 특정 방에 입장하면 socket.join(roomId)를 통해 방에 참여시킴.