Merge pull request #3574 from LEstradioto/fix-enhance-terminal

Terminal fixes

docker/coolify-realtime/terminal-server.js

@@ -68,7 +68,11 @@ wss.on('connection', (ws) => {
 
 const messageHandlers = {
     message: (session, data) => session.ptyProcess.write(data),
-    resize: (session, { cols, rows }) => session.ptyProcess.resize(cols, rows),
+    resize: (session, { cols, rows }) => {
+        cols = cols > 0 ? cols : 80;
+        rows = rows > 0 ? rows : 30;
+        session.ptyProcess.resize(cols, rows)
+    },
     pause: (session) => session.ptyProcess.pause(),
     resume: (session) => session.ptyProcess.resume(),
     checkActive: (session, data) => {
@@ -140,6 +144,7 @@ async function handleCommand(ws, command, userId) {
 
     ptyProcess.onData((data) => ws.send(data));
 
+    // when parent closes
     ptyProcess.onExit(({ exitCode, signal }) => {
         console.error(`Process exited with code ${exitCode} and signal ${signal}`);
         userSession.isActive = false;

resources/js/app.js

@@ -5,17 +5,13 @@
 // app.component("magic-bar", MagicBar);
 // app.mount("#vue");
 
-import { Terminal } from '@xterm/xterm';
+import { initializeTerminalComponent } from './terminal.js';
-import '@xterm/xterm/css/xterm.css';
-import { FitAddon } from '@xterm/addon-fit';
 
-if (!window.term) {
+['livewire:navigated', 'alpine:init'].forEach((event) => {
-    window.term = new Terminal({
+    document.addEventListener(event, () => {
-        cols: 80,
+        // tree-shaking
-        rows: 30,
+        if (document.getElementById('terminal-container')) {
-        fontFamily: '"Fira Code", courier-new, courier, monospace, "Powerline Extra Symbols"',
+            initializeTerminalComponent()
-        cursorBlink: true,
+        }
     });
-    window.fitAddon = new FitAddon();
+});
-    window.term.loadAddon(window.fitAddon);
-}

resources/js/terminal.js

@@ -0,0 +1,228 @@
+import { Terminal } from '@xterm/xterm';
+import '@xterm/xterm/css/xterm.css';
+import { FitAddon } from '@xterm/addon-fit';
+
+export function initializeTerminalComponent() {
+    function terminalData() {
+        return {
+            fullscreen: false,
+            terminalActive: false,
+            message: '(connection closed)',
+            term: null,
+            fitAddon: null,
+            socket: null,
+            commandBuffer: '',
+            pendingWrites: 0,
+            paused: false,
+            MAX_PENDING_WRITES: 5,
+            keepAliveInterval: null,
+
+            init() {
+                this.setupTerminal();
+                this.initializeWebSocket();
+                this.setupTerminalEventListeners();
+
+                this.$wire.on('send-back-command', (command) => {
+                    this.socket.send(JSON.stringify({
+                        command: command
+                    }));
+                });
+
+                this.keepAliveInterval = setInterval(this.keepAlive.bind(this), 30000);
+
+                this.$watch('terminalActive', (active) => {
+                    if (!active && this.keepAliveInterval) {
+                        clearInterval(this.keepAliveInterval);
+                    }
+                    this.$nextTick(() => {
+                        if (active) {
+                            this.$refs.terminalWrapper.style.display = 'block';
+                            this.resizeTerminal();
+                        } else {
+                            this.$refs.terminalWrapper.style.display = 'none';
+                        }
+                    });
+                });
+
+                ['livewire:navigated', 'beforeunload'].forEach((event) => {
+                    document.addEventListener(event, () => {
+                        this.checkIfProcessIsRunningAndKillIt();
+                        clearInterval(this.keepAliveInterval);
+                    }, { once: true });
+                });
+
+                window.onresize = () => {
+                    this.resizeTerminal()
+                };
+
+            },
+
+            setupTerminal() {
+                const terminalElement = document.getElementById('terminal');
+                if (terminalElement) {
+                    this.term = new Terminal({
+                        cols: 80,
+                        rows: 30,
+                        fontFamily: '"Fira Code", courier-new, courier, monospace, "Powerline Extra Symbols"',
+                        cursorBlink: true,
+                    });
+                    this.fitAddon = new FitAddon();
+                    this.term.loadAddon(this.fitAddon);
+                }
+            },
+
+            initializeWebSocket() {
+                if (!this.socket || this.socket.readyState === WebSocket.CLOSED) {
+                    const predefined = window.terminalConfig
+                    const connectionString = {
+                        protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',
+                        host: window.location.hostname,
+                        port: ":6002",
+                        path: '/terminal/ws'
+                    }
+                    if (!window.location.port) {
+                        connectionString.port = ''
+                    }
+                    if (predefined.host) {
+                        connectionString.host = predefined.host
+                    }
+                    if (predefined.port) {
+                        connectionString.port = `:${predefined.port}`
+                    }
+                    if (predefined.protocol) {
+                        connectionString.protocol = predefined.protocol
+                    }
+
+                    const url =
+                        `${connectionString.protocol}://${connectionString.host}${connectionString.port}${connectionString.path}`
+                    this.socket = new WebSocket(url);
+
+                    this.socket.onmessage = this.handleSocketMessage.bind(this);
+                    this.socket.onerror = (e) => {
+                        console.error('WebSocket error:', e);
+                    };
+                    this.socket.onclose = () => {
+                        console.log('WebSocket connection closed');
+
+                    };
+                }
+            },
+
+            handleSocketMessage(event) {
+                this.message = '(connection closed)';
+                if (event.data === 'pty-ready') {
+                    if (!this.term._initialized) {
+                        this.term.open(document.getElementById('terminal'));
+                        this.term._initialized = true;
+                    } else {
+                        this.term.reset();
+                    }
+                    this.terminalActive = true;
+                    this.term.focus();
+                    document.querySelector('.xterm-viewport').classList.add('scrollbar', 'rounded');
+                    this.resizeTerminal();
+                } else if (event.data === 'unprocessable') {
+                    if (this.term) this.term.reset();
+                    this.terminalActive = false;
+                    this.message = '(sorry, something went wrong, please try again)';
+                } else {
+                    this.pendingWrites++;
+                    this.term.write(event.data, this.flowControlCallback.bind(this));
+                }
+            },
+
+            flowControlCallback() {
+                this.pendingWrites--;
+                if (this.pendingWrites > this.MAX_PENDING_WRITES && !this.paused) {
+                    this.paused = true;
+                    this.socket.send(JSON.stringify({ pause: true }));
+                } else if (this.pendingWrites <= this.MAX_PENDING_WRITES && this.paused) {
+                    this.paused = false;
+                    this.socket.send(JSON.stringify({ resume: true }));
+                }
+            },
+
+            setupTerminalEventListeners() {
+                if (!this.term) return;
+
+                this.term.onData((data) => {
+                    this.socket.send(JSON.stringify({ message: data }));
+                    // Handle CTRL + D or exit command
+                    if (data === '\x04' || (data === '\r' && this.stripAnsiCommands(this.commandBuffer).trim().includes('exit'))) {
+                        this.checkIfProcessIsRunningAndKillIt();
+                        setTimeout(() => {
+                            this.terminalActive = false;
+                            this.term.reset();
+                        }, 500);
+                        this.commandBuffer = '';
+                    } else if (data === '\r') {
+                        this.commandBuffer = '';
+                    } else {
+                        this.commandBuffer += data;
+                    }
+                });
+
+                // Copy and paste functionality
+                this.term.attachCustomKeyEventHandler((arg) => {
+                    if (arg.ctrlKey && arg.code === "KeyV" && arg.type === "keydown") {
+                        navigator.clipboard.readText()
+                            .then(text => {
+                                this.socket.send(JSON.stringify({ message: text }));
+                            });
+                        return false;
+                    }
+
+                    if (arg.ctrlKey && arg.code === "KeyC" && arg.type === "keydown") {
+                        const selection = this.term.getSelection();
+                        if (selection) {
+                            navigator.clipboard.writeText(selection);
+                            return false;
+                        }
+                    }
+                    return true;
+                });
+            },
+
+            stripAnsiCommands(input) {
+                return input.replace(/\x1b\[[0-9;]*[a-zA-Z]/g, '');
+            },
+
+            keepAlive() {
+                if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+                    this.socket.send(JSON.stringify({ ping: true }));
+                }
+            },
+
+            checkIfProcessIsRunningAndKillIt() {
+                if (this.socket && this.socket.readyState == WebSocket.OPEN) {
+                    this.socket.send(JSON.stringify({ checkActive: 'force' }));
+                }
+            },
+
+            makeFullscreen() {
+                this.fullscreen = !this.fullscreen;
+                this.$nextTick(() => {
+                    this.resizeTerminal();
+                });
+            },
+
+            resizeTerminal() {
+                if (!this.terminalActive || !this.term || !this.fitAddon) return;
+
+                this.fitAddon.fit();
+                const height = this.$refs.terminalWrapper.clientHeight;
+                const width = this.$refs.terminalWrapper.clientWidth;
+                const rows = Math.floor(height / this.term._core._renderService._charSizeService.height) - 1;
+                const cols = Math.floor(width / this.term._core._renderService._charSizeService.width) - 1;
+                const termWidth = cols;
+                const termHeight = rows;
+                this.term.resize(termWidth, termHeight);
+                this.socket.send(JSON.stringify({
+                    resize: { cols: termWidth, rows: termHeight }
+                }));
+            },
+        };
+    }
+
+    window.Alpine.data('terminalData', terminalData);
+}

resources/views/livewire/project/shared/terminal.blade.php

@@ -1,4 +1,4 @@
-<div x-data="data()">
+<div id="terminal-container" x-data="terminalData()">
     {{-- <div x-show="!terminalActive" class="flex items-center justify-center w-full py-4 mx-auto h-[510px]">
         <div class="p-1 w-full h-full rounded border dark:bg-coolgray-100 dark:border-coolgray-300">
             <span class="font-mono text-sm text-gray-500" x-text="message"></span>
@@ -22,219 +22,14 @@
                 </g>
             </svg></button>
     </div>
-
     @script
     <script>
-            const MAX_PENDING_WRITES = 5;
+        // expose terminal config to the terminal.js file
-            let pendingWrites = 0;
+        window.terminalConfig = {
-            let paused = false;
-
-            let socket;
-            let commandBuffer = '';
-
-
-            function keepAlive() {
-                if (socket && socket.readyState === WebSocket.OPEN) {
-                    socket.send(JSON.stringify({
-                        ping: true
-                    }));
-                }
-            }
-
-            const keepAliveInterval = setInterval(keepAlive, 30000);
-
-            // Clear the interval when the component is destroyed
-            document.addEventListener('livewire:navigating', () => {
-                clearInterval(keepAliveInterval);
-            });
-
-            function initializeWebSocket() {
-                if (!socket || socket.readyState === WebSocket.CLOSED) {
-                    const predefined = {
             protocol: "{{ env('TERMINAL_PROTOCOL') }}",
             host: "{{ env('TERMINAL_HOST') }}",
             port: "{{ env('TERMINAL_PORT') }}"
         }
-                    const connectionString = {
-                        protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',
-                        host: window.location.hostname,
-                        port: ":6002",
-                        path: '/terminal/ws'
-                    }
-                    if (!window.location.port) {
-                        connectionString.port = ''
-                    }
-                    if (predefined.host) {
-                        connectionString.host = predefined.host
-                    }
-                    if (predefined.port) {
-                        connectionString.port = `:${predefined.port}`
-                    }
-                    if (predefined.protocol) {
-                        connectionString.protocol = predefined.protocol
-                    }
-
-                    const url =
-                        `${connectionString.protocol}://${connectionString.host}${connectionString.port}${connectionString.path}`
-                    socket = new WebSocket(url);
-
-                    socket.onmessage = handleSocketMessage;
-                    socket.onerror = (e) => {
-                        console.error('WebSocket error:', e);
-                    };
-                    socket.onclose = () => {
-                        console.log('WebSocket connection closed');
-
-                    };
-                }
-            }
-
-            function handleSocketMessage(event) {
-                $data.message = '(connection closed)';
-                // Initialize Terminal
-                if (event.data === 'pty-ready') {
-                    term.open(document.getElementById('terminal'));
-                    $data.terminalActive = true;
-                    term.reset();
-                    term.focus();
-                    document.querySelector('.xterm-viewport').classList.add('scrollbar', 'rounded')
-                    $data.resizeTerminal()
-                } else if (event.data === 'unprocessable') {
-                    term.reset();
-                    $data.terminalActive = false;
-                    $data.message = '(sorry, something went wrong, please try again)';
-                } else {
-                    pendingWrites++;
-                    term.write(event.data, flowControlCallback);
-                }
-            }
-
-            function flowControlCallback() {
-                pendingWrites--;
-                if (pendingWrites > MAX_PENDING_WRITES && !paused) {
-                    paused = true;
-                    socket.send(JSON.stringify({
-                        pause: true
-                    }));
-                    return;
-                }
-                if (pendingWrites <= MAX_PENDING_WRITES && paused) {
-                    paused = false;
-                    socket.send(JSON.stringify({
-                        resume: true
-                    }));
-                    return;
-                }
-            }
-
-            term.onData((data) => {
-                socket.send(JSON.stringify({
-                    message: data
-                }));
-                // Type CTRL + D or exit in the terminal
-                if (data === '\x04' || (data === '\r' && stripAnsiCommands(commandBuffer).trim().includes('exit'))) {
-                    checkIfProcessIsRunningAndKillIt();
-                    setTimeout(() => {
-                        $data.terminalActive = false;
-                        term.reset();
-                    }, 500);
-                    commandBuffer = '';
-                } else if (data === '\r') {
-                    commandBuffer = '';
-                } else {
-                    commandBuffer += data;
-                }
-            });
-
-            function stripAnsiCommands(input) {
-                return input.replace(/\x1b\[[0-9;]*[a-zA-Z]/g, '');
-            }
-
-            // Copy and paste
-            // Enables ctrl + c and ctrl + v
-            // defaults otherwise to ctrl + insert, shift + insert
-            term.attachCustomKeyEventHandler((arg) => {
-                if (arg.ctrlKey && arg.code === "KeyV" && arg.type === "keydown") {
-                    navigator.clipboard.readText()
-                        .then(text => {
-                            socket.send(JSON.stringify({
-                                message: text
-                            }));
-                        })
-                };
-
-                if (arg.ctrlKey && arg.code === "KeyC" && arg.type === "keydown") {
-                    const selection = term.getSelection();
-                    if (selection) {
-                        navigator.clipboard.writeText(selection);
-                        return false;
-                    }
-                }
-                return true;
-            });
-
-            $wire.on('send-back-command', function(command) {
-                socket.send(JSON.stringify({
-                    command: command
-                }));
-            });
-
-            window.addEventListener('beforeunload', function(e) {
-                checkIfProcessIsRunningAndKillIt();
-            });
-
-            function checkIfProcessIsRunningAndKillIt() {
-                socket.send(JSON.stringify({
-                    checkActive: 'force'
-                }));
-            }
-
-            window.onresize = function() {
-                $data.resizeTerminal()
-            };
-
-            Alpine.data('data', () => ({
-                fullscreen: false,
-                terminalActive: false,
-                message: '(connection closed)',
-                init() {
-                    this.$watch('terminalActive', (value) => {
-                        this.$nextTick(() => {
-                            if (value) {
-                                $refs.terminalWrapper.style.display = 'block';
-                                this.resizeTerminal();
-                            } else {
-                                $refs.terminalWrapper.style.display = 'none';
-                            }
-                        });
-                    });
-                },
-                makeFullscreen() {
-                    this.fullscreen = !this.fullscreen;
-                    $nextTick(() => {
-                        this.resizeTerminal()
-                    })
-                },
-
-                resizeTerminal() {
-                    if (!this.terminalActive) return;
-
-                    fitAddon.fit();
-                    const height = $refs.terminalWrapper.clientHeight;
-                    const rows = height / term._core._renderService._charSizeService.height - 1;
-                    var termWidth = term.cols;
-                    var termHeight = parseInt(rows.toString(), 10);
-                    term.resize(termWidth, termHeight);
-                    socket.send(JSON.stringify({
-                        resize: {
-                            cols: termWidth,
-                            rows: termHeight
-                        }
-                    }));
-                }
-            }));
-
-            initializeWebSocket();
     </script>
     @endscript
 </div>