Update WebSocket URL in terminal.blade.php to include /ws for consistency with the server configuration.

This commit is contained in:
Andras Bacsai
2024-09-13 16:58:16 +02:00
parent cddf8476de
commit dcf91cc034
4 changed files with 15 additions and 15 deletions

View File

@@ -310,7 +310,7 @@ respond 404
0 => 'http', 0 => 'http',
], ],
'service' => 'coolify-terminal', 'service' => 'coolify-terminal',
'rule' => "Host(`{$host}`) && PathPrefix(`/terminal`)", 'rule' => "Host(`{$host}`) && PathPrefix(`/terminal/ws`)",
], ],
], ],
'services' => [ 'services' => [
@@ -375,7 +375,7 @@ respond 404
0 => 'https', 0 => 'https',
], ],
'service' => 'coolify-terminal', 'service' => 'coolify-terminal',
'rule' => "Host(`{$host}`) && PathPrefix(`/terminal`)", 'rule' => "Host(`{$host}`) && PathPrefix(`/terminal/ws`)",
'tls' => [ 'tls' => [
'certresolver' => 'letsencrypt', 'certresolver' => 'letsencrypt',
], ],
@@ -413,7 +413,7 @@ $schema://$host {
handle /app/* { handle /app/* {
reverse_proxy coolify-realtime:6001 reverse_proxy coolify-realtime:6001
} }
handle /terminal/* { handle /terminal/ws/* {
reverse_proxy coolify-realtime:6002 reverse_proxy coolify-realtime:6002
} }
reverse_proxy coolify:80 reverse_proxy coolify:80

View File

@@ -17,8 +17,8 @@ const server = http.createServer((req, res) => {
const verifyClient = async (info, callback) => { const verifyClient = async (info, callback) => {
const cookies = cookie.parse(info.req.headers.cookie || ''); const cookies = cookie.parse(info.req.headers.cookie || '');
const origin = new URL(info.origin); // const origin = new URL(info.origin);
const protocol = origin.protocol; // const protocol = origin.protocol;
const xsrfToken = cookies['XSRF-TOKEN']; const xsrfToken = cookies['XSRF-TOKEN'];
// Generate session cookie name based on APP_NAME // 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(); const userSessions = new Map();
wss.on('connection', (ws) => { wss.on('connection', (ws) => {

View File

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

View File

@@ -1,18 +1,18 @@
<div x-data="data()"> <div x-data="data()">
<div x-show="!terminalActive" class="flex items-center justify-center w-full py-4 mx-auto h-[510px]"> {{-- <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 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> <span class="font-mono text-sm text-gray-500" x-text="message"></span>
</div> </div>
</div> </div> --}}
<div x-ref="terminalWrapper" <div x-ref="terminalWrapper"
:class="fullscreen ? 'fullscreen' : 'relative w-full h-full py-4 mx-auto max-h-[510px]'"> :class="fullscreen ? 'fullscreen' : 'relative w-full h-full py-4 mx-auto max-h-[510px]'">
<div id="terminal" wire:ignore></div> <div id="terminal" wire:ignore></div>
<button title="Minimize" x-show="fullscreen" class="fixed top-4 right-4 text-white" <button title="Minimize" x-show="fullscreen" class="fixed top-4 right-4 text-white" x-on:click="makeFullscreen"><svg
x-on:click="makeFullscreen"><svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/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" <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" /> stroke-width="2" d="M6 14h4m0 0v4m0-4l-6 6m14-10h-4m0 0V6m0 4l6-6" />
</svg></button> </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"> x-on:click="makeFullscreen"><svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g fill="none"> <g fill="none">
<path <path
@@ -35,10 +35,10 @@
function initializeWebSocket() { function initializeWebSocket() {
if (!socket || socket.readyState === WebSocket.CLOSED) { if (!socket || socket.readyState === WebSocket.CLOSED) {
// Only use port if Coolify is used with ip (so it has a port in the url) // 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; const port = window.location.port;
if (!port) { if (!port) {
postPath = '/terminal'; postPath = '/terminal/ws';
} }
let url = window.location.hostname; let url = window.location.hostname;
// make sure the port is not included // make sure the port is not included