test_terminal.html

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.min.css"
      rel="stylesheet"
    />

    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #terminal {
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <div id="terminal"></div>
    <script type="module">
      import { Terminal } from 'https://cdn.jsdelivr.net/npm/xterm@5.3.0/+esm'
      import { AttachAddon } from 'https://cdn.jsdelivr.net/npm/xterm-addon-attach@0.9.0/+esm'
      import { FitAddon } from 'https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/+esm'
      import { CanvasAddon } from 'https://cdn.jsdelivr.net/npm/xterm-addon-canvas@0.5.0/+esm'

      //document.addEventListener('DOMContentLoaded', () => {
      const fitAddon = new FitAddon()

      const term = new Terminal({
        // https://xtermjs.org/docs/api/terminal/interfaces/iterminaloptions/#optional-fontsize
        convertEol: true,
        disableStdin: false,
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 14,
        cursorBlink: true,
        cursorStyle: 'block',
        theme: {
          background: 'black',
        },
      })
      term.loadAddon(fitAddon)
      term.loadAddon(
        // TermA$ socat TCP-LISTEN:1337,reuseaddr,fork EXEC:'bash -li',pty,stderr,setsid,sigint,sane
        // TermB$ websocat --binary ws-l:127.0.0.1:8080 tcp:127.0.0.1:1337
        // TermC$ python -m http.server
        // http://localhost:8000/term.html
        new AttachAddon(new WebSocket('ws://localhost:8080'), {
          // bidirectional: true,
          // inputUtf8: true,
        })
      )
      term.open(document.getElementById('terminal'))
      window.addEventListener('resize', () => fitAddon.fit())
      term.loadAddon(new CanvasAddon())
      fitAddon.fit()
      term.focus()
      //})
    </script>
  </body>
</html>