📌 1. WebSocket이란?

• HTTP와 달리, 클라이언트(브라우저)와 서버가 항상 연결된 상태로 실시간으로 데이터를 주고받을 수 있는 통신 방식
• 채팅, 실시간 알림, 게임, 주식 시세 등에 적합

🛠️ 2. 개발 환경 구성

🧪 3. 서버 코드 핵심 (Node.js + ws)

import { WebSocketServer } from "ws";

const wss = new WebSocketServer({ port: 8081 });

wss.on("connection", (ws) => {
  ws.on("message", (message) => {
    // 모든 클라이언트에게 메시지 전송 (브로드캐스트)
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message.toString());
      }
    });
  });
});

✅ 역할: 메시지를 받은 후 → 모든 클라이언트에게 다시 전송 (broadcast)

💬 4. 클라이언트 코드 핵심 (React)

WebSocket 연결 및 메시지 수신

useEffect(() => {
  socketRef.current = new WebSocket("ws://localhost:8081");

  socketRef.current.onmessage = (event) => {
    setMessages((prev) => [...prev, event.data]);
  };

  return () => socketRef.current?.close();
}, []);

✅ WebSocket 연결은 마운트 시 한 번만

✅ .onmessage는 서버로부터 메시지 받을 때마다 호출

메시지 전송

const handleSend = () => {
  const fullMessage = `${username}: ${input}`;
  socketRef.current.send(fullMessage);
};

✅ "영목: 안녕하세요" 형식으로 서버에 메시지 전송

✅ 서버는 받은 메시지를 모든 클라이언트에게 전달