xtermjs

xterm.js

(function () {
  let terminal = new Terminal({
    screenKeys: true,
    useStyle: true,
    cursorBlink: true,
    fullscreenWin: true,
    maximizeWin: true,
    screenReaderMode: true,
    cols: 128,
  });
  terminal.open(document.getElementById("terminal"));
  let protocol = location.protocol === "https:" ? "wss://" : "ws://";
  let url = protocol + location.host + "/api/private/websocket/terminal";
  // Create a WebSocket connection with custom headers

  let ws = new WebSocket(url, null);
  let fitAddon = new FitAddon.FitAddon();
  terminal.loadAddon(fitAddon);
  let webLinksAddon = new WebLinksAddon.WebLinksAddon();
  terminal.loadAddon(webLinksAddon);
  let unicode11Addon = new Unicode11Addon.Unicode11Addon();
  terminal.loadAddon(unicode11Addon);
  let serializeAddon = new SerializeAddon.SerializeAddon();
  terminal.loadAddon(serializeAddon);
  // always set binary type to arraybuffer, we do not handle blobs
  ws.binaryType = "arraybuffer";
  ws.onclose = function (event) {
    console.log("onclose", event.data);
    terminal.write(
      "\r\n\nconnection has been terminated from the server-side (hit refresh to restart)\n"
    );
  };
  ws.onopen = function () {
    terminal._initialized = true;
    terminal.focus();
    setTimeout(function () {
      fitAddon.fit();
    });
    terminal.onData((data) => {
      data = JSON.stringify({ data: data });
      if (ws.readyState !== 1) {
        return;
      }
      ws.send(data);
    });
    terminal.onBinary((data) => {
      if (ws.readyState !== 1) {
        return;
      }
      const buffer = new Uint8Array(data.length);
      for (let i = 0; i < data.length; ++i) {
        buffer[i] = data.charCodeAt(i) & 255;
      }
      ws.send(buffer);
    });
    terminal.onResize(function (event) {
      let rows = event.rows;
      let cols = event.cols;
      let size = JSON.stringify({ cols: cols, rows: rows + 1 });
      let send = new TextEncoder().encode("\x01" + size);
      ws.send(send);
    });
    terminal.onTitleChange(function (title) {
      document.title = title;
    });
    window.onresize = function () {
      fitAddon.fit();
    };
  };
  ws.onmessage = function (event) {
    // Assuming event.data is an ArrayBuffer
    const uint8Array = new Uint8Array(event.data);
    const jsonString = new TextDecoder().decode(uint8Array);
    const jsonData = JSON.parse(jsonString);
    console.log("onmessage : ", jsonData);
    terminal.write(
      typeof jsonData.data === "string"
        ? jsonData.data
        : new Uint8Array(jsonData.data)
    );
  };
})();