added terminal.html

2024-06-02 13:30:12 +03:00 · 2024-06-02 13:30:12 +03:00 · 1d6440aabf
commit 1d6440aabf
parent cff965872e
1 changed files with 74 additions and 0 deletions
--- a/public/terminal.html
+++ b/public/terminal.html
@ -0,0 +1,74 @@
+<!-- public/terminal.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Terminal</title>
+  <link rel="stylesheet" href="https://unpkg.com/xterm/css/xterm.css">
+  <style>
+    html, body {
+      height: 100%;
+      margin: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: #000;
+    }
+    #terminal {
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+</head>
+<body>
+  <div id="terminal"></div>
+  <script src="https://unpkg.com/xterm/lib/xterm.js"></script>
+  <script src="https://unpkg.com/xterm-addon-fit/lib/xterm-addon-fit.js"></script>
+  <script>
+    const { Terminal } = window.Terminal;
+    const { FitAddon } = window.FitAddon;
+
+    const terminal = new Terminal();
+    const fitAddon = new FitAddon();
+
+    terminal.loadAddon(fitAddon);
+    terminal.open(document.getElementById('terminal'));
+    fitAddon.fit();
+
+    const urlParams = new URLSearchParams(window.location.search);
+    const websocketUrl = urlParams.get('ws');
+    if (websocketUrl) {
+      const socket = new WebSocket(websocketUrl);
+
+      socket.onerror = (ev) => {
+        console.log(ev);
+      };
+
+      socket.addEventListener('open', () => {
+        socket.send(JSON.stringify({ CommandType: 'resize', Arguments: `${terminal.cols}x${terminal.rows}` }));
+      });
+
+      terminal.onResize(({ cols, rows }) => {
+        socket.send(JSON.stringify({ CommandType: 'resize', Arguments: `${cols}x${rows}` }));
+      });
+
+      socket.addEventListener('message', (event) => {
+        terminal.write(JSON.parse(event.data));
+      });
+
+      terminal.onData((data) => {
+        socket.send(JSON.stringify({ CommandType: 'insert', Arguments: data }));
+      });
+
+      window.addEventListener('resize', () => {
+        fitAddon.fit();
+      });
+
+      window.addEventListener('beforeunload', () => {
+        socket.close();
+      });
+    }
+  </script>
+</body>
+</html>