fix(ui): allow to specify the connection path

Related: https://github.com/socketio/socket.io-admin-ui/issues/8

ui/src/App.vue

@@ -16,6 +16,7 @@
       :is-open="showConnectionModal"
       :initial-server-url="serverUrl"
       :initial-ws-only="wsOnly"
+      :initial-path="path"
       :is-connecting="isConnecting"
       :error="connectionError"
       @submit="onSubmit"
@@ -61,6 +62,7 @@ export default {
     ...mapState({
       serverUrl: (state) => state.connection.serverUrl,
       wsOnly: (state) => state.connection.wsOnly,
+      path: (state) => state.connection.path,
       backgroundColor: (state) =>
         state.config.darkTheme ? "" : "grey lighten-5",
     }),
@@ -82,7 +84,7 @@ export default {
   },
 
   methods: {
-    tryConnect(serverUrl, auth, wsOnly) {
+    tryConnect(serverUrl, auth, wsOnly, path) {
       this.isConnecting = true;
       if (SocketHolder.socket) {
         SocketHolder.socket.disconnect();
@@ -95,6 +97,7 @@ export default {
         reconnection: false,
         withCredentials: true, // needed for cookie-based sticky-sessions
         transports: wsOnly ? ["websocket"] : ["polling", "websocket"],
+        path,
         auth,
       });
       socket.once("connect", () => {
@@ -103,7 +106,11 @@ export default {
         this.isConnecting = false;
 
         socket.io.reconnection(true);
-        this.$store.commit("connection/saveConfig", { serverUrl, wsOnly });
+        this.$store.commit("connection/saveConfig", {
+          serverUrl,
+          wsOnly,
+          path,
+        });
         SocketHolder.socket = socket;
         this.registerEventListeners(socket);
       });
@@ -163,7 +170,8 @@ export default {
           username: form.username,
           password: form.password,
         },
-        form.wsOnly
+        form.wsOnly,
+        form.path
       );
     },
   },
@@ -173,13 +181,13 @@ export default {
 
     if (this.serverUrl) {
       const sessionId = this.$store.state.connection.sessionId;
-      const wsOnly = this.$store.state.connection.wsOnly;
       this.tryConnect(
         this.serverUrl,
         {
           sessionId,
         },
-        wsOnly
+        this.wsOnly,
+        this.path
       );
     } else {
       this.showConnectionModal = true;

ui/src/components/ConnectionModal.vue

@@ -32,6 +32,11 @@
             dense
           />
 
+          <v-text-field
+            v-model="path"
+            :label="$t('connection.path')"
+          ></v-text-field>
+
           <v-btn
             :loading="isConnecting"
             :disabled="isConnecting || !isValid"
@@ -57,6 +62,7 @@ export default {
     isConnecting: Boolean,
     initialServerUrl: String,
     initialWsOnly: Boolean,
+    initialPath: String,
     error: String,
   },
 
@@ -64,6 +70,7 @@ export default {
     return {
       serverUrl: this.initialServerUrl,
       wsOnly: this.initialWsOnly,
+      path: this.initialPath,
       username: "",
       password: "",
     };
@@ -85,6 +92,7 @@ export default {
       this.$emit("submit", {
         serverUrl: this.serverUrl,
         wsOnly: this.wsOnly,
+        path: this.path,
         username: this.username,
         password: this.password,
       });

ui/src/locales/en.json

@@ -22,7 +22,8 @@
     "connect": "Connect",
     "invalid-credentials": "Invalid credentials",
     "error": "Error",
-    "websocket-only": "WebSocket only?"
+    "websocket-only": "WebSocket only?",
+    "path": "Path"
   },
   "dashboard": {
     "title": "Dashboard"

ui/src/locales/fr.json

@@ -22,7 +22,8 @@
     "connect": "Se connecter",
     "invalid-credentials": "Identifiants invalides",
     "error": "Erreur",
-    "websocket-only": "WebSocket uniquement ?"
+    "websocket-only": "WebSocket uniquement ?",
+    "path": "Chemin HTTP"
   },
   "dashboard": {
     "title": "Accueil"

ui/src/store/modules/connection.js

@@ -5,6 +5,7 @@ export default {
   state: {
     serverUrl: "",
     wsOnly: false,
+    path: "/socket.io",
     sessionId: "",
     connected: false,
   },
@@ -14,14 +15,17 @@ export default {
         state.serverUrl = localStorage.getItem("server_url");
         state.wsOnly = localStorage.getItem("ws_only") === "true";
         state.sessionId = localStorage.getItem("session_id");
+        state.path = localStorage.getItem("path") || "/socket.io";
       }
     },
-    saveConfig(state, { serverUrl, wsOnly }) {
+    saveConfig(state, { serverUrl, wsOnly, path }) {
       state.serverUrl = serverUrl;
       state.wsOnly = wsOnly;
+      state.path = path;
       if (isLocalStorageAvailable) {
         localStorage.setItem("server_url", serverUrl);
         localStorage.setItem("ws_only", wsOnly);
+        localStorage.setItem("path", path);
       }
     },
     saveSessionId(state, sessionId) {