riju/frontend/src/app.ts

60 lines
1.5 KiB
TypeScript

import { Terminal } from "xterm";
import { FitAddon } from "xterm-addon-fit";
import "xterm/css/xterm.css";
const lang = document.location.pathname.slice(1);
const term = new Terminal();
const fitAddon = new FitAddon();
term.loadAddon(fitAddon);
term.open(document.getElementById("terminal"));
fitAddon.fit();
window.addEventListener("resize", () => fitAddon.fit());
const socket = new WebSocket(
(document.location.protocol === "http:" ? "ws://" : "wss://") +
document.location.host +
`/api/v1/ws?lang=${lang}`
);
socket.addEventListener("open", () =>
console.log("Successfully connected to server")
);
socket.addEventListener("message", (event) => {
let message: any;
try {
message = JSON.parse(event.data);
} catch (err) {
console.error("Malformed message from server:", event.data);
return;
}
switch (message?.event) {
case "terminalOutput":
if (typeof message.output !== "string") {
console.error("Unexpected message from server:", message);
return;
}
term.write(message.output);
return;
default:
console.error("Unexpected message from server:", message);
return;
}
});
socket.addEventListener("close", (event) => {
if (event.wasClean) {
console.log("Connection closed cleanly");
} else {
console.error("Connection died");
}
});
socket.addEventListener("onerror", (event) =>
console.error("Connection error:", event)
);
term.onData((data) =>
socket.send(JSON.stringify({ event: "terminalInput", input: data }))
);