MeshDesktopViewer.jsx

Go to the documentation of this file.

/**
 * MeshCentral Desktop Viewer Component
 * Direct integration with MeshCentral's desktop multiplexer
 * Supports KVM (Keyboard, Video, Mouse) operations
 */
 
import React, { useRef, useState, useEffect, useCallback } from 'react';
import './MeshDesktopViewer.css';
 
export default function MeshDesktopViewer({ meshcentralNodeId, meshcentralUrl, onError }) {
  const canvasRef = useRef(null);
  const wsRef = useRef(null);
  const ctxRef = useRef(null);
  
  const [status, setStatus] = useState('disconnected');
  const [desktopInfo, setDesktopInfo] = useState(null);
  const [canvasSize, setCanvasSize] = useState({ width: 1024, height: 768 });
  const [isFullscreen, setIsFullscreen] = useState(false);
  
  // Mouse state for relative mode
  const mouseState = useRef({ x: 0, y: 0, buttons: 0 });
  
  /**
   * Connect to MeshCentral desktop stream
   */
  const connect = useCallback(() => {
    if (!meshcentralNodeId) {
      onError?.('No node ID provided');
      return;
    }
    
    setStatus('connecting');
    
    // Get JWT from localStorage
    const token = localStorage.getItem('token');
    
    if (!token) {
      console.error('[MeshDesktop] No authentication token found in localStorage');
      setStatus('error');
      onError?.('No authentication token found. Please log in again.');
      return;
    }
    
    console.log('[MeshDesktop] Token found:', token.substring(0, 20) + '...');
    
    // Build WebSocket URL for desktop connection
    // Use our custom canvas-desktop endpoint
    const baseUrl = (meshcentralUrl || 'wss://rmm-psa-meshcentral-aq48h.ondigitalocean.app').replace(/^https/, 'wss');
    const wsUrl = `${baseUrl}/api/canvas-desktop/${encodeURIComponent(meshcentralNodeId)}${token ? `?token=${encodeURIComponent(token)}` : ''}`;
    
    console.log('[MeshDesktop] Connecting to:', wsUrl.replace(token || '', 'TOKEN'));
    
    try {
      const ws = new WebSocket(wsUrl);
      ws.binaryType = 'arraybuffer';
      wsRef.current = ws;
      
      ws.onopen = () => {
        console.log('[MeshDesktop] ✅ Connected');
        setStatus('connected');
        
        // Don't send initial options - wait for 'connected' message first
      };
      
      ws.onmessage = (event) => {
        handleMessage(event);
      };
      
      ws.onerror = (err) => {
        console.error('[MeshDesktop] ❌ Error:', err);
        setStatus('error');
        onError?.('Connection error');
      };
      
      ws.onclose = () => {
        console.log('[MeshDesktop] 🔌 Disconnected');
        setStatus('disconnected');
      };
      
    } catch (err) {
      console.error('[MeshDesktop] ❌ Failed to create WebSocket:', err);
      setStatus('error');
      onError?.(err.message);
    }
  }, [meshcentralNodeId, meshcentralUrl, onError]);
  
  /**
   * Handle incoming messages from MeshCentral
   */
  const handleMessage = useCallback((event) => {
    const data = event.data;
    
    // Check if binary (desktop tiles/images) or text (JSON control)
    if (data instanceof ArrayBuffer || data instanceof Blob) {
      // Binary desktop data from MeshCentral multiplexor
      handleBinaryMessage(data);
    } else if (typeof data === 'string') {
      // JSON control messages
      try {
        const msg = JSON.parse(data);
        handleJSONMessage(msg);
      } catch (err) {
        console.error('[MeshDesktop] Failed to parse JSON:', err);
      }
    }
  }, []);
  
  /**
   * Handle JSON command messages
   */
  const handleJSONMessage = (msg) => {
    console.log('[MeshDesktop] JSON message:', msg);
    
    switch (msg.action || msg.type) {
      case 'test':
        console.log('[MeshDesktop] Test message received:', msg.message);
        break;
        
      case 'connected':
        console.log('[MeshDesktop] Connected to canvas endpoint, Phase:', msg.phase);
        console.log('[MeshDesktop] Capabilities:', msg.capabilities);
        break;
        
      case 'ready':
        console.log('[MeshDesktop] Desktop streaming ready');
        // Desktop stream should start automatically now
        break;
      
      case 'metadata':
      case 'console':
        // Desktop metadata (resolution, etc.)
        if (msg.width && msg.height) {
          setDesktopInfo({ width: msg.width, height: msg.height });
          setCanvasSize({ width: msg.width, height: msg.height });
          console.log('[MeshDesktop] Desktop resolution:', msg.width, 'x', msg.height);
        }
        break;
        
      case 'error':
        console.error('[MeshDesktop] Server error:', msg.message || msg.msg);
        onError?.(msg.message || msg.msg || 'Unknown error');
        break;
        
      default:
        console.log('[MeshDesktop] Unknown message:', msg);
    }
  };
  
  /**
   * Handle binary frame data from MeshCentral desktop multiplexor
   * MeshCentral uses a custom tile-based protocol
   */
  const handleBinaryMessage = (data) => {
    if (!canvasRef.current || !ctxRef.current) return;
    
    // Convert to ArrayBuffer if it's a Blob
    if (data instanceof Blob) {
      data.arrayBuffer().then(buffer => processMeshData(buffer));
    } else {
      processMeshData(data);
    }
  };
  
  /**
   * Process MeshCentral desktop protocol data
   */
  const processMeshData = (buffer) => {
    // MeshCentral desktop protocol format:
    // First byte is command type
    const view = new DataView(buffer);
    
    if (buffer.byteLength < 1) return;
    
    const cmd = view.getUint8(0);
    
    // Display resolution/info command
    if (cmd === 65 && buffer.byteLength >= 17) { // 'A' - Display info
      const width = view.getUint16(1, true);
      const height = view.getUint16(3, true);
      
      console.log('[MeshDesktop] Display resolution:', width, 'x', height);
      
      if (width > 0 && height > 0) {
        setDesktopInfo({ width, height });
        setCanvasSize({ width, height });
        
        // Resize canvas
        if (canvasRef.current) {
          canvasRef.current.width = width;
          canvasRef.current.height = height;
        }
      }
    }
    // JPEG tile data
    else if (cmd === 3 && buffer.byteLength > 13) {
      // Desktop tile command: cmd(1) + x(2) + y(2) + width(2) + height(2) + imgType(1) + imgLen(3) + imgData
      const x = view.getUint16(1, true);
      const y = view.getUint16(3, true);
      const width = view.getUint16(5, true);
      const height = view.getUint16(7, true);
      const imgType = view.getUint8(9);
      
      // Image data starts at byte 13
      const imgData = buffer.slice(13);
      
      // Create blob and load as image
      const blob = new Blob([imgData], { type: 'image/jpeg' });
      const url = URL.createObjectURL(blob);
      
      const img = new Image();
      img.onload = () => {
        if (ctxRef.current && canvasRef.current) {
          // Draw tile at specified position
          ctxRef.current.drawImage(img, x, y, width, height);
        }
        URL.revokeObjectURL(url);
      };
      img.onerror = () => {
        console.error('[MeshDesktop] Failed to load tile image');
        URL.revokeObjectURL(url);
      };
      img.src = url;
    }
    // Console message
    else if (cmd === 99) { // 'c' - console message
      const message = new TextDecoder().decode(buffer.slice(1));
      console.log('[MeshDesktop] Console:', message);
    }
  };
  
  /**
   * Send command to MeshCentral
   */
  const sendCommand = useCallback((type, data) => {
    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
      const msg = { action: type, ...data };
      wsRef.current.send(JSON.stringify(msg));
      console.log('[MeshDesktop] 📤 Sent:', type, data);
    }
  }, []);
  
  /**
   * Mouse event handler
   */
  const handleMouseEvent = useCallback((e) => {
    if (!canvasRef.current || status !== 'connected') return;
    
    e.preventDefault();
    
    const rect = canvasRef.current.getBoundingClientRect();
    const x = Math.floor((e.clientX - rect.left) * (canvasSize.width / rect.width));
    const y = Math.floor((e.clientY - rect.top) * (canvasSize.height / rect.height));
    
    // Update mouse state
    mouseState.current.x = x;
    mouseState.current.y = y;
    mouseState.current.buttons = e.buttons;
    
    // Send mouse event to MeshCentral
    // Protocol: mouse,x,y,buttons
    if (e.type === 'mousemove') {
      sendCommand('mouse', { x, y });
    } else if (e.type === 'mousedown' || e.type === 'mouseup') {
      const button = e.button === 0 ? 1 : e.button === 2 ? 2 : e.button === 1 ? 4 : 0;
      sendCommand('mousebutton', { x, y, button, down: e.type === 'mousedown' });
    }
  }, [canvasSize, status, sendCommand]);
  
  /**
   * Keyboard event handler
   */
  const handleKeyboardEvent = useCallback((e) => {
    if (status !== 'connected') return;
    
    // Prevent default browser shortcuts
    if (e.ctrlKey || e.altKey || e.metaKey) {
      e.preventDefault();
    }
    
    const keyCode = e.keyCode || e.which;
    const isDown = e.type === 'keydown';
    
    // Send keyboard event to MeshCentral
    sendCommand('key', { 
      keyCode, 
      key: e.key,
      code: e.code,
      down: isDown,
      shift: e.shiftKey,
      ctrl: e.ctrlKey,
      alt: e.altKey,
      meta: e.metaKey
    });
    
    e.preventDefault();
  }, [status, sendCommand]);
  
  /**
   * Toggle fullscreen
   */
  const toggleFullscreen = () => {
    const container = canvasRef.current?.parentElement;
    if (!container) return;
    
    if (!document.fullscreenElement) {
      container.requestFullscreen?.()
        || container.webkitRequestFullscreen?.()
        || container.mozRequestFullScreen?.();
      setIsFullscreen(true);
    } else {
      document.exitFullscreen?.()
        || document.webkitExitFullscreen?.()
        || document.mozCancelFullScreen?.();
      setIsFullscreen(false);
    }
  };
  
  /**
   * Send Ctrl+Alt+Del
   */
  const sendCtrlAltDel = () => {
    sendCommand('key', { special: 'cad' });
  };
  
  /**
   * Disconnect
   */
  const disconnect = () => {
    if (wsRef.current) {
      wsRef.current.close();
      wsRef.current = null;
    }
    setStatus('disconnected');
  };
  
  // Auto-connect on mount
  useEffect(() => {
    connect();
    
    // Setup canvas context
    if (canvasRef.current) {
      ctxRef.current = canvasRef.current.getContext('2d');
    }
    
    return () => {
      disconnect();
    };
  }, [meshcentralNodeId]);
  
  // Keyboard focus management
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    
    // Set tabindex to make canvas focusable
    canvas.setAttribute('tabindex', '0');
    
    // Focus canvas automatically when connected
    if (status === 'connected') {
      canvas.focus();
    }
  }, [status]);
  
  return (
    <div className="mesh-desktop-viewer">
      {/* Toolbar */}
      <div className="mesh-desktop-toolbar">
        <div className="toolbar-status">
          <span className={`status-indicator status-${status}`}>●</span>
          <span className="status-text">
            {status === 'connected' ? 'Connected' : 
             status === 'connecting' ? 'Connecting...' : 
             status === 'error' ? 'Error' : 'Disconnected'}
          </span>
          {desktopInfo && (
            <span className="desktop-info">
              {desktopInfo.width} × {desktopInfo.height}
            </span>
          )}
        </div>
        
        <div className="toolbar-actions">
          <button 
            onClick={sendCtrlAltDel}
            disabled={status !== 'connected'}
            title="Send Ctrl+Alt+Del"
            className="toolbar-btn"
          >
            <span className="material-symbols-outlined">keyboard</span>
            Ctrl+Alt+Del
          </button>
          
          <button 
            onClick={toggleFullscreen}
            title="Toggle Fullscreen"
            className="toolbar-btn"
          >
            <span className="material-symbols-outlined">
              {isFullscreen ? 'fullscreen_exit' : 'fullscreen'}
            </span>
          </button>
          
          <button 
            onClick={connect}
            disabled={status === 'connecting' || status === 'connected'}
            title="Reconnect"
            className="toolbar-btn"
          >
            <span className="material-symbols-outlined">refresh</span>
          </button>
          
          <button 
            onClick={disconnect}
            disabled={status === 'disconnected'}
            title="Disconnect"
            className="toolbar-btn btn-danger"
          >
            <span className="material-symbols-outlined">close</span>
          </button>
        </div>
      </div>
      
      {/* Canvas container */}
      <div className="mesh-desktop-canvas-container">
        <canvas
          ref={canvasRef}
          width={canvasSize.width}
          height={canvasSize.height}
          onMouseMove={handleMouseEvent}
          onMouseDown={handleMouseEvent}
          onMouseUp={handleMouseEvent}
          onContextMenu={(e) => e.preventDefault()}
          onKeyDown={handleKeyboardEvent}
          onKeyUp={handleKeyboardEvent}
          className="mesh-desktop-canvas"
        />
        
        {status === 'connecting' && (
          <div className="mesh-desktop-overlay">
            <div className="spinner"></div>
            <p>Connecting to remote desktop...</p>
          </div>
        )}
        
        {status === 'error' && (
          <div className="mesh-desktop-overlay">
            <span className="material-symbols-outlined error-icon">error</span>
            <p>Connection failed</p>
            <button onClick={connect} className="retry-btn">Retry</button>
          </div>
        )}
        
        {status === 'disconnected' && meshcentralNodeId && (
          <div className="mesh-desktop-overlay">
            <span className="material-symbols-outlined">desktop_windows</span>
            <p>Click Connect to start remote desktop session</p>
            <button onClick={connect} className="connect-btn">Connect</button>
          </div>
        )}
      </div>
    </div>
  );
}