Function useDrawingSocket

드로잉 데이터의 실시간 공유를 관리하는 Socket Hook입니다.

Remarks

Canvas 컴포넌트에서 발생하는 드로잉을 실시간으로 다른 참가자들과 동기화합니다. useDrawing Hook과 함께 사용되어 로컬 드로잉과 원격 드로잉을 통합 관리합니다.

Example

// GameCanvas.tsx에서의 사용 예시
const GameCanvas = ({ role }: GameCanvasProps) => {
  const { applyDrawing } = useDrawing(canvasRef);

  // 소켓 연결 및 원격 드로잉 처리
  const { isConnected, sendDrawing } = useDrawingSocket({
    onDrawUpdate: (response) => {
      // 원격 드로잉 데이터를 캔버스에 적용
      applyDrawing(response.drawingData);
    }
  });

  // 드로잉 종료 시 데이터 전송
  const handleDrawEnd = useCallback(() => {
    const currentDrawing = getCurrentDrawing();
    if (currentDrawing && isConnected) {
      sendDrawing(currentDrawing);
    }
    stopDrawing();
  }, [stopDrawing, sendDrawing]);

  return <Canvas {...props} />;
};
  • useDrawingSocket(props): {
        isConnected: any;
    }

  • Parameters

    • props: UseDrawingSocketProps

      Hook 설정

    Returns {
        isConnected: any;
    }

    • isConnected - 드로잉 소켓 연결 상태
    • sendDrawing - 드로잉 데이터를 다른 참가자들에게 전송하는 함수
    • isConnected: any

Settings

Member Visibility