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