브라우저와 서버 간 양방향 실시간 통신 을 가능하게 하는 라이브러리

WebSocket을 기본적으로 사용

브라우저가 WebSocket을 지원하지 않을 경우 Long Polling 등의 대체 기술 자동 적용 → 안정성 확보

❓ 기존 HTTP 통신과의 차이점

• 기존 HTTP 요청-응답 방식
  • 브라우저 → 서버 요청
  • 서버 → 브라우저 응답
  • 브라우저가 새로운 데이터를 받기 위해서는 반복해서 요청(Polling)
• socket.io
  • 연결을 유지하면서 클라이언트와 서버가 자유롭게 데이터 송수신 가능!
  • 서버 → 클라이언트 데이터 Push 가능
  • 클라이언트 → 서버 이벤트 기반 메시지 전송 가능
  • 자동 재연결 지원 (모바일 네트워크 변화에도 강함)

💡

실시간 채팅, 게임, 알림 서비스 같은 지속적인 데이터 교환이 필요한 서비스에 적합 !

---

❓ socket.io의 특징

• 실시간 통신
  • 웹 애플리케이션에서 실시간 업데이트 가능
  • ex) 채팅, 주식 거래 플랫폼, 게임, 라이브 스코어 보드 등
• 자동 재연결 / 폴백(Fallback) 지원
  • 네트워크가 끊어졌다가 다시 연결되면 자동 복구
  • WebSocket이 불가능한 환경에서는 Long Polling을 사용하여 연결 유지
• 이벤트 기반 메시지 송수신
  • emit()과 on()을 사용해 특정 이벤트에 대한 데이터 주고받기 가능
• Rooms & Namespaces 지원
  • 특정 그룹 유저에게만 메시지 보내는 Rooms
  • 기능별로 서버를 나누는 Namespaces 지원

---

❗️ 브라우저에서 socket.io 사용하기

1. socket.io 설치

npm install socket.io-client

2. socket.io 연결

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

const socket = io("https://example.com"); 

socket.on("connect", () => {
  console.log("✅ Socket.io 연결 성공!");
});

3. 서버와 데이터 주고받기: emit() on()

📤 클라이언트 → 서버 (이벤트 전송)

// socket.emit("이벤트 이름", 해당 이벤트와 보낼 데이터)
socket.emit("message", "Hello Server!");

📥 서버 → 클라이언트 (이벤트 수신)

// socket.on("이벤트 이름", 해당 이벤트를 처리할 함수)
socket.on("message", (data) => {
  console.log("📩 서버에서 받은 메시지:", data);
});

4. 소켓 연결 종료

socket.on("disconnect", () => {
  console.log("🚫 연결이 종료되었습니다.");
});

socket.disconnect(); // 연결 끊기

---

🚀 WebSocket API vs socket.io

	WebSocket API	socket.io
연결 방식	new WebSocket(url)	io(url)
메시지 전송	socket.send(data)	socket.emit(event, data)
이벤트	onopen onmessage onclose onerror	on('connect') on('disconnect') on('message')
자동 재연결	직접 구현 필요	기본 지원
Rooms & Namespaces	직접 구현 필요	기본 제공
Fallback 지원	지원 안 함	WebSocket이 안 되는 경우 Long Polling 사용

---

✔️ 실제 활용 예시

const getChatRooms = useCallback(() => {
    socket.emit("getChatRooms");
  }, [chatRoomId]);

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

  getChatRooms();

  const handleChatRooms = (rooms: ChatRooms[]) => {
    setChats(rooms);
  };

  socket.on("chatRooms", handleChatRooms);

  return () => {
    socket.off("chatRooms", handleChatRooms);
    // socket.off("이벤트명")은 해당 이벤트의 모든 리스너를 제거
    // 특정 핸들러만 제거하려면 콜백 함수를 함께 전달
  };
}, [socket]);