webSSH without using its built-in form template

Question

My objective is to integrate WebSSH into my React app. As you know, to open the terminal, we need to open the WebSSH form and submit it. However, my approach is to only submit my own form. What I mean is that I plan to create the form within my React app, and when the connection is clicked, communicate with WebSSH directly.

I’ve reached the point where I can retrieve the XSRF token and obtain the ID needed to open the terminal. However, after debugging, I found that the worker.handler is None, which is causing the worker to recycle and the session to close.

  const handleConnect = async () => {
    if (!deviceIP) return setDeviceError(true);
    if (!username) return setUsrnameError(true);
    if (!pass) return setPassError(true);

    try {
      const response = await RemoteSSHConnect(deviceIP, 22, username, pass);
      console.log(response);
      const data = response;
      if (data.id) {
        openWebSocket(data.id);
      } else {
        console.error("Failed to get session ID");
      }
    } catch (error) {
      console.error("SSH Connection Error:", error);
    }
  };

  // Open WebSocket connection with the received session ID
  const openWebSocket = (sessionId: string) => {
    const wsUrl = BASE_URL.replace(/^http/, "ws") + `/ws?id=${sessionId}`;
    const ws = new window.WebSocket(wsUrl);
    wsRef.current = ws;

    ws.onopen = () => {
      console.log("WebSocket Connected");
      initializeTerminal(ws);
    };

    ws.onmessage = (event) => {
      if (term.current) term.current.write(event.data);
    };

    ws.onerror = (error) => {
      console.error("WebSocket Error:", error);
    };

    ws.onclose = () => {
      console.log("WebSocket Disconnected");
      if (term.current) {
        term.current.dispose();
        term.current = null;
      }
    };
  };

  // Initialize xterm.js Terminal
  const initializeTerminal = (ws: WebSocket) => {
    if (term.current) {
      term.current.dispose();
    }

    term.current = new Terminal({
      cursorBlink: true,
      theme: { background: "black", foreground: "white" },
    });

    const fitAddon = new FitAddon();
    term.current.loadAddon(fitAddon);
    term.current.open(terminalRef.current!);
    fitAddon.fit();

    term.current.onData((data) => {
      ws.send(JSON.stringify({ data }));
    });

    window.addEventListener("resize", () => fitAddon.fit());
  };