update

web/app/Filament/Pages/Terminal.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace app\Filament\Pages;
+
+use Filament\Pages\Page;
+
+class Terminal extends Page
+{
+    protected static ?string $navigationIcon = 'heroicon-o-command-line';
+
+    protected static string $view = 'filament.pages.terminal';
+
+    protected static ?string $navigationGroup = 'Server Management';
+
+    protected static ?string $navigationLabel = 'Terminal';
+
+    protected static ?int $navigationSort = 1;
+
+}

web/package-lock.json

@@ -4,6 +4,9 @@
     "requires": true,
     "packages": {
         "": {
+            "dependencies": {
+                "@xterm/xterm": "^5.5.0"
+            },
             "devDependencies": {
                 "@tailwindcss/forms": "^0.5.7",
                 "@tailwindcss/typography": "^0.5.12",
@@ -528,6 +531,11 @@
                 "tailwindcss": ">=3.0.0 || insiders"
             }
         },
+        "node_modules/@xterm/xterm": {
+            "version": "5.5.0",
+            "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz",
+            "integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A=="
+        },
         "node_modules/ansi-regex": {
             "version": "6.0.1",
             "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",

web/package.json

@@ -16,5 +16,8 @@
         "tailwindcss": "^3.4.3",
         "tippy.js": "^6.3.7",
         "vite": "^4.0.0"
+    },
+    "dependencies": {
+        "@xterm/xterm": "^5.5.0"
     }
 }

web/resources/views/filament/pages/terminal.blade.php

@@ -0,0 +1,34 @@
+<x-filament-panels::page>
+
+    <div>
+        <link rel="stylesheet" href="node_modules/@xterm/xterm/css/xterm.css" />
+        <script src="node_modules/@xterm/xterm/lib/xterm.js"></script>
+
+
+        <div id="js-web-terminal"></div>
+        <script>
+
+            const terminal = new Terminal();
+            terminal.open(document.getElementById('js-web-terminal'));
+            //terminal.resize(160, 30);
+
+            const socket = new WebSocket(`ws://49.13.166.115:3311`);
+            socket.addEventListener('open', (_) => {
+                terminal.onData((data) => socket.send(data));
+                socket.addEventListener('message', (evt) => terminal.write(evt.data));
+            });
+            socket.addEventListener('error', (_) => {
+                terminal.reset();
+                terminal.writeln('Connection error.');
+            });
+            socket.addEventListener('close', (evt) => {
+                if (evt.wasClean) {
+                    terminal.reset();
+                    terminal.writeln(evt.reason ?? 'Connection closed.');
+                }
+            });
+        </script>
+
+    </div>
+
+</x-filament-panels::page>