🪵 2. WebRTC 실습 (2) : 1:N Mesh 방식

실시간 1:N 그림판 동기화

서버 (시그널링 서버)

주요 함수

@WebSocketGateway({ cors: { origin: '*' } })
export class WebRTCGateway implements OnGatewayDisconnect {
  @WebSocketServer()
  server: Server;

• WebSocket 서버 구성: @WebSocketGateway 데코레이터로 설정을 추가하여 서버를 설정하고, @WebSocketServer()로 서버 인스턴스를 만들어 WebSocket 통신을 관리한다.
• CORS 설정: 다양한 도메인에서 서버에 접근할 수 있도록 허용하여 여러 클라이언트가 이 서버에 접속할 수 있게 한다.
• 클라이언트 연결 관리: OnGatewayDisconnect를 구현하여 클라이언트가 연결을 종료할 때 발생하는 작업을 정의하고, 서버 인스턴스(server)를 통해 연결된 클라이언트들에게 이벤트를 전송할 수 있도록 준비한다.

handleConnection(client: Socket) {
    console.log(`Client connected: ${client.id}`);
  }

  handleDisconnect(client: Socket) {
    console.log(`Client disconnected: ${client.id}`);

    // 클라이언트가 속한 모든 방에 연결 종료 알림
    this.rooms.forEach((clients, roomId) => {
      if (clients.has(client.id)) {
        clients.delete(client.id);
        client.to(roomId).emit('user-left', client.id);
        console.log(`Notified room ${roomId} about user ${client.id} leaving`);
      }
    });
  }

• handleConnection
  • 클라이언트가 서버에 연결되면 ID를 콘솔에 표시한다.
• handleDisconnect
  • 클라이언트가 연결을 끊으면, 클라이언트가 속한 방을 찾아 제거하고, 방의 다른 사용자에게 클라이언트가 떠났다는 사실을 알린다.
  • user-left 이벤트를 통해 방의 다른 사용자들에게 연결 종료를 통지한다.

@SubscribeMessage('joinRoom')
  async handleJoinRoom(
    @MessageBody() roomId: string,
    @ConnectedSocket() client: Socket,
  ) {
    console.log(`Client ${client.id} joining room: ${roomId}`);

    // 방 참여
    await client.join(roomId);

    // 방 사용자 목록 관리
    if (!this.rooms.has(roomId)) {
      this.rooms.set(roomId, new Set());
    }
    const roomClients = this.rooms.get(roomId);

    // 현재 방에 있는 모든 사용자 목록 가져오기
    const currentUsers = Array.from(roomClients);

    // 신규 사용자에게 현재 방 사용자 목록 전송
    client.emit('room-users', currentUsers);
    console.log(`Sent current users to ${client.id}:`, currentUsers);

    // 방에 새 사용자 추가
    roomClients.add(client.id);

    // 방의 다른 사용자들에게 새 사용자 알림
    client.to(roomId).emit('user-joined', client.id);
    console.log(`Notified room about new user ${client.id}`);

    // 참여 완료 알림
    client.emit('joinedRoom', roomId);
  }

• 방 참여 요청: 클라이언트가 joinRoom 요청을 보냄으로써 특정 방에 참여할 수 있다.
• 현재 사용자 목록 전송: 새로운 사용자에게 현재 방에 있는 다른 사용자 목록을 전송하여, 방에 누가 있는지 알 수 있게 한다.
• 방에 사용자 추가 및 알림: 방 목록에 새 사용자를 추가하고, 다른 사용자들에게 새 사용자가 참여했음을 알린다.
• 참여 완료 알림: 새 사용자가 방에 정상적으로 참여했음을 알리는 joinedRoom 이벤트를 보낸다.

@SubscribeMessage('offer')
  handleOffer(
    @MessageBody()
    data: {
      roomId: string;
      userId: string;
      offer: RTCSessionDescriptionInit;
    },
    @ConnectedSocket() client: Socket,
  ) {
    console.log(`Received offer from ${client.id} to ${data.userId}`);
    // userId로 특정 사용자에게만 offer 전송
    this.server.to(data.userId).emit('offer', {
      offer: data.offer,
      senderId: client.id,
    });
  }

• offer 이벤트 처리: offer 이벤트가 발생하면 특정 사용자에게 WebRTC offer를 전송한다.
• 전송 구조
  • senderId를 포함하여 offer를 보낸 사용자가 누구인지 알 수 있도록 한다.
  • 대상 사용자는 offer를 수신하여 WebRTC 연결을 위한 answer를 생성할 수 있다.
• 특정 사용자에게만 전달: userId로 지정된 사용자에게만 offer가 전송되므로, 다른 사용자는 이 이벤트를 수신하지 않는다.

@SubscribeMessage('answer')
  handleAnswer(
    @MessageBody()
    data: {
      roomId: string;
      userId: string;
      answer: RTCSessionDescriptionInit;
    },
    @ConnectedSocket() client: Socket,
  ) {
    console.log(`Received answer from ${client.id} to ${data.userId}`);
    // userId로 특정 사용자에게만 answer 전송
    this.server.to(data.userId).emit('answer', {
      answer: data.answer,
      senderId: client.id,
    });
  }

• answer 이벤트 처리: answer 이벤트가 발생하면 특정 사용자에게 WebRTC answer를 전송한다.
• 전송 구조
  • senderId를 포함하여 answer를 보낸 사용자가 누구인지 알 수 있도록 한다.
  • 대상 사용자는 answer를 수신하여 WebRTC 연결을 확립할 수 있다.
• 특정 사용자에게만 전달: userId로 지정된 사용자에게만 answer가 전송되므로, 다른 사용자는 이 이벤트를 수신하지 않는다.

@SubscribeMessage('ice-candidate')
  handleIceCandidate(
    @MessageBody()
    data: {
      roomId: string;
      userId: string;
      candidate: RTCIceCandidateInit;
    },
    @ConnectedSocket() client: Socket,
  ) {
    console.log(`Received ICE candidate from ${client.id} to ${data.userId}`);
    // userId로 특정 사용자에게만 candidate 전송
    this.server.to(data.userId).emit('ice-candidate', {
      candidate: data.candidate,
      senderId: client.id,
    });
  }

• ICE 후보 처리: 클라이언트가 새로운 ICE 후보를 발견할 때마다 상대방에게 이 후보 정보를 전송하여 최적의 네트워크 경로를 찾는다.
• 전송 구조
  • senderId를 포함하여 ICE 후보를 보낸 사용자가 누구인지 알 수 있도록 한다.
  • 대상 사용자는 이 ICE 후보를 사용하여 연결을 설정한다.
• 특정 사용자에게만 전달: userId로 지정된 사용자에게만 ICE 후보가 전송되므로, 다른 사용자는 이 이벤트를 수신하지 않는다.

전체 코드

import {
  WebSocketGateway,
  WebSocketServer,
  SubscribeMessage,
  MessageBody,
  ConnectedSocket,
  OnGatewayDisconnect,
} from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';

@WebSocketGateway({ cors: { origin: '*' } })
export class WebRTCGateway implements OnGatewayDisconnect {
  @WebSocketServer()
  server: Server;

  private rooms = new Map<string, Set<string>>();

  handleConnection(client: Socket) {
    console.log(`Client connected: ${client.id}`);
  }

  handleDisconnect(client: Socket) {
    console.log(`Client disconnected: ${client.id}`);

    // 클라이언트가 속한 모든 방에 연결 종료 알림
    this.rooms.forEach((clients, roomId) => {
      if (clients.has(client.id)) {
        clients.delete(client.id);
        client.to(roomId).emit('user-left', client.id);
        console.log(`Notified room ${roomId} about user ${client.id} leaving`);
      }
    });
  }

  // 방에 사용자 추가 및 현재 사용자 목록 전송
  @SubscribeMessage('joinRoom')
  async handleJoinRoom(
    @MessageBody() roomId: string,
    @ConnectedSocket() client: Socket,
  ) {
    console.log(`Client ${client.id} joining room: ${roomId}`);

    // 방 참여
    await client.join(roomId);

    // 방 사용자 목록 관리
    if (!this.rooms.has(roomId)) {
      this.rooms.set(roomId, new Set());
    }
    const roomClients = this.rooms.get(roomId);

    // 현재 방에 있는 모든 사용자 목록 가져오기
    const currentUsers = Array.from(roomClients);

    // 신규 사용자에게 현재 방 사용자 목록 전송
    client.emit('room-users', currentUsers);
    console.log(`Sent current users to ${client.id}:`, currentUsers);

    // 방에 새 사용자 추가
    roomClients.add(client.id);

    // 방의 다른 사용자들에게 새 사용자 알림
    client.to(roomId).emit('user-joined', client.id);
    console.log(`Notified room about new user ${client.id}`);

    // 참여 완료 알림
    client.emit('joinedRoom', roomId);
  }

  @SubscribeMessage('offer')
  handleOffer(
    @MessageBody()
    data: {
      roomId: string;
      userId: string;
      offer: RTCSessionDescriptionInit;
    },
    @ConnectedSocket() client: Socket,
  ) {
    console.log(`Received offer from ${client.id} to ${data.userId}`);
    // userId로 특정 사용자에게만 offer 전송
    this.server.to(data.userId).emit('offer', {
      offer: data.offer,
      senderId: client.id,
    });
  }

  @SubscribeMessage('answer')
  handleAnswer(
    @MessageBody()
    data: {
      roomId: string;
      userId: string;
      answer: RTCSessionDescriptionInit;
    },
    @ConnectedSocket() client: Socket,
  ) {
    console.log(`Received answer from ${client.id} to ${data.userId}`);
    // userId로 특정 사용자에게만 answer 전송
    this.server.to(data.userId).emit('answer', {
      answer: data.answer,
      senderId: client.id,
    });
  }

  @SubscribeMessage('ice-candidate')
  handleIceCandidate(
    @MessageBody()
    data: {
      roomId: string;
      userId: string;
      candidate: RTCIceCandidateInit;
    },
    @ConnectedSocket() client: Socket,
  ) {
    console.log(`Received ICE candidate from ${client.id} to ${data.userId}`);
    // userId로 특정 사용자에게만 candidate 전송
    this.server.to(data.userId).emit('ice-candidate', {
      candidate: data.candidate,
      senderId: client.id,
    });
  }
}

클라이언트

주요 함수

const canvasRef = useRef<HTMLCanvasElement>(null);
  const peerConnections = useRef<Map<string, RTCPeerConnection>>(new Map());
  const dataChannels = useRef<Map<string, RTCDataChannel>>(new Map());
  const pendingCandidates = useRef<Map<string, RTCIceCandidateInit[]>>(new Map());
  const socketRef = useRef<SocketType>();
  const [isDrawing, setIsDrawing] = useState(false);
  const myIdRef = useRef<string>('');

• canvasRef: 캔버스 요소에 접근하여 그림을 그리기 위한 참조
• peerConnections 및 dataChannels: 각 사용자와의 WebRTC 연결 및 데이터 채널을 관리하여 실시간 데이터를 주고받음
• pendingCandidates: WebRTC 연결 설정 전 받은 ICE 후보를 임시 저장
• socketRef: 서버와의 WebSocket 연결 관리
• isDrawing: 사용자가 그림을 그리는 상태를 추적
• myIdRef: 현재 클라이언트의 고유 ID를 저장

useEffect(() => {
    socketRef.current = io(SOCKET_SERVER);

    socketRef.current.on('connect', () => {
      console.log('Connected to server');
      myIdRef.current = socketRef.current?.id || '';
      socketRef.current?.emit('joinRoom', 'canvas-room');
    });

    // 방에 참여했을 때 현재 방에 있는 다른 유저들의 목록을 받음
    socketRef.current.on('room-users', (users: string[]) => {
      console.log('Current users in room:', users);
      // 자신을 제외한 각 유저와 연결 설정
      users.forEach(userId => {
        if (userId !== myIdRef.current && !peerConnections.current.has(userId)) {
          createPeerConnection(userId, true);
        }
      });
    });

    // 새로운 유저가 들어왔을 때
    socketRef.current.on('user-joined', (userId: string) => {
      console.log('New user joined:', userId);
      if (userId !== myIdRef.current && !peerConnections.current.has(userId)) {
        createPeerConnection(userId, false);
      }
    });

    socketRef.current.on('offer', async ({ offer, senderId }) => {
      console.log('Received offer from:', senderId);
      await handleOffer(offer, senderId);
    });

    socketRef.current.on('answer', async ({ answer, senderId }) => {
      console.log('Received answer from:', senderId);
      await handleAnswer(answer, senderId);
    });

    socketRef.current.on('ice-candidate', async ({ candidate, senderId }) => {
      await handleIceCandidate(candidate, senderId);
    });

    socketRef.current.on('user-left', (userId: string) => {
      console.log('User left:', userId);
      cleanupPeerConnection(userId);
    });

    return () => {
      peerConnections.current.forEach((_, userId) => {
        cleanupPeerConnection(userId);
      });
      socketRef.current?.disconnect();
    };
  }, []);

• 서버 연결: 클라이언트가 Socket.io 서버에 연결하고, 서버로부터 할당받은 고유 ID를 myIdRef에 저장한다.
• 방 참여 요청: 클라이언트가 canvas-room이라는 방에 참여하기 위해 joinRoom 이벤트를 서버로 보낸다.
• 서버로부터 현재 방(canvas-room)에 있는 다른 사용자 ID 목록(users)을 받는다.
• 피어 연결 생성: myIdRef(자신의 ID)가 아닌 사용자들에게만 새로운 피어 연결을 설정한다.
• 새로운 사용자가 참여할 때 기존 사용자들은 알림을 받는다.
• 피어 연결 생성: 방에 새로 들어온 사용자가 기존 사용자와의 연결을 시작하므로, 기존 사용자는 연결 요청을 기다린다.
• Offer: 연결 요청을 수신했을 때 handleOffer를 통해 WebRTC offer를 처리한다.
• Answer: 연결 요청을 수락한 상대방이 보낸 answer를 handleAnswer로 처리한다.
• ICE 후보: handleIceCandidate를 통해 WebRTC 연결에 필요한 네트워크 경로 정보를 추가한다.
• 사용자가 방을 떠날 때 user-left 이벤트를 수신하고, 연결된 피어의 리소스를 정리한다.
• cleanupPeerConnection: WebRTC 연결을 종료하고, 관련 리소스를 해제한다.
• 컴포넌트가 언마운트될 때 모든 피어 연결을 정리하고 서버 연결을 종료한다.

const cleanupPeerConnection = (userId: string) => {
    const peerConnection = peerConnections.current.get(userId);
    if (peerConnection) {
      peerConnection.close();
      peerConnections.current.delete(userId);
    }
    
    const dataChannel = dataChannels.current.get(userId);
    if (dataChannel) {
      dataChannel.close();
      dataChannels.current.delete(userId);
    }
    
    pendingCandidates.current.delete(userId);
  };

• 피어 연결 종료: peerConnections에서 해당 사용자 ID의 연결을 닫고 삭제한다.
• 데이터 채널 종료: dataChannels에서 해당 ID의 데이터 채널을 닫고 삭제한다.
• 대기 중인 ICE 후보 삭제: pendingCandidates에서 해당 ID의 항목을 삭제한다.

const createPeerConnection = (userId: string, initiator: boolean): RTCPeerConnection => {
    console.log(`Creating peer connection with ${userId} (initiator: ${initiator})`);
    const peerConnection = new RTCPeerConnection({
      iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
    });

    peerConnection.onicecandidate = (event) => {
      if (event.candidate) {
        console.log('Sending ICE candidate to:', userId);
        socketRef.current?.emit('ice-candidate', {
          candidate: event.candidate,
          roomId: 'canvas-room',
          userId
        });
      }
    };

    peerConnection.oniceconnectionstatechange = () => {
      console.log(`ICE Connection State with ${userId}: ${peerConnection.iceConnectionState}`);
    };

    peerConnection.ondatachannel = (event) => {
      console.log('Received data channel from:', userId);
      const dataChannel = event.channel;
      dataChannels.current.set(userId, dataChannel);
      setupDataChannelListeners(dataChannel, userId);
    };

    if (initiator) {
      console.log('Creating data channel as initiator for:', userId);
      const dataChannel = peerConnection.createDataChannel("canvas", {
        ordered: true
      });
      dataChannels.current.set(userId, dataChannel);
      setupDataChannelListeners(dataChannel, userId);
      
      // Initiator creates and sends offer
      createAndSendOffer(peerConnection, userId);
    }

    peerConnections.current.set(userId, peerConnection);
    return peerConnection;
  };

• 피어 연결 생성: ICE 서버를 설정하여 RTCPeerConnection을 생성하고, peerConnections에 저장한다.
• ICE 후보 이벤트 처리: 새로운 ICE 후보가 생성되면 서버에 전송하여 P2P 연결을 설정한다.
  • onicecandidate 이벤트는 ICE candidate가 생성될 때마다 호출된다.
• 데이터 채널 수신: 상대방이 데이터 채널을 생성한 경우 해당 채널을 수신하고 이벤트 리스너를 설정한다.
  • ondatachannel은 상대방이 Data Channel을 생성해 보냈을 때 호출된다.
• initiator: initiator일 경우 데이터 채널을 생성하고, 오퍼를 만들어 상대방에게 전송한다.
  • initiator가 true인 경우, 현재 사용자가 연결을 시작하는 쪽이다.

const createAndSendOffer = async (peerConnection: RTCPeerConnection, userId: string) => {
    try {
      const offer = await peerConnection.createOffer();
      console.log('Created offer for:', userId);
      await peerConnection.setLocalDescription(offer);
      console.log('Set local description (offer) for:', userId);
      
      socketRef.current?.emit('offer', {
        offer,
        roomId: 'canvas-room',
        userId
      });
    } catch (error) {
      console.error('Error creating offer:', error);
    }
  };

• Offer 생성: peerConnection에서 Offer를 생성한다.
• Local Description 설정: 생성한 Offer를 Local Description으로 설정하여 연결 시작 준비를 완료한다.
• Offer 전송: 소켓을 통해 특정 userId와 방(roomId)으로 Offer를 전송합니다

const handleOffer = async (offer: RTCSessionDescriptionInit, userId: string) => {
    try {
      let peerConnection = peerConnections.current.get(userId);
      if (!peerConnection) {
        console.log('Creating new peer connection for offer from:', userId);
        peerConnection = createPeerConnection(userId, false);
      }

      if (peerConnection.signalingState !== "stable") {
        console.log('Ignoring offer in non-stable state');
        return;
      }

      await peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
      console.log('Set remote description (offer) for:', userId);
      
      const answer = await peerConnection.createAnswer();
      await peerConnection.setLocalDescription(answer);
      console.log('Set local description (answer) for:', userId);
      
      socketRef.current?.emit('answer', {
        answer,
        roomId: 'canvas-room',
        userId
      });

      // Process any pending ICE candidates
      const candidates = pendingCandidates.current.get(userId) || [];
      for (const candidate of candidates) {
        await peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
      }
      pendingCandidates.current.delete(userId);
    } catch (error) {
      console.error('Error handling offer:', error);
    }
  };

• Peer Connection 확인: userId에 대한 Peer Connection이 없으면 새로 생성한다.
• 시그널링 상태 확인: stable 상태일 때만 Offer를 처리한다.
  • stable 상태: WebRTC 연결에서 안정된 상태를 의미하며, 새로운 Offer를 처리할 준비가 되어 있다는 것을 나타낸다.
• Remote Description 설정: 상대방의 Offer를 적용한다.
• Answer 생성 및 전송: Answer를 생성하여 Local Description으로 설정하고, 상대방에게 전송한다.
• ICE 후보 처리: 대기 중인 ICE 후보가 있으면 Peer Connection에 추가한다.

const handleAnswer = async (answer: RTCSessionDescriptionInit, userId: string) => {
    try {
      const peerConnection = peerConnections.current.get(userId);
      if (!peerConnection) {
        console.error('No peer connection found for user:', userId);
        return;
      }

      const currentState = peerConnection.signalingState;
      console.log(`Current signaling state for ${userId}:`, currentState);

      if (currentState === "stable") {
        console.log('Connection already stable with:', userId);
        return;
      }

      if (currentState !== "have-local-offer") {
        console.log(`Unexpected signaling state ${currentState} for answer from:`, userId);
        return;
      }

      await peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
      console.log('Set remote description (answer) for:', userId);
      
      // Process any pending ICE candidates
      const candidates = pendingCandidates.current.get(userId) || [];
      for (const candidate of candidates) {
        await peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
      }
      pendingCandidates.current.delete(userId);
    } catch (error) {
      console.error('Error handling answer:', error);
    }
  };

• Peer Connection 확인
  • userId에 해당하는 Peer Connection이 존재하는지 확인한다.
  • 없으면 오류 출력 후 종료한다.
• 시그널링 상태 확인
  • 연결이 이미 "stable" 상태라면, Answer를 무시한다.
  • 상태가 "have-local-offer"인 경우에만 Answer를 처리한다.
• Remote Description 설정: Answer를 Remote Description으로 설정한다.
• 대기 중인 ICE 후보 처리: Answer 이후에는 대기 중인 ICE 후보들을 Peer Connection에 추가한다.

const handleIceCandidate = async (candidate: RTCIceCandidateInit, userId: string) => {
    try {
      const peerConnection = peerConnections.current.get(userId);
      if (!peerConnection) {
        console.log('No peer connection found for ICE candidate from:', userId);
        return;
      }

      if (peerConnection.remoteDescription && peerConnection.remoteDescription.type) {
        console.log('Adding ICE candidate for:', userId);
        await peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
      } else {
        console.log('Queueing ICE candidate for:', userId);
        if (!pendingCandidates.current.has(userId)) {
          pendingCandidates.current.set(userId, []);
        }
        pendingCandidates.current.get(userId)?.push(candidate);
      }
    } catch (error) {
      console.error('Error handling ICE candidate:', error);
    }
  };

• 피어 연결 확인: 피어 연결이 없으면 종료하고, 있으면 다음 단계로 진행한다.
• ICE 후보 추가 또는 큐에 저장: 원격 설명이 설정된 경우 바로 ICE 후보를 추가하고, 그렇지 않으면 후보를 대기 큐에 저장한다.
• 에러 처리: ICE 후보 추가 중 오류 발생 시 콘솔에 오류를 출력한다.

const setupDataChannelListeners = (dataChannel: RTCDataChannel, userId: string) => {
    dataChannel.onopen = () => {
      console.log(`Data channel opened with ${userId}`);
    };
    
    dataChannel.onclose = () => {
      console.log(`Data channel closed with ${userId}`);
    };
    
    dataChannel.onerror = (error) => {
      console.error(`Data channel error with ${userId}:`, error);
    };
    
    dataChannel.onmessage = (event) => {
      const { type, x, y } = JSON.parse(event.data);
      handleRemoteDrawing(type, x, y);
    };
  };

• onmessage 이벤트: 다른 사용자로부터 그리기 데이터 메시지를 받으면 JSON으로 파싱하여 type, x, y 값을 추출하고, 이를 handleRemoteDrawing 함수에 전달하여 원격 그리기 작업을 처리한다.

const sendDrawingData = (type: string, x: number, y: number) => {
    const message = JSON.stringify({ type, x, y });
    dataChannels.current.forEach((dataChannel) => {
      if (dataChannel.readyState === "open") {
        dataChannel.send(message);
      }
    });
  };

• type, x, y 값을 JSON 형식의 메시지로 만든다.
• 열려 있는 모든 데이터 채널에 이 메시지를 전송한다.

전체 코드

import { useEffect, useRef, useState } from 'react';
import io from 'socket.io-client';

const SOCKET_SERVER = 'http://localhost:3000';

type SocketType = ReturnType<typeof io>;

function App() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const peerConnections = useRef<Map<string, RTCPeerConnection>>(new Map());
  const dataChannels = useRef<Map<string, RTCDataChannel>>(new Map());
  const pendingCandidates = useRef<Map<string, RTCIceCandidateInit[]>>(new Map());
  const socketRef = useRef<SocketType>();
  const [isDrawing, setIsDrawing] = useState(false);
  const myIdRef = useRef<string>('');

  useEffect(() => {
    socketRef.current = io(SOCKET_SERVER);

    socketRef.current.on('connect', () => {
      console.log('Connected to server');
      myIdRef.current = socketRef.current?.id || '';
      socketRef.current?.emit('joinRoom', 'canvas-room');
    });

    // 방에 참여했을 때 현재 방에 있는 다른 유저들의 목록을 받음
    socketRef.current.on('room-users', (users: string[]) => {
      console.log('Current users in room:', users);
      // 자신을 제외한 각 유저와 연결 설정
      users.forEach(userId => {
        if (userId !== myIdRef.current && !peerConnections.current.has(userId)) {
          createPeerConnection(userId, true);
        }
      });
    });

    // 새로운 유저가 들어왔을 때
    socketRef.current.on('user-joined', (userId: string) => {
      console.log('New user joined:', userId);
      if (userId !== myIdRef.current && !peerConnections.current.has(userId)) {
        // 새로운 유저가 들어왔을 때는 기존 유저들이 연결을 시작하지 않음
        // 새로운 유저가 각 기존 유저에게 연결을 시작할 것임
        createPeerConnection(userId, false);
      }
    });

    socketRef.current.on('offer', async ({ offer, senderId }) => {
      console.log('Received offer from:', senderId);
      await handleOffer(offer, senderId);
    });

    socketRef.current.on('answer', async ({ answer, senderId }) => {
      console.log('Received answer from:', senderId);
      await handleAnswer(answer, senderId);
    });

    socketRef.current.on('ice-candidate', async ({ candidate, senderId }) => {
      await handleIceCandidate(candidate, senderId);
    });

    socketRef.current.on('user-left', (userId: string) => {
      console.log('User left:', userId);
      cleanupPeerConnection(userId);
    });

    return () => {
      peerConnections.current.forEach((_, userId) => {
        cleanupPeerConnection(userId);
      });
      socketRef.current?.disconnect();
    };
  }, []);

  const cleanupPeerConnection = (userId: string) => {
    const peerConnection = peerConnections.current.get(userId);
    if (peerConnection) {
      peerConnection.close();
      peerConnections.current.delete(userId);
    }
    
    const dataChannel = dataChannels.current.get(userId);
    if (dataChannel) {
      dataChannel.close();
      dataChannels.current.delete(userId);
    }
    
    pendingCandidates.current.delete(userId);
  };

  const createPeerConnection = (userId: string, initiator: boolean): RTCPeerConnection => {
    console.log(`Creating peer connection with ${userId} (initiator: ${initiator})`);
    const peerConnection = new RTCPeerConnection({
      iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
    });

    peerConnection.onicecandidate = (event) => {
      if (event.candidate) {
        console.log('Sending ICE candidate to:', userId);
        socketRef.current?.emit('ice-candidate', {
          candidate: event.candidate,
          roomId: 'canvas-room',
          userId
        });
      }
    };

    peerConnection.oniceconnectionstatechange = () => {
      console.log(`ICE Connection State with ${userId}: ${peerConnection.iceConnectionState}`);
    };

    peerConnection.ondatachannel = (event) => {
      console.log('Received data channel from:', userId);
      const dataChannel = event.channel;
      dataChannels.current.set(userId, dataChannel);
      setupDataChannelListeners(dataChannel, userId);
    };

    if (initiator) {
      console.log('Creating data channel as initiator for:', userId);
      const dataChannel = peerConnection.createDataChannel("canvas", {
        ordered: true
      });
      dataChannels.current.set(userId, dataChannel);
      setupDataChannelListeners(dataChannel, userId);
      
      // Initiator creates and sends offer
      createAndSendOffer(peerConnection, userId);
    }

    peerConnections.current.set(userId, peerConnection);
    return peerConnection;
  };

  const createAndSendOffer = async (peerConnection: RTCPeerConnection, userId: string) => {
    try {
      const offer = await peerConnection.createOffer();
      console.log('Created offer for:', userId);
      await peerConnection.setLocalDescription(offer);
      console.log('Set local description (offer) for:', userId);
      
      socketRef.current?.emit('offer', {
        offer,
        roomId: 'canvas-room',
        userId
      });
    } catch (error) {
      console.error('Error creating offer:', error);
    }
  };

  const handleOffer = async (offer: RTCSessionDescriptionInit, userId: string) => {
    try {
      let peerConnection = peerConnections.current.get(userId);
      if (!peerConnection) {
        console.log('Creating new peer connection for offer from:', userId);
        peerConnection = createPeerConnection(userId, false);
      }

      if (peerConnection.signalingState !== "stable") {
        console.log('Ignoring offer in non-stable state');
        return;
      }

      await peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
      console.log('Set remote description (offer) for:', userId);
      
      const answer = await peerConnection.createAnswer();
      await peerConnection.setLocalDescription(answer);
      console.log('Set local description (answer) for:', userId);
      
      socketRef.current?.emit('answer', {
        answer,
        roomId: 'canvas-room',
        userId
      });

      // Process any pending ICE candidates
      const candidates = pendingCandidates.current.get(userId) || [];
      for (const candidate of candidates) {
        await peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
      }
      pendingCandidates.current.delete(userId);
    } catch (error) {
      console.error('Error handling offer:', error);
    }
  };

  const handleAnswer = async (answer: RTCSessionDescriptionInit, userId: string) => {
    try {
      const peerConnection = peerConnections.current.get(userId);
      if (!peerConnection) {
        console.error('No peer connection found for user:', userId);
        return;
      }

      const currentState = peerConnection.signalingState;
      console.log(`Current signaling state for ${userId}:`, currentState);

      if (currentState === "stable") {
        console.log('Connection already stable with:', userId);
        return;
      }

      if (currentState !== "have-local-offer") {
        console.log(`Unexpected signaling state ${currentState} for answer from:`, userId);
        return;
      }

      await peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
      console.log('Set remote description (answer) for:', userId);
      
      // Process any pending ICE candidates
      const candidates = pendingCandidates.current.get(userId) || [];
      for (const candidate of candidates) {
        await peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
      }
      pendingCandidates.current.delete(userId);
    } catch (error) {
      console.error('Error handling answer:', error);
    }
  };

  const handleIceCandidate = async (candidate: RTCIceCandidateInit, userId: string) => {
    try {
      const peerConnection = peerConnections.current.get(userId);
      if (!peerConnection) {
        console.log('No peer connection found for ICE candidate from:', userId);
        return;
      }

      if (peerConnection.remoteDescription && peerConnection.remoteDescription.type) {
        console.log('Adding ICE candidate for:', userId);
        await peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
      } else {
        console.log('Queueing ICE candidate for:', userId);
        if (!pendingCandidates.current.has(userId)) {
          pendingCandidates.current.set(userId, []);
        }
        pendingCandidates.current.get(userId)?.push(candidate);
      }
    } catch (error) {
      console.error('Error handling ICE candidate:', error);
    }
  };

  const setupDataChannelListeners = (dataChannel: RTCDataChannel, userId: string) => {
    dataChannel.onopen = () => {
      console.log(`Data channel opened with ${userId}`);
    };
    
    dataChannel.onclose = () => {
      console.log(`Data channel closed with ${userId}`);
    };
    
    dataChannel.onerror = (error) => {
      console.error(`Data channel error with ${userId}:`, error);
    };
    
    dataChannel.onmessage = (event) => {
      const { type, x, y } = JSON.parse(event.data);
      handleRemoteDrawing(type, x, y);
    };
  };

  const handleRemoteDrawing = (type: string, x: number, y: number) => {
    if (!canvasRef.current) return;
    const context = canvasRef.current.getContext('2d');
    if (!context) return;

    if (type === 'start') {
      context.beginPath();
      context.moveTo(x, y);
    } else if (type === 'draw') {
      context.lineTo(x, y);
      context.stroke();
    }
  };

  const startDrawing = ({ nativeEvent }: React.MouseEvent) => {
    const { offsetX, offsetY } = nativeEvent;
    const context = canvasRef.current?.getContext('2d');
    if (!context) return;
    
    context.beginPath();
    context.moveTo(offsetX, offsetY);
    setIsDrawing(true);
    sendDrawingData('start', offsetX, offsetY);
  };

  const draw = ({ nativeEvent }: React.MouseEvent) => {
    if (!isDrawing) return;
    const { offsetX, offsetY } = nativeEvent;
    const context = canvasRef.current?.getContext('2d');
    if (!context) return;
    
    context.lineTo(offsetX, offsetY);
    context.stroke();
    sendDrawingData('draw', offsetX, offsetY);
  };

  const stopDrawing = () => {
    setIsDrawing(false);
  };

  const sendDrawingData = (type: string, x: number, y: number) => {
    const message = JSON.stringify({ type, x, y });
    dataChannels.current.forEach((dataChannel) => {
      if (dataChannel.readyState === "open") {
        dataChannel.send(message);
      }
    });
  };

  return (
    <div className="p-4">
      <canvas
        ref={canvasRef}
        width={800}
        height={600}
        className="border bg-gray-100"
        onMouseDown={startDrawing}
        onMouseMove={draw}
        onMouseUp={stopDrawing}
        onMouseLeave={stopDrawing}
      />
    </div>
  );
}

export default App;

전체 흐름

1. 각 사용자 방 입장
   • 각 사용자는 useEffect에서 socketRef.current?.emit('joinRoom', 'canvas-room')을 통해 "canvas-room"에 참여한다.
   • socketRef.current는 서버에 연결된 소켓 클라이언트로, joinRoom 이벤트를 서버에 보낸다.
2. 현재 방에 있는 유저들 정보 수신
   • 방에 입장한 후, 각 사용자는 "room-users" 이벤트로 현재 방에 있는 다른 사용자의 ID 목록을 받는다.
   • 각 사용자는 자신을 제외한 사용자들과의 연결을 위해 createPeerConnection을 호출하여 peerConnection을 생성한다.
3. 새로운 사용자 입장 처리
   • 기존 사용자는 "user-joined" 이벤트를 통해 새로운 사용자가 방에 들어왔음을 감지한다.
   • 새로운 사용자는 createPeerConnection 함수로 기존 사용자들과 연결 설정을 시작한다.
4. Offer-Answer 교환 (시그널링 과정)
   • 새로운 사용자가 기존 사용자에게 createAndSendOffer를 통해 Offer를 생성하고 전송한다.
   • 기존 사용자는 "offer" 이벤트로 Offer를 받으며, handleOffer를 호출하여 받은 Offer에 대한 Answer를 생성하고 상대방에게 전송한다.
   • 새로운 사용자는 "answer" 이벤트를 통해 기존 사용자의 Answer를 받고 handleAnswer 함수로 이를 처리하여 WebRTC 연결을 완료한다.
5. ICE Candidate 교환
   • 네트워크 경로 설정을 위해 ICE Candidate가 교환된다.
   • 각 Peer Connection은 onicecandidate 이벤트를 통해 자신의 ICE Candidate를 생성하여 상대방에게 전송한다.
   • 각 사용자는 "ice-candidate" 이벤트를 통해 받은 ICE Candidate를 handleIceCandidate 함수로 Peer Connection에 추가한다.
6. Data Channel 설정 및 메시지 전송
   • 연결이 완료되면 Data Channel을 통해 그림 데이터가 전송된다.
   • 사용자가 캔버스에서 그림을 그리면 startDrawing, draw, stopDrawing 함수가 호출되며, sendDrawingData로 각 위치 좌표가 Data Channel을 통해 전달된다.
   • 데이터가 수신되면 onmessage 이벤트가 트리거되어 handleRemoteDrawing이 호출되고, 캔버스에 실시간으로 반영된다.