useRemoteDesktop.js

Go to the documentation of this file.

import { useRef, useState, useEffect } from 'react';
 
export function useRemoteDesktop(agentId) {
  const rdsWS = useRef(null);
  const rdsImgRef = useRef(null);
  const [rdsFrame, setRdsFrame] = useState(null);
  const [scriptOutput, setScriptOutput] = useState('');
  const [scriptRunning, setScriptRunning] = useState(false);
 
  const connectRds = () => {
    if (!agentId) return;
    const loc = window.location;
    const proto = loc.protocol === 'https:' ? 'wss' : 'ws';
    const host = loc.host;
    const token = localStorage.getItem('jwt') || '';
    const ws = new WebSocket(`${proto}://${host}/api/rds/stream/${agentId}?token=${token}`);
    rdsWS.current = ws;
    ws.onmessage = (event) => {
      try {
        const parsed = JSON.parse(event.data);
        if (parsed.type === 'script_output') {
          setScriptOutput((prev) => prev + parsed.data);
        } else if (parsed.type === 'script_done') {
          setScriptRunning(false);
          setScriptOutput((prev) => prev + `\n[Process exited with code ${parsed.code}]\n`);
        } else if (parsed.type === 'frame') {
          setRdsFrame(parsed.data);
        }
      } catch {
        // ignore non-JSON output
      }
    };
    ws.onclose = () => {
      console.warn('WebSocket closed.');
      setScriptRunning(false);
    };
  };
 
  const handleMouseEvent = (e) => {
    if (!rdsWS.current || rdsWS.current.readyState !== WebSocket.OPEN) return;
    const rect = rdsImgRef.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,
    };
    rdsWS.current.send(JSON.stringify(msg));
    e.preventDefault();
  };
 
  const handleKeyEvent = (e, rdsOpen) => {
    if (!rdsOpen) return;
    rdsWS.current?.send(JSON.stringify({
      type: "keyboard",
      event: e.type,
      key: e.key,
      code: e.code,
      ctrl: e.ctrlKey,
      alt: e.altKey,
      shift: e.shiftKey,
      meta: e.metaKey,
    }));
    e.preventDefault();
  };
 
  useEffect(() => {
    // Cleanup on unmount
    return () => {
      if (rdsWS.current) {
        rdsWS.current.close();
      }
    };
  }, []);
 
  const sendClipboard = async () => {
    try {
      const txt = await navigator.clipboard.readText();
      rdsWS.current?.send(JSON.stringify({ type: "clipboard", text: txt }));
    } catch {}
  };
 
  const uploadFile = async (file) => {
    const buf = await file.arrayBuffer();
    const base64 = btoa(String.fromCharCode(...new Uint8Array(buf)));
    rdsWS.current.send(JSON.stringify({
      type: "file_upload",
      name: file.name,
      size: file.size,
      mime: file.type,
      data: base64,
    }));
  };
 
  return {
    rdsWS,
    rdsImgRef,
    rdsFrame,
    scriptOutput,
    scriptRunning,
    connectRds,
    handleMouseEvent,
    handleKeyEvent,
    sendClipboard,
    uploadFile,
    setScriptOutput,
    setScriptRunning,
  };
}