gterm/main.js

import { Terminal } from 'xterm'
import { AttachAddon } from 'xterm-addon-attach';
import { FitAddon } from 'xterm-addon-fit';
import { SerializeAddon } from "xterm-addon-serialize";
import { Unicode11Addon } from 'xterm-addon-unicode11';
import { WebLinksAddon } from 'xterm-addon-web-links';
import 'xterm/css/xterm.css'

(function() {
    const terminal = new Terminal({
      // screenKeys: true,
      // useStyle: true,
      // cursorBlink: true,
      // fullscreenWin: true,
      // maximizeWin: true,
      // screenReaderMode: true,
    });
    const fitAddon = new FitAddon();
    terminal.loadAddon(fitAddon);
    var protocol = (location.protocol === "https:") ? "wss://" : "ws://";
    var url = protocol + location.host + location.pathname + "ws" + location.search
    const ws = new WebSocket(url);
    const attachAddon = new AttachAddon(ws);
    const webLinksAddon = new WebLinksAddon();
    terminal.loadAddon(webLinksAddon);
    const unicode11Addon = new Unicode11Addon();
    terminal.loadAddon(unicode11Addon);
    const serializeAddon = new SerializeAddon();
    terminal.loadAddon(serializeAddon);
    terminal.open(document.getElementById("terminal"));
    ws.onclose = function(event) {
      console.log(event);
      terminal.write('\r\n\nconnection has been terminated from the server-side (hit refresh to restart)\n')
    };
    ws.onopen = function() {
      terminal.loadAddon(attachAddon);
      terminal._initialized = true;
      terminal.focus();
      setTimeout(function() {fitAddon.fit()});
      document.addEventListener('keypress',(e)=>{
        e.preventDefault();
      })
      terminal.onResize(function(event) {
        var rows = event.rows;
        var cols = event.cols;
        var size = JSON.stringify({cols: cols, rows: rows + 1});
        var send = new TextEncoder().encode("\x01" + size);
        console.log('resizing to', size);
        ws.send(send);
      });
      terminal.onTitleChange(function(event) {
        console.log(event);
      });
      window.onresize = function() {
        console.log("resize")
        fitAddon.fit();
      };
      fitAddon.fit();
    };
  })();