<html lang="en">
<head>
<meta charset="utf-8" />
<style>
html {
font-family: arial;
}
</style>
<link
rel="stylesheet"
href="https://unpkg.com/xterm@4.11.0/css/xterm.css"
/>
</head>
<body>
<span style="font-size: small"
>status:
<span style="font-size: small" id="status">connecting...</span></span
>
<div style="width: 100%; height: calc(100% - 50px)" id="terminal"></div>
<!-- xterm -->
<script src="https://unpkg.com/xterm@4.11.0/lib/xterm.js"></script>
<script src="https://unpkg.com/xterm-addon-fit@0.5.0/lib/xterm-addon-fit.js"></script>
<script src="https://unpkg.com/xterm-addon-web-links@0.4.0/lib/xterm-addon-web-links.js"></script>
<script src="https://unpkg.com/xterm-addon-search@0.8.0/lib/xterm-addon-sear
ch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js"></script>
<script>
const term = new Terminal({
cursorBlink: true,
macOptionIsMeta: true,
scrollback: true,
});
term.attachCustomKeyEventHandler(customKeyEventHandler);
// https://github.com/xtermjs/xterm.js/issues/2941
const fit = new FitAddon.FitAddon();
term.loadAddon(fit);
term.loadAddon(new WebLinksAddon.WebLinksAddon());
term.loadAddon(new SearchAddon.SearchAddon());
term.open(document.getElementById("terminal"));
fit.fit();
term.resize(15, 50);
console.log(`size: ${term.cols} columns, ${term.rows} rows`);
fit.fit();
term.writeln("Copy: [ctrl]+[shift]+[x] Paste: [ctrl]+[shift]+[v]");
term.writeln('')
term.onData((data) => {
console.log("browser terminal received new data:", data);
socket.emit("pty-input", { input: data });
});
const socket = io.connect("/pty");
const status = document.getElementById("status");
socket.on("pty-output", function (data) {
console.log("new output received from server:", data.output);
term.write(data.output);
});
socket.on("connect", () => {
fitToscreen();
status.innerHTML =
'<span style="background-color: lightgreen;">connected</span>';
});
socket.on("disconnect", () => {
status.innerHTML =
'<span style="background-color: #ff8383;">disconnected</span>';
});
function fitToscreen() {
fit.fit();
const dims = { cols: term.cols, rows: term.rows };
console.log("sending new dimensions to server's pty", dims);
socket.emit("resize", dims);
}
function debounce(func, wait_ms) {
let timeout;
return function (...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait_ms);
};
}
/**
* Handle copy and paste events
*/
function customKeyEventHandler(e) {
if (e.type !== "keydown") {
return true;
}
if (e.ctrlKey && e.shiftKey) {
const key = e.key.toLowerCase();
if (key === "v") {
// ctrl+shift+v: paste whatever is in the clipboard
navigator.clipboard.readText().then((toPaste) => {
term.writeText(toPaste);
});
return false;
} else if (key === "c" || key === "x") {
// ctrl+shift+x: copy whatever is highlighted to clipboard
// 'x' is used as an alternate to 'c' because ctrl+c is taken
// by the terminal (SIGINT) and ctrl+shift+c is taken by the browser
// (open devtools).
// I'm not aware of ctrl+shift+x being used by anything in the terminal
// or browser
const toCopy = term.getSelection();
navigator.clipboard.writeText(toCopy);
term.focus();
return false;
}
}
return true;
}
const wait_ms = 50;
window.onresize = debounce(fitToscreen, wait_ms);
</script>
</body>
</html>