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 @@
{{ $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