fix(ui): allow to connect to a websocket-only server

Related:

- https://github.com/socketio/socket.io-admin-ui/pull/4
- https://github.com/socketio/engine.io-client/issues/575

ui/src/App.vue

@@ -15,6 +15,7 @@
     <ConnectionModal
       :is-open="showConnectionModal"
       :initial-server-url="serverUrl"
+      :initial-ws-only="wsOnly"
       :is-connecting="isConnecting"
       :error="connectionError"
       @submit="onSubmit"
@@ -59,6 +60,7 @@ export default {
   computed: {
     ...mapState({
       serverUrl: (state) => state.connection.serverUrl,
+      wsOnly: (state) => state.connection.wsOnly,
       backgroundColor: (state) =>
         state.config.darkTheme ? "" : "grey lighten-5",
     }),
@@ -80,7 +82,7 @@ export default {
   },
 
   methods: {
-    tryConnect(serverUrl, auth) {
+    tryConnect(serverUrl, auth, wsOnly) {
       this.isConnecting = true;
       if (SocketHolder.socket) {
         SocketHolder.socket.disconnect();
@@ -92,6 +94,7 @@ export default {
         forceNew: true,
         reconnection: false,
         withCredentials: true, // needed for cookie-based sticky-sessions
+        transports: wsOnly ? ["websocket"] : ["polling", "websocket"],
         auth,
       });
       socket.once("connect", () => {
@@ -100,7 +103,7 @@ export default {
         this.isConnecting = false;
 
         socket.io.reconnection(true);
-        this.$store.commit("connection/saveServerUrl", serverUrl);
+        this.$store.commit("connection/saveConfig", { serverUrl, wsOnly });
         SocketHolder.socket = socket;
         this.registerEventListeners(socket);
       });
@@ -154,10 +157,14 @@ export default {
     },
 
     onSubmit(form) {
-      this.tryConnect(form.serverUrl, {
-        username: form.username,
-        password: form.password,
-      });
+      this.tryConnect(
+        form.serverUrl,
+        {
+          username: form.username,
+          password: form.password,
+        },
+        form.wsOnly
+      );
     },
   },
 
@@ -166,9 +173,14 @@ export default {
 
     if (this.serverUrl) {
       const sessionId = this.$store.state.connection.sessionId;
-      this.tryConnect(this.serverUrl, {
-        sessionId,
-      });
+      const wsOnly = this.$store.state.connection.wsOnly;
+      this.tryConnect(
+        this.serverUrl,
+        {
+          sessionId,
+        },
+        wsOnly
+      );
     } else {
       this.showConnectionModal = true;
     }

ui/src/components/ConnectionModal.vue

@@ -25,6 +25,13 @@
             type="password"
           ></v-text-field>
 
+          <v-switch
+            v-model="wsOnly"
+            :label="$t('connection.websocket-only')"
+            inset
+            dense
+          />
+
           <v-btn
             :loading="isConnecting"
             :disabled="isConnecting || !isValid"
@@ -49,12 +56,14 @@ export default {
     isOpen: Boolean,
     isConnecting: Boolean,
     initialServerUrl: String,
+    initialWsOnly: Boolean,
     error: String,
   },
 
   data() {
     return {
       serverUrl: this.initialServerUrl,
+      wsOnly: this.initialWsOnly,
       username: "",
       password: "",
     };
@@ -75,6 +84,7 @@ export default {
     onSubmit() {
       this.$emit("submit", {
         serverUrl: this.serverUrl,
+        wsOnly: this.wsOnly,
         username: this.username,
         password: this.password,
       });

ui/src/locales/en.json

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

ui/src/locales/fr.json

@@ -21,7 +21,8 @@
     "password": "Mot de passe",
     "connect": "Se connecter",
     "invalid-credentials": "Identifiants invalides",
-    "error": "Erreur"
+    "error": "Erreur",
+    "websocket-only": "WebSocket uniquement ?"
   },
   "dashboard": {
     "title": "Accueil"

ui/src/store/modules/connection.js

@@ -4,6 +4,7 @@ export default {
   namespaced: true,
   state: {
     serverUrl: "",
+    wsOnly: false,
     sessionId: "",
     connected: false,
   },
@@ -11,13 +12,16 @@ export default {
     init(state) {
       if (isLocalStorageAvailable) {
         state.serverUrl = localStorage.getItem("server_url");
+        state.wsOnly = localStorage.getItem("ws_only") === "true";
         state.sessionId = localStorage.getItem("session_id");
       }
     },
-    saveServerUrl(state, serverUrl) {
+    saveConfig(state, { serverUrl, wsOnly }) {
       state.serverUrl = serverUrl;
+      state.wsOnly = wsOnly;
       if (isLocalStorageAvailable) {
         localStorage.setItem("server_url", serverUrl);
+        localStorage.setItem("ws_only", wsOnly);
       }
     },
     saveSessionId(state, sessionId) {