Let's get this thing working

2024-12-20 23:21:31 -05:00
parent c1b79c4cf6
commit 2234f3df40
7 changed files with 1418 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,69 @@
+<html>
+  <head>
+    <title>SSH Terminal</title>
+    <link rel="stylesheet" href="/xterm.css" />
+    <script src="/xterm.js"></script>
+    <script src="/xterm-addon-fit.js"></script>
+    <script src="/socket.io/socket.io.js"></script>
+    <script>
+      window.addEventListener(
+        "load",
+        function () {
+          var terminalContainer = document.getElementById("terminal-container");
+          const term = new Terminal({ cursorBlink: true });
+          const fitAddon = new FitAddon.FitAddon();
+          term.loadAddon(fitAddon);
+          term.open(terminalContainer);
+          fitAddon.fit();
+
+          var socket = io(); //.connect();
+          socket.on("connect", function () {
+            term.write("\r\n*** Connected to backend ***\r\n");
+          });
+
+          // Browser -> Backend
+          term.onKey(function (ev) {
+            socket.emit("data", ev.key);
+          });
+
+          // Backend -> Browser
+          socket.on("data", function (data) {
+            term.write(data);
+          });
+
+          socket.on("disconnect", function () {
+            term.write("\r\n*** Disconnected from backend ***\r\n");
+          });
+        },
+        false
+      );
+    </script>
+    <style>
+      body {
+        font-family: helvetica, sans-serif, arial;
+        font-size: 1em;
+        color: #111;
+      }
+      h1 {
+        text-align: center;
+      }
+      #terminal-container {
+        width: 960px;
+        height: 600px;
+        margin: 0 auto;
+        padding: 2px;
+      }
+      #terminal-container .terminal {
+        background-color: #111;
+        color: #fafafa;
+        padding: 2px;
+      }
+      #terminal-container .terminal:focus .terminal-cursor {
+        background-color: #fafafa;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="terminal-container"></div>
+  </body>
+</html>