useCanvasDesktop.js

Go to the documentation of this file.

/**
 * Canvas Desktop Hook - Connects to MeshCentral canvas endpoint
 * Replaces the old RDS system with direct MeshCentral integration
 */
 
import { useRef, useState, useEffect, useCallback } from 'react';
 
export function useCanvasDesktop(nodeId) {
  const wsRef = useRef(null);
  const canvasRef = useRef(null);
  const ctxRef = useRef(null);
  
  const [status, setStatus] = useState('disconnected'); // disconnected, connecting, connected, error
  const [error, setError] = useState(null);
  const [capabilities, setCapabilities] = useState([]);
  const [phase, setPhase] = useState(0);
 
  /**
   * Connect to MeshCentral canvas desktop endpoint
   */
  const connect = useCallback(() => {
    if (!nodeId) {
      setError('No node ID provided');
      return;
    }
 
    // Get JWT token from localStorage
    const token = localStorage.getItem('jwt');
    if (!token) {
      setError('No authentication token found');
      return;
    }
 
    // Build WebSocket URL
    const meshCentralUrl = process.env.REACT_APP_MESHCENTRAL_URL || 'wss://rmm-psa-meshcentral-aq48h.ondigitalocean.app';
    const wsUrl = `${meshCentralUrl}/api/canvas-desktop/${encodeURIComponent(nodeId)}?token=${encodeURIComponent(token)}`;
 
    console.log('[Canvas Desktop] Connecting to:', wsUrl.replace(token, 'TOKEN'));
    setStatus('connecting');
    setError(null);
 
    try {
      const ws = new WebSocket(wsUrl);
      ws.binaryType = 'arraybuffer';
      wsRef.current = ws;
 
      ws.onopen = () => {
        console.log('[Canvas Desktop] ✅ WebSocket connected');
        setStatus('connected');
      };
 
      ws.onmessage = (event) => {
        try {
          const msg = JSON.parse(event.data);
          handleMessage(msg);
        } catch (err) {
          console.error('[Canvas Desktop] Failed to parse message:', err);
        }
      };
 
      ws.onerror = (err) => {
        console.error('[Canvas Desktop] ❌ WebSocket error:', err);
        setError('WebSocket connection error');
        setStatus('error');
      };
 
      ws.onclose = () => {
        console.log('[Canvas Desktop] 🔌 WebSocket closed');
        setStatus('disconnected');
      };
 
    } catch (err) {
      console.error('[Canvas Desktop] ❌ Failed to create WebSocket:', err);
      setError(err.message);
      setStatus('error');
    }
  }, [nodeId]);
 
  /**
   * Handle incoming messages
   */
  const handleMessage = (msg) => {
    console.log('[Canvas Desktop] 📨 Message:', msg);
 
    switch (msg.type) {
      case 'connected':
        console.log('[Canvas Desktop] ✅ Authenticated:', msg);
        setCapabilities(msg.capabilities || []);
        setPhase(msg.phase || 1);
        break;
 
      case 'pong':
        console.log('[Canvas Desktop] 🏓 Pong received');
        break;
 
      case 'frame':
        // Phase 2: Handle screen frame data
        if (msg.data && canvasRef.current && ctxRef.current) {
          renderFrame(msg.data);
        }
        break;
 
      case 'error':
        console.error('[Canvas Desktop] ❌ Error from server:', msg.message);
        setError(msg.message);
        setStatus('error');
        break;
 
      default:
        console.log('[Canvas Desktop] Unknown message type:', msg.type);
    }
  };
 
  /**
   * Render frame to canvas (Phase 2)
   */
  const renderFrame = (frameData) => {
    // TODO: Implement canvas rendering
    // This will be added in Phase 2 when screen streaming is implemented
    console.log('[Canvas Desktop] Frame received (not yet implemented)');
  };
 
  /**
   * Send ping to test connection
   */
  const sendPing = useCallback(() => {
    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
      const msg = { type: 'ping', timestamp: Date.now() };
      wsRef.current.send(JSON.stringify(msg));
      console.log('[Canvas Desktop] 📤 Ping sent');
    }
  }, []);
 
  /**
   * Send mouse event (Phase 2)
   */
  const sendMouseEvent = useCallback((e) => {
    if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) return;
    if (!canvasRef.current) return;
 
    const rect = canvasRef.current.getBoundingClientRect();
    const x = (e.clientX - rect.left) / rect.width;
    const y = (e.clientY - rect.top) / rect.height;
 
    const msg = {
      type: 'mouse',
      event: e.type,
      x,
      y,
      button: e.button,
      buttons: e.buttons
    };
 
    wsRef.current.send(JSON.stringify(msg));
  }, []);
 
  /**
   * Send keyboard event (Phase 2)
   */
  const sendKeyEvent = useCallback((e) => {
    if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) return;
 
    const msg = {
      type: 'key',
      event: e.type,
      key: e.key,
      code: e.code,
      ctrlKey: e.ctrlKey,
      shiftKey: e.shiftKey,
      altKey: e.altKey,
      metaKey: e.metaKey
    };
 
    wsRef.current.send(JSON.stringify(msg));
  }, []);
 
  /**
   * Disconnect
   */
  const disconnect = useCallback(() => {
    if (wsRef.current) {
      wsRef.current.close();
      wsRef.current = null;
    }
    setStatus('disconnected');
  }, []);
 
  /**
   * Auto-connect on mount
   */
  useEffect(() => {
    connect();
    return () => disconnect();
  }, [nodeId]); // Only reconnect if nodeId changes
 
  /**
   * Setup canvas context
   */
  useEffect(() => {
    if (canvasRef.current) {
      ctxRef.current = canvasRef.current.getContext('2d');
    }
  }, []);
 
  return {
    // State
    status,
    error,
    capabilities,
    phase,
    
    // Refs
    canvasRef,
    
    // Actions
    connect,
    disconnect,
    sendPing,
    sendMouseEvent,
    sendKeyEvent
  };
}