From d23e2d8aa1c769afae3ebb30f9fb7ee22943c3ee Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Sat, 25 Nov 2023 21:21:23 +0800
Subject: [PATCH] Enforce Websocket (#181)

* Always show Down button

* Force WebSocket

* Force WebSocket
---
 backend/dockge-server.ts        |  1 +
 frontend/src/lang/en.json       |  7 ++++++-
 frontend/src/layouts/Layout.vue |  7 +++++++
 frontend/src/mixins/socket.ts   | 13 +++++++++++--
 frontend/src/pages/Compose.vue  |  2 +-
 5 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/backend/dockge-server.ts b/backend/dockge-server.ts
index 7aaba63..c4a358f 100644
--- a/backend/dockge-server.ts
+++ b/backend/dockge-server.ts
@@ -195,6 +195,7 @@ export class DockgeServer {
         // Create Socket.io
         this.io = new socketIO.Server(this.httpServer, {
             cors,
+            transports: [ "websocket" ],
         });
 
         this.io.on("connection", async (socket: Socket) => {
diff --git a/frontend/src/lang/en.json b/frontend/src/lang/en.json
index e63df08..874482e 100644
--- a/frontend/src/lang/en.json
+++ b/frontend/src/lang/en.json
@@ -91,5 +91,10 @@
     "Allowed commands:": "Allowed commands:",
     "Internal Networks": "Internal Networks",
     "External Networks": "External Networks",
-    "No External Networks": "No External Networks"
+    "No External Networks": "No External Networks",
+    "reverseProxyMsg1": "Using a Reverse Proxy?",
+    "reverseProxyMsg2": "Check how to config it for WebSocket",
+    "Cannot connect to the socket server.": "Cannot connect to the socket server.",
+    "reconnecting...": "Reconnecting...",
+    "connecting...": "Connecting to the socket server..."
 }
diff --git a/frontend/src/layouts/Layout.vue b/frontend/src/layouts/Layout.vue
index 3d13e2a..ae0d8ae 100644
--- a/frontend/src/layouts/Layout.vue
+++ b/frontend/src/layouts/Layout.vue
@@ -3,6 +3,9 @@
         <div v-if="! $root.socketIO.connected && ! $root.socketIO.firstConnect" class="lost-connection">
             <div class="container-fluid">
                 {{ $root.socketIO.connectionErrorMsg }}
+                <div v-if="$root.socketIO.showReverseProxyGuide">
+                    {{ $t("reverseProxyMsg1") }} <a href="https://github.com/louislam/uptime-kuma/wiki/Reverse-Proxy" target="_blank">{{ $t("reverseProxyMsg2") }}</a>
+                </div>
             </div>
         </div>
 
@@ -82,6 +85,10 @@
         </header>
 
         <main>
+            <div v-if="$root.socketIO.connecting" class="container mt-5">
+                <h4>{{ $t("connecting...") }}</h4>
+            </div>
+
             <router-view v-if="$root.loggedIn" />
             <Login v-if="! $root.loggedIn && $root.allowLoginDialog" />
         </main>
diff --git a/frontend/src/mixins/socket.ts b/frontend/src/mixins/socket.ts
index 42e4698..c85da3c 100644
--- a/frontend/src/mixins/socket.ts
+++ b/frontend/src/mixins/socket.ts
@@ -19,6 +19,7 @@ export default defineComponent({
                 initedSocketIO: false,
                 connectionErrorMsg: `${this.$t("Cannot connect to the socket server.")} ${this.$t("Reconnecting...")}`,
                 showReverseProxyGuide: true,
+                connecting: false,
             },
             info: {
 
@@ -103,13 +104,20 @@ export default defineComponent({
                 url = location.protocol + "//" + location.host;
             }
 
+            let connectingMsgTimeout = setTimeout(() => {
+                this.socketIO.connecting = true;
+            }, 1500);
+
             socket = io(url, {
-                transports: [ "websocket", "polling" ]
+                transports: [ "websocket" ]
             });
 
             socket.on("connect", () => {
                 console.log("Connected to the socket server");
 
+                clearTimeout(connectingMsgTimeout);
+                this.socketIO.connecting = false;
+
                 this.socketIO.connectCount++;
                 this.socketIO.connected = true;
                 this.socketIO.showReverseProxyGuide = false;
@@ -143,10 +151,11 @@ export default defineComponent({
 
             socket.on("connect_error", (err) => {
                 console.error(`Failed to connect to the backend. Socket.io connect_error: ${err.message}`);
-                this.socketIO.connectionErrorMsg = `${this.$t("Cannot connect to the socket server.")} [${err}] ${this.$t("Reconnecting...")}`;
+                this.socketIO.connectionErrorMsg = `${this.$t("Cannot connect to the socket server.")} [${err}] ${this.$t("reconnecting...")}`;
                 this.socketIO.showReverseProxyGuide = true;
                 this.socketIO.connected = false;
                 this.socketIO.firstConnect = false;
+                this.socketIO.connecting = false;
             });
 
             // Custom Events
diff --git a/frontend/src/pages/Compose.vue b/frontend/src/pages/Compose.vue
index 88db8ce..fa8a727 100644
--- a/frontend/src/pages/Compose.vue
+++ b/frontend/src/pages/Compose.vue
@@ -41,7 +41,7 @@
                         {{ $t("stopStack") }}
                     </button>
 
-                    <BDropdown v-if="!isEditMode && active" right text="" variant="normal">
+                    <BDropdown right text="" variant="normal">
                         <BDropdownItem @click="downStack">
                             <font-awesome-icon icon="stop" class="me-1" />
                             {{ $t("downStack") }}