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 5190f69..d01bcb6 100644 --- a/frontend/src/lang/en.json +++ b/frontend/src/lang/en.json @@ -92,5 +92,10 @@ "Internal Networks": "Internal Networks", "External Networks": "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...", "url": "URL | URLs" } 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 @@
{{ $root.socketIO.connectionErrorMsg }} +
+ {{ $t("reverseProxyMsg1") }} {{ $t("reverseProxyMsg2") }} +
@@ -82,6 +85,10 @@
+
+

{{ $t("connecting...") }}

+
+
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