Unable to Send Data from xterm Console to LXD WebSocket

[irtaza9]

I am successfully connecting to the LXD WebSocket to access the console of my LXD container. All other functionality is working fine, and I can receive data from the LXD WebSocket when I run the command echo foo > /dev/console inside the container.

However, I am facing an issue where I am unable to send any data from the xterm console to the LXD WebSocket. Despite the connection being established and receiving data from the WebSocket, the reverse—sending data from the console to the WebSocket—does not work.

Could you please assist in resolving the issue with sending data from the xterm console to the LXD WebSocket? It seems like there may be an issue with the configuration or the way the data is being handled on the sending side.

import { useEffect, useRef, useState } from "react";
import { FitAddon } from "xterm-addon-fit";
import { updateMaxHeight } from "../utils/updateMaxHeight";
import Xterm from "../components/Xterm";

const handleTextResponse = async (response) => {
    if (!response.ok) {
        const result = await response.json();
        throw Error(result.error);
    }
    return response.text();
};

export const handleResponse = async (response) => {
    if (!response.ok) {
        const result = await response.json();
        throw Error(result.error);
    }
    return response.json();
};

const fetchInstanceConsoleBuffer = async (name, project) => {
    return new Promise((resolve, reject) => {
        fetch(`http://localhost:3000/fetch-console?name=${name}&project=${project}`, {
            method: "GET",
        })
            .then(handleTextResponse)
            .then((data) => resolve(data))
            .catch(reject);
    });
};

const connectInstanceConsole = async (name, project) => {
    console.log("Connecting to console for instance: ", name, project);
    return new Promise((resolve, reject) => {
        fetch(`http://localhost:3000/connect-console`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json", 
            },
            body: JSON.stringify({                   
                name: name,
                project: project
            }),
        })
            .then(handleResponse)
            .then((data) => {
                console.log("Console data: ", data);
                resolve(data);
            })
            .catch(reject);
    });
};

const getWsErrorMsg = (code) => {
    const messages = {
        1000: "Normal closure.",
        1001: "Server closed or client navigated away.",
        1002: "Protocol error.",
        1003: "Data type not supported.",
        1004: "Reserved.",
        1005: "No status code present.",
        1006: "Abnormal close.",
        1007: "Invalid data format.",
        1008: "Policy violation.",
        1009: "Message too big.",
        1010: "Missing expected extensions.",
        1011: "Internal server error.",
        1015: "TLS handshake failed.",
    };
    return messages[code] || "Unknown reason";
};

function useEventListener(eventName, handler, element = window) {
    useEffect(() => {
        if (!element) return;
        const eventListener = (event) => handler(event);
        element.addEventListener(eventName, eventListener);
        return () => element.removeEventListener(eventName, eventListener);
    }, [eventName, handler, element]);
}

const InstanceTextConsole = () => {
    const textEncoder = new TextEncoder();
    const [fitAddon] = useState(new FitAddon());
    const [dataWs, setDataWs] = useState(null);
    const [isLoading, setLoading] = useState(false);
    const [textBuffer, setTextBuffer] = useState("");
    const [userInteracted, setUserInteracted] = useState(false);
    const xtermRef = useRef(null);

    const handleError = (e) => {
        console.error("WebSocket error: ", e);
    };

    const connectToConsole = async () => {
        const name = "rational-puma";
        const project = "default";

        setLoading(true);
        fetchInstanceConsoleBuffer(name, project)
            .then(setTextBuffer)
            .catch(console.error);

        const INCUS_HOST = "lxd.testdotpkdomasdfasdfasfain.com:8443";

        const result = await connectInstanceConsole(name, project).catch((e) => {
            console.error("Error connecting to console: ", e);
        });

        setLoading(false);

        if (!result) {
            return;
        }

        const operationUrl = result.operation.split("?")[0];
        const dataUrl = `wss://${INCUS_HOST}${operationUrl}/websocket?secret=${result.metadata.metadata.fds["0"]}`;
        const controlUrl = `wss://${INCUS_HOST}${operationUrl}/websocket?secret=${result.metadata.metadata.fds.control}`;

        console.log("Data URL: ", dataUrl);
        console.log("Control URL: ", controlUrl);

        const data = new WebSocket(dataUrl);
        const control = new WebSocket(controlUrl);

        control.onopen = () => {
            setLoading(false);
        };

        control.onerror = handleError;

        control.onclose = (event) => {
            if (1005 !== event.code) {
                console.error("Error", event.reason, getWsErrorMsg(event.code));
            }
        };

        data.onopen = () => {
            console.log("WebSocket connection opened.", data);
            setDataWs(data);
        };

        data.onopen = function () {
            console.log('WebSocket connection established');
            setDataWs(data);
        };

        data.onerror = handleError;

        data.onclose = (event) => {
            console.log("WebSocket connection closed.", event.code, event.reason);
            if (1005 !== event.code) {
                console.error("Error", event.reason, getWsErrorMsg(event.code));
            }
            setDataWs(null);
            setUserInteracted(false);
        };

        data.binaryType = "arraybuffer";
        data.onmessage = (message) => {
            console.log("Received message: ", message.data);
            xtermRef.current?.write(new Uint8Array(message.data));
        };

        return [data, control];
    };

    useEffect(() => {
        xtermRef.current?.focus();
    }, []);

    useEffect(() => {
        if (dataWs) {
            return;
        }
        const websocketPromise = connectToConsole();
        return () => {
            websocketPromise.then((websockets) => {
                websockets?.map((websocket) => {
                    websocket.close();
                });
            });
        };
    }, [fitAddon]);

    useEffect(() => {
        if (!textBuffer || !xtermRef.current || isLoading) {
            return;
        }
        xtermRef.current.write(textBuffer);
        setTextBuffer("");
    }, [textBuffer, isLoading]);

    const handleResize = () => {
        updateMaxHeight("p-terminal", undefined, 10);
        xtermRef.current?.element?.style.setProperty("padding", "1rem");
        fitAddon.fit();
    };

    useEventListener("resize", () => {
        handleResize();
        setTimeout(handleResize, 500);
    });

    return (
        <>
            {isLoading ? (<div className="p-terminal-loading">Loading...</div>) :
                (
                    <Xterm
                        ref={xtermRef}
                        addons={[fitAddon]}
                        onData={(data) => {
                            console.log("Ws", dataWs);
                            dataWs?.send(textEncoder.encode(data));
                        }}
                        className="p-terminal"
                        onOpen={handleResize}
                    />
                )}
        </>
    );
};

export default InstanceTextConsole;

components/xterm.txs

/**
MIT License

Copyright (c) 2020 Robert Harbison

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
 */

/* eslint @typescript-eslint/unbound-method: 0 */

import React from "react";
import {
    forwardRef,
    useEffect,
    useImperativeHandle,
    useLayoutEffect,
    useRef,
    useState,
  } from "react";
  import type { ITerminalOptions, ITerminalAddon } from "@xterm/xterm";
  import { Terminal } from "@xterm/xterm";
  import "@xterm/xterm/css/xterm.css";

  interface Props {
    /**
     * Class name to add to the terminal container.
     */
    className?: string;
  
    /**
     * Options to initialize the terminal with.
     */
    options?: ITerminalOptions;
  
    /**
     * An array of XTerm addons to load along with the terminal.current.
     */
    addons?: Array<ITerminalAddon>;
  
    /**
     * Adds an event listener for when a binary event fires. This is used to
     * enable non UTF-8 conformant binary messages to be sent to the backend.
     * Currently this is only used for a certain type of mouse reports that
     * happen to be not UTF-8 compatible.
     * The event value is a JS string, pass it to the underlying pty as
     * binary data, e.g. `pty.write(Buffer.from(data, 'binary'))`.
     */
    onBinary?(data: string): void;
  
    /**
     * Adds an event listener for the cursor moves.
     */
    onCursorMove?(): void;
  
    /**
     * Adds an event listener for when a data event fires. This happens for
     * example when the user types or pastes into the terminal.current. The event value
     * is whatever `string` results, in a typical setup, this should be passed
     * on to the backing pty.
     */
    onData?(data: string): void;
  
    /**
     * Adds an event listener for when a key is pressed. The event value contains the
     * string that will be sent in the data event as well as the DOM event that
     * triggered it.
     */
    onKey?(event: { key: string; domEvent: KeyboardEvent }): void;
  
    /**
     * Adds an event listener for when a line feed is added.
     */
    onLineFeed?(): void;
  
    /**
     * Adds an event listener for when a scroll occurs. The event value is the
     * new position of the viewport.
     * @returns an `IDisposable` to stop listening.
     */
    onScroll?(newPosition: number): void;
  
    /**
     * Adds an event listener for when a selection change occurs.
     */
    onSelectionChange?(): void;
  
    /**
     * Adds an event listener for when rows are rendered. The event value
     * contains the start row and end rows of the rendered area (ranges from `0`
     * to `terminal.current.rows - 1`).
     */
    onRender?(event: { start: number; end: number }): void;
  
    /**
     * Adds an event listener for when the terminal is resized. The event value
     * contains the new size.
     */
    onResize?(event: { cols: number; rows: number }): void;
  
    /**
     * Adds an event listener for when an OSC 0 or OSC 2 title change occurs.
     * The event value is the new title.
     */
    onTitleChange?(newTitle: string): void;
  
    /**
     * Attaches a custom key event handler which is run before keys are
     * processed, giving consumers of xterm.js ultimate control as to what keys
     * should be processed by the terminal and what keys should not.
     *
     * @param event The custom KeyboardEvent handler to attach.
     * This is a function that takes a KeyboardEvent, allowing consumers to stop
     * propagation and/or prevent the default action. The function returns
     * whether the event should be processed by xterm.js.
     */
    customKeyEventHandler?(event: KeyboardEvent): boolean;
  
    /**
     * This callback porovides an interface for running actions directly after
     * the terminal is open. Some useful cations includes resizing the terminal
     * or focusing on the terminal etc.
     */
    onOpen?(): void;
  }
  
  export default forwardRef<Terminal, Props>(function Xterm(
    {
      options = {},
      addons,
      className,
      onBinary,
      onCursorMove,
      onData,
      onKey,
      onLineFeed,
      onScroll,
      onSelectionChange,
      onRender,
      onResize,
      onTitleChange,
      customKeyEventHandler,
      onOpen,
    }: Props,
    ref,
  ) {
    const [terminalOpen, setTerminalOpen] = useState(false);
    const terminalRef = useRef<HTMLDivElement>(null);
    const xtermRef = useRef<Terminal>(new Terminal(options));
  
    useImperativeHandle(ref, () => {
      return xtermRef.current;
    });
  
    const initialiseXterm = () => {
      // Load addons if the prop exists.
      if (addons) {
        addons.forEach((addon) => {
          xtermRef.current?.loadAddon(addon);
        });
      }
  
      // Create Listeners
      if (onBinary) xtermRef.current.onBinary(onBinary);
      if (onCursorMove) xtermRef.current.onCursorMove(onCursorMove);
      if (onData) xtermRef.current.onData(onData);
      if (onKey) xtermRef.current.onKey(onKey);
      if (onLineFeed) xtermRef.current.onLineFeed(onLineFeed);
      if (onScroll) xtermRef.current.onScroll(onScroll);
      if (onSelectionChange)
        xtermRef.current.onSelectionChange(onSelectionChange);
      if (onRender) xtermRef.current.onRender(onRender);
      if (onResize) xtermRef.current.onResize(onResize);
      if (onTitleChange) xtermRef.current.onTitleChange(onTitleChange);
  
      // Add Custom Key Event Handler
      if (customKeyEventHandler) {
        xtermRef.current.attachCustomKeyEventHandler(customKeyEventHandler);
      }
    };
  
    useEffect(() => {
      const terminal = terminalRef.current;
      if (terminal) {
        initialiseXterm();
        xtermRef.current?.open(terminal);
        setTerminalOpen(true);
      }
  
      return () => {
        xtermRef.current?.dispose();
      };
    }, []);
  
    useLayoutEffect(() => {
      if (terminalOpen && onOpen) {
        onOpen();
      }
    }, [terminalOpen]);
  
    return <div className={className} ref={terminalRef} />;
  });

Screen shots:

[jerch]

Hmm, your code looks like a control flow nightmare to me, so it is somewhat hard to comprehend. When you focus the terminal widget and try typing something, does your console.log("Ws", dataWs); in the onData handler output anything at all?

If not - the problem lies within the frontend code. Might be a race condition, when things get attached/assigned and the execution order. I see you have many someVar?. constructs there, could be, that someVar never turns to true due to issues in the setup execution. In that case - check every of those maybe vars.

If yes - the problem lies on the server part. Check whether the server can correctly read data from the websocket. To debug that, simply place the websocket in global scope and enter text vs. byte data manually at the console. If your backend is picky, it might only work with text or bytes exclusively, but not both.

[irtaza9]

Thank you for the suggestions, I got it working. The server is picky and working perfectly fine. Issue was with the race condition on websocket level. Lxd/Incus required both socket to be connected for communication in a sequence, First you have to connect the data websocket and then control websocket. Here is the working code.

import { useEffect, useRef, useState } from "react";
import { FitAddon } from "xterm-addon-fit";
import { updateMaxHeight } from "../utils/updateMaxHeight";
import Xterm from "../components/Xterm";

window.consoleSockets = {
  data: null,
  control: null
};

const handleTextResponse = async (response) => {
  if (!response.ok) {
    const result = await response.json();
    throw Error(result.error);
  }
  return response.text();
};

export const handleResponse = async (response) => {
  if (!response.ok) {
    const result = await response.json();
    throw Error(result.error);
  }
  return response.json();
};

const fetchInstanceConsoleBuffer = async (name, project) => {
  return fetch(`http://localhost:3000/fetch-console?name=${name}&project=${project}`, {
    method: "GET",
  }).then(handleTextResponse);
};

const connectInstanceConsole = async (name, project) => {
  console.log("Connecting to console for instance: ", name, project);
  return fetch(`http://localhost:3000/connect-console`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      name: name,
      project: project
    }),
  }).then(handleResponse);
};

const getWsErrorMsg = (code) => {
  const messages = {
    1000: "Normal closure.",
    1001: "Server closed or client navigated away.",
    1002: "Protocol error.",
    1003: "Data type not supported.",
    1004: "Reserved.",
    1005: "No status code present.",
    1006: "Abnormal close.",
    1007: "Invalid data format.",
    1008: "Policy violation.",
    1009: "Message too big.",
    1010: "Missing expected extensions.",
    1011: "Internal server error.",
    1015: "TLS handshake failed.",
  };
  return messages[code] || "Unknown reason";
};

function useEventListener(eventName, handler, element = window) {
  useEffect(() => {
    if (!element) return;
    const eventListener = (event) => handler(event);
    element.addEventListener(eventName, eventListener);
    return () => element.removeEventListener(eventName, eventListener);
  }, [eventName, handler, element]);
}

const InstanceTextConsole = () => {
  const textEncoder = new TextEncoder();
  const [fitAddon] = useState(new FitAddon());
  const [isLoading, setLoading] = useState(false);
  const [textBuffer, setTextBuffer] = useState("");
  const [isConnected, setIsConnected] = useState(false);
  const xtermRef = useRef(null);

  const handleError = (e) => {
    console.error("WebSocket error: ", e);
  };

  const connectToConsole = async () => {
    const name = "rational-puma";
    const project = "default";

    setLoading(true);
    
    try {
      const buffer = await fetchInstanceConsoleBuffer(name, project);
      setTextBuffer(buffer);

      const INCUS_HOST = "lxd.testdotpkdomasdfasdfasfain.com:8443";
      const result = await connectInstanceConsole(name, project);

      const operationUrl = result.operation.split("?")[0];
      const dataUrl = `wss://${INCUS_HOST}${operationUrl}/websocket?secret=${result.metadata.metadata.fds["0"]}`;
      const controlUrl = `wss://${INCUS_HOST}${operationUrl}/websocket?secret=${result.metadata.metadata.fds.control}`;

      console.log("Connecting to data URL: ", dataUrl);
      
      const dataSocket = new WebSocket(dataUrl);
      dataSocket.binaryType = "arraybuffer";
      
      await new Promise((resolve, reject) => {
        dataSocket.onopen = () => {
          console.log("Data WebSocket connection opened");
          window.consoleSockets.data = dataSocket;
          resolve();
        };
        
        dataSocket.onerror = (error) => {
          console.error("Data WebSocket error:", error);
          reject(error);
        };
      });

      console.log("Connecting to control URL: ", controlUrl);
      
      const controlSocket = new WebSocket(controlUrl);
      
      await new Promise((resolve, reject) => {
        controlSocket.onopen = () => {
          console.log("Control WebSocket connection opened");
          window.consoleSockets.control = controlSocket;
          setIsConnected(true);
          setLoading(false);
          resolve();
        };
        
        controlSocket.onerror = (error) => {
          console.error("Control WebSocket error:", error);
          reject(error);
        };
      });

      dataSocket.onmessage = (message) => {
        xtermRef.current?.write(new Uint8Array(message.data));
      };

      dataSocket.onclose = (event) => {
        console.log("Data WebSocket connection closed", event.code, event.reason);
        if (event.code !== 1005) {
          console.error("Error", event.reason, getWsErrorMsg(event.code));
        }
        window.consoleSockets.data = null;
        setIsConnected(false);
      };

      controlSocket.onclose = (event) => {
        console.log("Control WebSocket connection closed", event.code, event.reason);
        if (event.code !== 1005) {
          console.error("Error", event.reason, getWsErrorMsg(event.code));
        }
        window.consoleSockets.control = null;
        setIsConnected(false);
      };

      return [dataSocket, controlSocket];
    } catch (error) {
      console.error("Error connecting to console:", error);
      setLoading(false);
      setIsConnected(false);
      throw error;
    }
  };

  useEffect(() => {
    xtermRef.current?.focus();
  }, []);

  useEffect(() => {
    if (isConnected) return;

    const connectionPromise = connectToConsole();

    return () => {
      connectionPromise.then((sockets) => {
        sockets?.forEach(socket => {
          if (socket.readyState === WebSocket.OPEN) {
            socket.close();
          }
        });
      });
      window.consoleSockets.data = null;
      window.consoleSockets.control = null;
    };
  }, []);

  useEffect(() => {
    if (!textBuffer || !xtermRef.current || isLoading) return;
    xtermRef.current.write(textBuffer);
    setTextBuffer("");
  }, [textBuffer, isLoading]);

  const handleResize = () => {
    updateMaxHeight("p-terminal", undefined, 10);
    xtermRef.current?.element?.style.setProperty("padding", "1rem");
    fitAddon.fit();
  };

  useEventListener("resize", () => {
    handleResize();
    setTimeout(handleResize, 500);
  });

  return (
    <>
      {isLoading ? (
        <div className="p-terminal-loading">Loading...</div>
      ) : (
        <Xterm
          ref={xtermRef}
          addons={[fitAddon]}
          onData={(data) => {
            if (window.consoleSockets.data) {
              window.consoleSockets.data.send(textEncoder.encode(data));
            } else {
              console.error("Data WebSocket is not connected");
            }
          }}
          className="p-terminal"
          onOpen={handleResize}
        />
      )}
    </>
  );
};

export default InstanceTextConsole;