ric/dockge
1
0
Fork 0
mirror of https://github.com/louislam/dockge.git synced 2024-11-24 03:44:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Force WebSocket

Browse source
This commit is contained in:
Louis Lam 2023-11-25 20:55:05 +08:00
parent f6fffcc064
commit 56eb46150f
3 changed files with 24 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/lang/en.json
View file

@ -91,5 +91,10 @@
"Allowed commands:": "Allowed commands:", "Allowed commands:": "Allowed commands:",
"Internal Networks": "Internal Networks", "Internal Networks": "Internal Networks",
"External Networks": "External 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..."
} }

7
frontend/src/layouts/Layout.vue
View file

@ -3,6 +3,9 @@
<div v-if="! $root.socketIO.connected && ! $root.socketIO.firstConnect" class="lost-connection"> <div v-if="! $root.socketIO.connected && ! $root.socketIO.firstConnect" class="lost-connection">
<div class="container-fluid"> <div class="container-fluid">
{{ $root.socketIO.connectionErrorMsg }} {{ $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>
</div> </div>
@ -82,6 +85,10 @@
</header> </header>
<main> <main>
<div v-if="$root.socketIO.connecting" class="container mt-5">
<h4>{{ $t("connecting...") }}</h4>
</div>
<router-view v-if="$root.loggedIn" /> <router-view v-if="$root.loggedIn" />
<Login v-if="! $root.loggedIn && $root.allowLoginDialog" /> <Login v-if="! $root.loggedIn && $root.allowLoginDialog" />
</main> </main>

13
frontend/src/mixins/socket.ts
View file

@ -19,6 +19,7 @@ export default defineComponent({
initedSocketIO: false, initedSocketIO: false,
connectionErrorMsg: `${this.$t("Cannot connect to the socket server.")} ${this.$t("Reconnecting...")}`, connectionErrorMsg: `${this.$t("Cannot connect to the socket server.")} ${this.$t("Reconnecting...")}`,
showReverseProxyGuide: true, showReverseProxyGuide: true,
connecting: false,
}, },
info: { info: {
@ -103,13 +104,20 @@ export default defineComponent({
url = location.protocol + "//" + location.host; url = location.protocol + "//" + location.host;
} }
let connectingMsgTimeout = setTimeout(() => {
this.socketIO.connecting = true;
}, 1500);
socket = io(url, { socket = io(url, {
transports: [ "websocket", "polling" ] transports: [ "websocket" ]
}); });
socket.on("connect", () => { socket.on("connect", () => {
console.log("Connected to the socket server"); console.log("Connected to the socket server");
clearTimeout(connectingMsgTimeout);
this.socketIO.connecting = false;
this.socketIO.connectCount++; this.socketIO.connectCount++;
this.socketIO.connected = true; this.socketIO.connected = true;
this.socketIO.showReverseProxyGuide = false; this.socketIO.showReverseProxyGuide = false;
@ -143,10 +151,11 @@ export default defineComponent({
socket.on("connect_error", (err) => { socket.on("connect_error", (err) => {
console.error(`Failed to connect to the backend. Socket.io connect_error: ${err.message}`); 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.showReverseProxyGuide = true;
this.socketIO.connected = false; this.socketIO.connected = false;
this.socketIO.firstConnect = false; this.socketIO.firstConnect = false;
this.socketIO.connecting = false;
}); });
// Custom Events // Custom Events