Update WebSocket URL in terminal.blade.php to include /ws for consi…

…stency with the server configuration.
coollabsio · Sep 13, 2024 · dcf91cc · dcf91cc
1 parent cddf847
commit dcf91cc
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 15 deletions.
diff --git a/app/Models/Server.php b/app/Models/Server.php
@@ -310,7 +310,7 @@ public function setupDynamicProxyConfiguration()
                                     0 => 'http',
                                 ],
                                 'service' => 'coolify-terminal',
-                                'rule' => "Host(`{$host}`) && PathPrefix(`/terminal`)",
+                                'rule' => "Host(`{$host}`) && PathPrefix(`/terminal/ws`)",
                             ],
                         ],
                         'services' => [
@@ -375,7 +375,7 @@ public function setupDynamicProxyConfiguration()
                             0 => 'https',
                         ],
                         'service' => 'coolify-terminal',
-                        'rule' => "Host(`{$host}`) && PathPrefix(`/terminal`)",
+                        'rule' => "Host(`{$host}`) && PathPrefix(`/terminal/ws`)",
                         'tls' => [
                             'certresolver' => 'letsencrypt',
                         ],
@@ -413,7 +413,7 @@ public function setupDynamicProxyConfiguration()
     handle /app/* {
         reverse_proxy coolify-realtime:6001
     }
-    handle /terminal/* {
+    handle /terminal/ws/* {
         reverse_proxy coolify-realtime:6002
     }
     reverse_proxy coolify:80

diff --git a/docker/coolify-realtime/terminal-server.js b/docker/coolify-realtime/terminal-server.js
@@ -17,8 +17,8 @@ const server = http.createServer((req, res) => {
 
 const verifyClient = async (info, callback) => {
     const cookies = cookie.parse(info.req.headers.cookie || '');
-    const origin = new URL(info.origin);
-    const protocol = origin.protocol;
+    // const origin = new URL(info.origin);
+    // const protocol = origin.protocol;
     const xsrfToken = cookies['XSRF-TOKEN'];
 
     // Generate session cookie name based on APP_NAME
@@ -53,7 +53,7 @@ const verifyClient = async (info, callback) => {
 };
 
 
-const wss = new WebSocketServer({ server, path: '/terminal', verifyClient: verifyClient });
+const wss = new WebSocketServer({ server, path: '/terminal/ws', verifyClient: verifyClient });
 const userSessions = new Map();
 
 wss.on('connection', (ws) => {

diff --git a/resources/js/app.js b/resources/js/app.js
@@ -14,7 +14,7 @@ if (!window.term) {
         cols: 80,
         rows: 30,
         fontFamily: '"Fira Code", courier-new, courier, monospace, "Powerline Extra Symbols"',
-        cursorBlink: true
+        cursorBlink: true,
     });
     window.fitAddon = new FitAddon();
     window.term.loadAddon(window.fitAddon);

diff --git a/resources/views/livewire/project/shared/terminal.blade.php b/resources/views/livewire/project/shared/terminal.blade.php
@@ -1,18 +1,18 @@
 <div x-data="data()">
-    <div x-show="!terminalActive" class="flex items-center justify-center w-full py-4 mx-auto h-[510px]">
-        <div class="w-full h-full border rounded dark:bg-coolgray-100 dark:border-coolgray-300 p-1">
+    {{-- <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>
         </div>
-    </div>
+    </div> --}}
     <div x-ref="terminalWrapper"
         :class="fullscreen ? 'fullscreen' : 'relative w-full h-full py-4 mx-auto max-h-[510px]'">
         <div id="terminal" wire:ignore></div>
-        <button title="Minimize" x-show="fullscreen" class="fixed top-4 right-4 text-white"
-            x-on:click="makeFullscreen"><svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <button title="Minimize" x-show="fullscreen" class="fixed top-4 right-4 text-white" x-on:click="makeFullscreen"><svg
+                class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                 <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                     stroke-width="2" d="M6 14h4m0 0v4m0-4l-6 6m14-10h-4m0 0V6m0 4l6-6" />
             </svg></button>
-        <button title="Fullscreen" x-show="!fullscreen && terminalActive" class="absolute top-6 right-4 text-white"
+        <button title="Fullscreen" x-show="!fullscreen && terminalActive" class="absolute right-4 top-6 text-white"
             x-on:click="makeFullscreen"><svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                 <g fill="none">
                     <path
@@ -35,10 +35,10 @@
             function initializeWebSocket() {
                 if (!socket || socket.readyState === WebSocket.CLOSED) {
                     // Only use port if Coolify is used with ip (so it has a port in the url)
-                    let postPath = ':6002/terminal';
+                    let postPath = ':6002/terminal/ws';
                     const port = window.location.port;
                     if (!port) {
-                        postPath = '/terminal';
+                        postPath = '/terminal/ws';
                     }
                     let url = window.location.hostname;
                     // make sure the port is not included