Force WebSocket

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) => {

backend/socket-handlers/docker-socket-handler.ts

@@ -189,28 +189,6 @@ export class DockerSocketHandler extends SocketHandler {
             }
         });
 
-        // rolloutStack
-        socket.on("rolloutStack", async (stackName : unknown, callback) => {
-            try {
-                checkLogin(socket);
-
-                if (typeof(stackName) !== "string") {
-                    throw new ValidationError("Stack name must be a string");
-                }
-
-                const stack = Stack.getStack(server, stackName);
-                await stack.rollout(socket);
-                callback({
-                    ok: true,
-                    msg: "Rolled out"
-                });
-                server.sendStackList();
-                stack.joinCombinedTerminal(socket);
-            } catch (e) {
-                callbackError(e, callback);
-            }
-        });
-
         // down stack
         socket.on("downStack", async (stackName : unknown, callback) => {
             try {

backend/stack.ts

@@ -323,21 +323,6 @@ export class Stack {
         return exitCode;
     }
 
-    async rollout(socket: DockgeSocket) {
-        let terminalName = getComposeTerminalName(this.name);
-        let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "pull" ], this.path);
-        if (exitCode !== 0) {
-            throw new Error("Failed to pull, please check the terminal output for more information.");
-        }
-
-        terminalName = getComposeTerminalName(this.name);
-        exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "rollout", this.name ], this.path);
-        if (exitCode !== 0) {
-            throw new Error("Failed to rollout, please check the terminal output for more information.");
-        }
-        return exitCode;
-    }
-
     async stop(socket: DockgeSocket) : Promise<number> {
         const terminalName = getComposeTerminalName(this.name);
         let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "stop" ], this.path);

docker/Base.Dockerfile

@@ -25,8 +25,15 @@ RUN apt update && apt install --yes --no-install-recommends \
     && npm install pnpm -g \
     && pnpm install -g tsx
 
-# Install docker rollout plugin \
+# ensures that /var/run/docker.sock exists
-RUN mkdir -p ~/.docker/cli-plugins \
+# changes the ownership of /var/run/docker.sock
-    && curl https://raw.githubusercontent.com/wowu/docker-rollout/master/docker-rollout -o ~/.docker/cli-plugins/docker-rollout \
+RUN touch /var/run/docker.sock && chown node:node /var/run/docker.sock
-    && chmod +x ~/.docker/cli-plugins/docker-rollout \
+
-    && docker rollout --help
+# Full Base Image
+# MariaDB, Chromium and fonts
+#FROM base-slim AS base
+#ENV DOCKGE_ENABLE_EMBEDDED_MARIADB=1
+#RUN apt update && \
+#   apt --yes --no-install-recommends install mariadb-server && \
+#   rm -rf /var/lib/apt/lists/* && \
+#   apt --yes autoremove

frontend/src/icon.ts

@@ -54,7 +54,6 @@ import {
     faTerminal, faWarehouse, faHome, faRocket,
     faRotate,
     faCloudArrowDown, faArrowsRotate,
-    faPaintRoller,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -110,7 +109,6 @@ library.add(
     faRotate,
     faCloudArrowDown,
     faArrowsRotate,
-    faPaintRoller,
 );
 
 export { FontAwesomeIcon };

frontend/src/lang/en.json

@@ -20,7 +20,6 @@
     "updateStack": "Update",
     "startStack": "Start",
     "downStack": "Stop & Down",
-    "rolloutStack": "Rollout Update (Zero Downtime)",
     "editStack": "Edit",
     "discardStack": "Discard",
     "saveStackDraft": "Save",
@@ -92,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..."
 }

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>

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

frontend/src/pages/Compose.vue

@@ -41,15 +41,11 @@
                         {{ $t("stopStack") }}
                     </button>
 
-                    <BDropdown v-if="!isEditMode || active" right text="" variant="normal">
+                    <BDropdown right text="" variant="normal">
-                        <BDropdownItem v-if="!isEditMode" @click="downStack">
+                        <BDropdownItem @click="downStack">
                             <font-awesome-icon icon="stop" class="me-1" />
                             {{ $t("downStack") }}
                         </BDropdownItem>
-                        <BDropdownItem v-if="active" @click="rolloutStack">
-                            <font-awesome-icon icon="paint-roller" class="me-1" />
-                            {{ $t("rolloutStack") }} <span class="badge bg-info">Beta</span>
-                        </BDropdownItem>
                     </BDropdown>
                 </div>
 
@@ -490,15 +486,6 @@ export default {
             });
         },
 
-        rolloutStack() {
-            this.processing = true;
-
-            this.$root.getSocket().emit("rolloutStack", this.stack.name, (res) => {
-                this.processing = false;
-                this.$root.toastRes(res);
-            });
-        },
-
         downStack() {
             this.processing = true;