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

실시간 1:1 화상채팅 구현하기

개발 환경

• client : vite + react + ts
• server : nestjs

서버

main.ts

// server/src/main.ts
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors();
  await app.listen(3000);
}
bootstrap();

app.module.ts

// server/src/app.module.ts
import { Module } from '@nestjs/common';
import { WebRTCGateway } from './webrtc.gateway';

@Module({
  providers: [WebRTCGateway],
})
export class AppModule {}

webrtc.gateway.ts

1. 전체 코드

// server/src/webrtc.gateway.ts
import {
  WebSocketGateway,
  SubscribeMessage,
  WebSocketServer,
} from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';

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

  @SubscribeMessage('offer')
  handleOffer(client: Socket, offer: RTCSessionDescriptionInit): void {
    client.broadcast.emit('offer', offer);
  }

  @SubscribeMessage('answer')
  handleAnswer(client: Socket, answer: RTCSessionDescriptionInit): void {
    client.broadcast.emit('answer', answer);
  }

  @SubscribeMessage('ice-candidate')
  handleIceCandidate(client: Socket, candidate: RTCIceCandidateInit): void {
    client.broadcast.emit('ice-candidate', candidate);
  }
}

1. 코드 설명

@WebSocketGateway({
  cors: {
    origin: '*',
  },
})

• @WebSocketGateway() 데코레이터는 WebSocket 게이트웨이를 정의하는 데 사용되며, 여기에 WebSocket 서버의 설정을 추가할 수 있다.
• cors: { origin: '*' }: CORS 설정으로, 모든 도메인에서 WebSocket 서버에 접근할 수 있도록 허용한다. 실제 서비스에서는 보안성을 위해 특정 도메인만 허용하는 것이 좋다.

export class WebRTCGateway {
  @WebSocketServer() server: Server;

• server: Server: WebSocket 서버 인스턴스로, @WebSocketServer() 데코레이터를 사용하여 Server 타입의 WebSocket 서버를 생성한다. 이를 통해 서버의 모든 클라이언트에 접근할 수 있으며, 특정 클라이언트에게 메시지를 전송할 수 있다.

@SubscribeMessage('offer')
  handleOffer(client: Socket, offer: RTCSessionDescriptionInit): void {
    client.broadcast.emit('offer', offer);
  }

• @SubscribeMessage('offer'): offer라는 이벤트를 수신했을 때 이 메서드를 실행한다.
• client.broadcast.emit('offer', offer): 이 클라이언트를 제외한 모든 클라이언트에게 offer 메시지를 브로드캐스트한다.
• 즉, WebRTC 연결을 시작할 때 사용되는 offer(제안) 메시지를 다른 클라이언트에게 전달하여 연결을 시작하도록 한다.

@SubscribeMessage('answer')
  handleAnswer(client: Socket, answer: RTCSessionDescriptionInit): void {
    client.broadcast.emit('answer', answer);
  }

• @SubscribeMessage('answer'): answer라는 이벤트를 수신했을 때 이 메서드를 실행한다.
• client.broadcast.emit('answer', answer): 이 클라이언트를 제외한 모든 클라이언트에게 answer 메시지를 브로드캐스트한다.
• 즉, offer에 대한 응답으로 제공되는 answer 메시지를 브로드캐스트하여 WebRTC 연결을 완료하도록 한다.

@SubscribeMessage('ice-candidate')
  handleIceCandidate(client: Socket, candidate: RTCIceCandidateInit): void {
    client.broadcast.emit('ice-candidate', candidate);
  }

• @SubscribeMessage('ice-candidate'): ice-candidate 이벤트를 수신했을 때 이 메서드를 실행한다.
• client.broadcast.emit('ice-candidate', candidate): 이 클라이언트를 제외한 모든 클라이언트에게 ICE 후보 정보를 브로드캐스트한다.
• 즉, WebRTC 피어 간 연결을 최적화하기 위해 사용하는 ICE 후보 정보를 다른 클라이언트들에게 전달하여 네트워크 연결을 강화한다.

클라이언트

App.tsx

1. 전체 코드

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 localVideoRef = useRef<HTMLVideoElement>(null)
  const remoteVideoRef = useRef<HTMLVideoElement>(null)
  const peerConnectionRef = useRef<RTCPeerConnection | null>(null)
  const socketRef = useRef<SocketType>()
  const [isConnected, setIsConnected] = useState(false)

  useEffect(() => {
    // 소켓 연결
    socketRef.current = io(SOCKET_SERVER)

    // 소켓 이벤트 리스너
    socketRef.current.on('offer', handleOffer)
    socketRef.current.on('answer', handleAnswer)
    socketRef.current.on('ice-candidate', handleIceCandidate)

    return () => {
      socketRef.current?.disconnect()
    }
  }, [])

  const startVideo = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true
      })

      if (localVideoRef.current) {
        localVideoRef.current.srcObject = stream
      }

      // WebRTC 연결 초기화
      peerConnectionRef.current = new RTCPeerConnection({
        iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
      })

      // 로컬 스트림 추가
      stream.getTracks().forEach(track => {
        if (peerConnectionRef.current) {
          peerConnectionRef.current.addTrack(track, stream)
        }
      })

      // 원격 스트림 처리
      peerConnectionRef.current.ontrack = (event) => {
        if (remoteVideoRef.current) {
          remoteVideoRef.current.srcObject = event.streams[0]
        }
      }

      // ICE candidate 이벤트
      peerConnectionRef.current.onicecandidate = (event) => {
        if (event.candidate) {
          socketRef.current?.emit('ice-candidate', event.candidate)
        }
      }

      setIsConnected(true)
    } catch (error) {
      console.error('Error accessing media devices:', error)
    }
  }

  const makeCall = async () => {
    if (!peerConnectionRef.current) return

    try {
      const offer = await peerConnectionRef.current.createOffer()
      await peerConnectionRef.current.setLocalDescription(offer)
      socketRef.current?.emit('offer', offer)
    } catch (error) {
      console.error('Error creating offer:', error)
    }
  }

  const handleOffer = async (offer: RTCSessionDescriptionInit) => {
    if (!peerConnectionRef.current) return

    try {
      await peerConnectionRef.current.setRemoteDescription(new RTCSessionDescription(offer))
      const answer = await peerConnectionRef.current.createAnswer()
      await peerConnectionRef.current.setLocalDescription(answer)
      socketRef.current?.emit('answer', answer)
    } catch (error) {
      console.error('Error handling offer:', error)
    }
  }

  const handleAnswer = async (answer: RTCSessionDescriptionInit) => {
    if (!peerConnectionRef.current) return

    try {
      await peerConnectionRef.current.setRemoteDescription(new RTCSessionDescription(answer))
    } catch (error) {
      console.error('Error handling answer:', error)
    }
  }

  const handleIceCandidate = async (candidate: RTCIceCandidateInit) => {
    if (!peerConnectionRef.current) return

    try {
      await peerConnectionRef.current.addIceCandidate(new RTCIceCandidate(candidate))
    } catch (error) {
      console.error('Error handling ICE candidate:', error)
    }
  }

  const hangUp = () => {
    if (peerConnectionRef.current) {
      peerConnectionRef.current.close()
      peerConnectionRef.current = null
    }

    if (localVideoRef.current) {
      const stream = localVideoRef.current.srcObject as MediaStream
      stream?.getTracks().forEach(track => track.stop())
      localVideoRef.current.srcObject = null
    }

    if (remoteVideoRef.current) {
      remoteVideoRef.current.srcObject = null
    }

    setIsConnected(false)
  }

  return (
    <div className="p-4">
      <div className="flex gap-4 mb-4">
        <div className="w-[400px] h-[300px] bg-gray-200">
          <video
            ref={localVideoRef}
            autoPlay
            playsInline
            muted
            className="w-full h-full object-cover"
          />
        </div>
        <div className="w-[400px] h-[300px] bg-gray-200">
          <video
            ref={remoteVideoRef}
            autoPlay
            playsInline
            className="w-full h-full object-cover"
          />
        </div>
      </div>
      <div className="flex gap-4">
        <button
          onClick={startVideo}
          disabled={isConnected}
          className="px-4 py-2 bg-blue-500 text-white rounded disabled:bg-gray-400"
        >
          Start Video
        </button>
        <button
          onClick={makeCall}
          disabled={!isConnected}
          className="px-4 py-2 bg-green-500 text-white rounded disabled:bg-gray-400"
        >
          Call
        </button>
        <button
          onClick={hangUp}
          disabled={!isConnected}
          className="px-4 py-2 bg-red-500 text-white rounded disabled:bg-gray-400"
        >
          Hang Up
        </button>
      </div>
    </div>
  )
}

export default App;

1. 전체 흐름

• Start Video 버튼 클릭
  • 로컬 비디오 및 오디오 스트림을 가져와 화면에 표시하고, WebRTC 연결을 초기화한다.
• Call 버튼 클릭
  • 연결 제안(offer)을 생성하여 상대방에게 전송한다.
• 상대방이 offer를 수신하고 answer로 응답
  • 연결이 완료되고 두 클라이언트 간의 P2P 비디오 통화가 시작된다.
• 통화 중 ICE Candidate 교환
  • 네트워크 최적화 정보가 교환되어 안정적인 연결을 유지한다.
• Hang Up 버튼 클릭
  • WebRTC 연결 및 비디오 스트림을 정리하여 통화를 종료한다.

1. 코드 설명

주요 변수

• localVideoRef: 로컬(자신)의 비디오 스트림을 표시할 <video> 요소에 대한 참조이다.
• remoteVideoRef: 상대방의 비디오 스트림을 표시할 <video> 요소에 대한 참조이다.
• peerConnectionRef: WebRTC RTCPeerConnection 인스턴스를 참조하며, 피어 간 P2P 연결을 관리한다.
• socketRef: WebSocket 연결을 위한 Socket.IO 소켓을 참조한다.
• isConnected: 로컬 스트림 연결 상태를 나타내며, 연결된 경우 버튼 상태를 변경한다.

주요 함수

useEffect(() => {
    // 소켓 연결
    socketRef.current = io(SOCKET_SERVER)

    // 소켓 이벤트 리스너
    socketRef.current.on('offer', handleOffer)
    socketRef.current.on('answer', handleAnswer)
    socketRef.current.on('ice-candidate', handleIceCandidate)

    return () => {
      socketRef.current?.disconnect()
    }
  }, [])

• socketRef를 사용하여 서버에 소켓 연결을 설정하고 이벤트 리스너를 등록한다.
• offer, answer, ice-candidate 이벤트를 수신하여 WebRTC 연결을 위한 신호를 처리한다.
• 컴포넌트가 언마운트될 때 disconnect로 소켓 연결을 해제한다.

const startVideo = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true
      })

      if (localVideoRef.current) {
        localVideoRef.current.srcObject = stream
      }

      // WebRTC 연결 초기화
      peerConnectionRef.current = new RTCPeerConnection({
        iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
      })

      // 로컬 스트림 추가
      stream.getTracks().forEach(track => {
        if (peerConnectionRef.current) {
          peerConnectionRef.current.addTrack(track, stream)
        }
      })

      // 원격 스트림 처리
      peerConnectionRef.current.ontrack = (event) => {
        if (remoteVideoRef.current) {
          remoteVideoRef.current.srcObject = event.streams[0]
        }
      }

      // ICE candidate 이벤트
      peerConnectionRef.current.onicecandidate = (event) => {
        if (event.candidate) {
          socketRef.current?.emit('ice-candidate', event.candidate)
        }
      }

      setIsConnected(true)
    } catch (error) {
      console.error('Error accessing media devices:', error)
    }
  }

• 로컬 미디어 설정: getUserMedia를 사용하여 비디오 및 오디오 스트림을 가져와 로컬 비디오에 표시한다.
• WebRTC 연결 초기화: RTCPeerConnection을 생성하고, STUN 서버를 사용하여 NAT 방화벽을 통해 피어 연결을 설정한다.
• 스트림 추가: 로컬 비디오 스트림의 각 트랙을 P2P 연결에 추가한다.
• 원격 스트림 수신: 상대방의 비디오 스트림을 받아 remoteVideoRef에 표시한다.
• ICE Candidate 이벤트: ICE candidate가 발견되면 소켓을 통해 상대방에게 전달한다.
  • RTCPeerConnection 객체가 생성되고 createOffer 또는 createAnswer 메서드가 호출되면, WebRTC는 자동으로 네트워크 탐색을 시작한다.
  • 즉, ice 후보 교환을 위해서는 이벤트 핸들러만 등록해주면 된다.

const makeCall = async () => {
  if (!peerConnectionRef.current) return;

  try {
    const offer = await peerConnectionRef.current.createOffer();
    await peerConnectionRef.current.setLocalDescription(offer);
    socketRef.current?.emit('offer', offer);
  } catch (error) {
    console.error('Error creating offer:', error);
  }
};

• 호출 시작: createOffer를 호출하여 연결 요청(offer)을 생성하고, 로컬 설명으로 설정한 뒤, 소켓을 통해 상대방에게 offer를 보낸다.

const handleOffer = async (offer: RTCSessionDescriptionInit) => {
  if (!peerConnectionRef.current) return;

  try {
    await peerConnectionRef.current.setRemoteDescription(new RTCSessionDescription(offer));
    const answer = await peerConnectionRef.current.createAnswer();
    await peerConnectionRef.current.setLocalDescription(answer);
    socketRef.current?.emit('answer', answer);
  } catch (error) {
    console.error('Error handling offer:', error);
  }
};

• Offer 수신 및 응답 생성: 상대방의 offer를 받아 remote description으로 설정하고, createAnswer로 응답(answer)을 생성하여 상대방에게 전달한다.

const handleAnswer = async (answer: RTCSessionDescriptionInit) => {
  if (!peerConnectionRef.current) return;

  try {
    await peerConnectionRef.current.setRemoteDescription(new RTCSessionDescription(answer));
  } catch (error) {
    console.error('Error handling answer:', error);
  }
};

• Answer 수신: 상대방의 answer를 받아 원격 설명으로 설정하여 연결을 완료한다.

const handleIceCandidate = async (candidate: RTCIceCandidateInit) => {
  if (!peerConnectionRef.current) return;

  try {
    await peerConnectionRef.current.addIceCandidate(new RTCIceCandidate(candidate));
  } catch (error) {
    console.error('Error handling ICE candidate:', error);
  }
};

• ICE Candidate 수신: ICE 후보를 수신하여 P2P 연결에 추가한다. ICE 후보는 네트워크 연결을 최적화하여 더 나은 연결 경로를 제공한다.

const hangUp = () => {
  if (peerConnectionRef.current) {
    peerConnectionRef.current.close();
    peerConnectionRef.current = null;
  }

  if (localVideoRef.current) {
    const stream = localVideoRef.current.srcObject as MediaStream;
    stream?.getTracks().forEach(track => track.stop());
    localVideoRef.current.srcObject = null;
  }

  if (remoteVideoRef.current) {
    remoteVideoRef.current.srcObject = null;
  }

  setIsConnected(false);
};

• 종료 처리: 연결을 종료하고, 로컬 및 원격 스트림을 해제하여 통화를 종료한다. setIsConnected(false)로 연결 상태를 초기화한다.

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

클라이언트

수정된 App.tsx

const startConnection = () => {
  peerConnectionRef.current = new RTCPeerConnection({
    iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
  })

  peerConnectionRef.current.onicecandidate = (event) => {
    if (event.candidate) {
      socketRef.current?.emit('ice-candidate', event.candidate)
    }
  }

  dataChannelRef.current = peerConnectionRef.current.createDataChannel("canvas")
  setupDataChannelListeners()

  makeCall() // 상대방에게 offer를 보낸다.
}

• STUN 서버 설정: WebRTC 연결 설정에 필요한 공용 STUN 서버를 설정한다. STUN 서버는 각 클라이언트의 공용 IP 주소와 네트워크 포트를 결정해 NAT 방화벽을 통과할 수 있도록 도와준다.
• ICE 후보 전송: onicecandidate 이벤트가 발생할 때마다 ICE 후보를 소켓을 통해 전송하여 WebRTC 연결이 원활하게 이루어질 수 있도록 한다.
• 데이터 채널 생성: peerConnectionRef에서 createDataChannel을 사용해 "canvas"라는 이름의 데이터 채널을 생성한다. 이 데이터 채널을 통해 실시간 그리기 정보를 주고받을 수 있다.
• makeCall 호출: WebRTC 연결을 초기화하고 상대방에게 연결 요청을 보낸다.

const setupDataChannelListeners = () => {
    dataChannelRef.current!.onopen = () => console.log("Data channel opened")
    dataChannelRef.current!.onmessage = (event) => {
      const { type, x, y } = JSON.parse(event.data)
      handleRemoteDrawing(type, x, y)
    }
  }

• 데이터 채널 열림 감지: onopen 이벤트를 통해 데이터 채널이 성공적으로 열렸음을 확인할 수 있다.
• 메시지 수신: onmessage 이벤트에서 상대방으로부터 그리기 데이터(type, x, y)를 JSON 형식으로 수신한다. 데이터를 파싱한 후 handleRemoteDrawing 함수로 전달하여 원격 그리기 동작을 수행한다.

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()
  }
}

• type에 따른 작업 분기
  • start: 원격 사용자가 새로운 선을 시작할 때 호출된다. beginPath와 moveTo로 시작점을 설정한다.
  • draw: lineTo와 stroke를 사용하여 시작점에서 지정된 좌표까지 선을 그리고, 화면에 반영한다.
• 이 로직을 통해 원격 사용자의 캔버스 그리기 동작이 로컬 캔버스에도 실시간으로 동기화된다.

const startDrawing = ({ nativeEvent }: React.MouseEvent) => {
    const { offsetX, offsetY } = nativeEvent
    const context = canvasRef.current!.getContext('2d')
    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')
    context?.lineTo(offsetX, offsetY)
    context?.stroke()
    sendDrawingData('draw', offsetX, offsetY)
  }
  
  const stopDrawing = () => {
    setIsDrawing(false)
  }

• startDrawing: 마우스를 누르면 beginPath로 새 경로를 시작하고, 시작 지점을 설정한다. sendDrawingData로 start 타입의 그리기 데이터를 전송한다.
• draw: 마우스를 드래그할 때마다 lineTo로 선을 그리며, draw 타입의 그리기 데이터를 전송한다.
• stopDrawing: 마우스 버튼을 떼면 그리기 동작을 중단한다.

const sendDrawingData = (type: string, x: number, y: number) => {
    const message = JSON.stringify({ type, x, y })
    dataChannelRef.current?.send(message)
}

• 각 그리기 동작에서 좌표와 타입(start 또는 draw)을 JSON으로 인코딩한 후 dataChannelRef를 통해 다른 피어에게 전송한다.

const handleOffer = async (offer: RTCSessionDescriptionInit) => {
    peerConnectionRef.current = new RTCPeerConnection({
      iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
    })

    peerConnectionRef.current.ondatachannel = (event) => {
      dataChannelRef.current = event.channel
      setupDataChannelListeners()
    }

    peerConnectionRef.current.onicecandidate = (event) => {
      if (event.candidate) {
        socketRef.current?.emit('ice-candidate', event.candidate)
      }
    }

		// 기존과 동일한 로직
  }

전체 코드

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 peerConnectionRef = useRef<RTCPeerConnection | null>(null)
  const dataChannelRef = useRef<RTCDataChannel | null>(null)
  const socketRef = useRef<SocketType>()
  const [isDrawing, setIsDrawing] = useState(false)

  useEffect(() => {
    // Initialize socket connection
    socketRef.current = io(SOCKET_SERVER)
    socketRef.current.on('offer', handleOffer)
    socketRef.current.on('answer', handleAnswer)
    socketRef.current.on('ice-candidate', handleIceCandidate)

    return () => {
      socketRef.current?.disconnect()
    }
  }, [])

  const startConnection = () => {
    peerConnectionRef.current = new RTCPeerConnection({
      iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
    })

    // Setup ICE candidate handling
    peerConnectionRef.current.onicecandidate = (event) => {
      if (event.candidate) {
        socketRef.current?.emit('ice-candidate', event.candidate)
      }
    }

    // Setup Data Channel
    dataChannelRef.current = peerConnectionRef.current.createDataChannel("canvas")
    setupDataChannelListeners()

    makeCall()
  }

  const setupDataChannelListeners = () => {
    dataChannelRef.current!.onopen = () => console.log("Data channel opened")
    dataChannelRef.current!.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')
    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')
    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 })
    dataChannelRef.current?.send(message)
  }

  const makeCall = async () => {
    try {
      const offer = await peerConnectionRef.current!.createOffer()
      await peerConnectionRef.current!.setLocalDescription(offer)
      socketRef.current?.emit('offer', offer)
    } catch (error) {
      console.error('Error creating offer:', error)
    }
  }

  const handleOffer = async (offer: RTCSessionDescriptionInit) => {
    peerConnectionRef.current = new RTCPeerConnection({
      iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
    })

    peerConnectionRef.current.ondatachannel = (event) => {
      dataChannelRef.current = event.channel
      setupDataChannelListeners()
    }

    peerConnectionRef.current.onicecandidate = (event) => {
      if (event.candidate) {
        socketRef.current?.emit('ice-candidate', event.candidate)
      }
    }

    try {
      await peerConnectionRef.current.setRemoteDescription(new RTCSessionDescription(offer))
      const answer = await peerConnectionRef.current.createAnswer()
      await peerConnectionRef.current.setLocalDescription(answer)
      socketRef.current?.emit('answer', answer)
    } catch (error) {
      console.error('Error handling offer:', error)
    }
  }

  const handleAnswer = async (answer: RTCSessionDescriptionInit) => {
    try {
      await peerConnectionRef.current?.setRemoteDescription(new RTCSessionDescription(answer))
    } catch (error) {
      console.error('Error handling answer:', error)
    }
  }

  const handleIceCandidate = async (candidate: RTCIceCandidateInit) => {
    try {
      await peerConnectionRef.current?.addIceCandidate(new RTCIceCandidate(candidate))
    } catch (error) {
      console.error('Error handling ICE candidate:', error)
    }
  }

  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}
      />
      <button onClick={startConnection} className="mt-4 px-4 py-2 bg-blue-500 text-white rounded">
        Start Collaboration
      </button>
    </div>
  )
}

export default App;

전체 흐름

클라이언트 A (연결 시작)

1. 연결 초기화
   • 클라이언트 A는 WebRTC 연결을 설정하고, 데이터 채널을 생성한다.
2. Offer 생성 및 전송
   • WebRTC 연결 요청인 Offer를 생성하고, 이를 서버를 통해 클라이언트 B에게 전송한다.
3. ICE 후보 전송
   • 네트워크 경로 설정을 돕기 위해 ICE 후보를 서버를 통해 클라이언트 B에게 전송한다.
4. 데이터 전송 준비
   • 데이터 채널이 열리면, 클라이언트 A는 캔버스에서 발생하는 그리기 동작을 실시간으로 데이터 채널을 통해 클라이언트 B로 전송한다.

---

클라이언트 B (Offer 수신 및 응답)

1. Offer 수신 및 처리
   • 클라이언트 B는 서버를 통해 받은 Offer를 WebRTC 연결 설정에 사용한다.
   • 클라이언트 B는 상대방의 데이터 채널을 감지하고, 이벤트 리스너를 설정한다.
2. Answer 생성 및 전송
   • Offer에 대한 응답으로 Answer를 생성하고 서버를 통해 클라이언트 A에게 전송한다.
3. ICE 후보 수신 및 처리
   • 서버를 통해 수신한 클라이언트 A의 ICE 후보를 사용해 최적화된 네트워크 경로를 설정한다.

---

연결 완료 후 (A ↔ B 상호작용)

• 실시간 캔버스 동기화
  • A와 B는 서로 데이터 채널을 통해 그리기 데이터를 주고받는다.
  • 각 클라이언트는 상대방의 그리기 동작을 실시간으로 수신하여 자신의 캔버스에 반영한다.