terminaljs

terminal.js

let terminal = new Terminal({
  cols: 128,
  rows: 13,
  convertEol: true,
  cursorBlink: true,
});
terminal.open(document.getElementById("terminal"));
let bearToken =
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjp7Im9yaWdpbl91c2VybmFtZSI6IiIsInVzZXJuYW1lIjoicm9vdCJ9LCJpc3MiOiJzaW1wbGUtcGFuZWwiLCJzdWIiOiJhY2Nlc3MtdG9rZW4iLCJleHAiOjE2OTMzNTM2MDAsIm5iZiI6MTY5MzI3NTY2NSwiaWF0IjoxNjkzMjc1NjY1fQ.Jn6YSpW8F_GoUSXE-GtN-fgsEZXyy1Y5jjoe8vcuGzw";
let protocol = location.protocol === "https:" ? "wss://" : "ws://";
let authLink = `username:${bearToken}`;
// let url = protocol + authLink + "@" + location.host + "/xterm.js";
// url = "wss://dnses.xyz:8080/api/private/websocket/terminal";
// let url = protocol + "dnses.xyz:8080" + "/api/private/websocket/terminal";
let url =
  "wss://dnses.xyz:8080/api/private/websocket/terminal" +
  "?wstoken=" +
  bearToken;
// Create a WebSocket connection with custom headers

const customHeaders = {
  Authorization: bearToken,
};

document.cookie = "wstoken=" + bearToken + "; path=/";

let ws = new WebSocket(url);
let fitAddon = new FitAddon.FitAddon();
terminal.loadAddon(fitAddon);
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;
    console.log("event", event);
    let size = JSON.stringify({ cols: cols, rows: rows });
    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);
  let newData =
    typeof jsonData.data === "string"
      ? jsonData.data
      : new Uint8Array(jsonData.data);
  terminal.write(newData);
};