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

Enforce Websocket (#181)

Browse source 
* Always show Down button

* Force WebSocket

* Force WebSocket
This commit is contained in:
Louis Lam 2023-11-25 21:21:23 +08:00 committed by GitHub
parent 457f038108
commit d23e2d8aa1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 26 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
backend/dockge-server.ts
View file

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

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

@ -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..."
}

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

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

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

2
frontend/src/pages/Compose.vue
View file

@ -41,7 +41,7 @@
{{ $t("stopStack") }}
</button>
<BDropdown v-if="!isEditMode && active" right text="" variant="normal">
<BDropdown right text="" variant="normal">
<BDropdownItem @click="downStack">
<font-awesome-icon icon="stop" class="me-1" />
{{ $t("downStack") }}