I am able to access the console on my custom app, but now one thing is remaining, I am not abl to send the data from xterm console to lxd-websocket. Both sockets are up and running and on echo foo > /dev/console from inside the container i receive that data too on my xterm-console.
code:
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} />;
});