feat: add socket.io-client version selector menu (#1867)

packages/hoppscotch-app/components/realtime/Socketio.vue

@@ -15,6 +15,48 @@
             <div class="bg-primary flex p-4 top-0 z-10 sticky">
               <div class="space-x-2 flex-1 inline-flex">
                 <div class="flex flex-1">
+                  <label for="client-version">
+                    <tippy
+                      ref="versionOptions"
+                      interactive
+                      trigger="click"
+                      theme="popover"
+                      arrow
+                    >
+                      <template #trigger>
+                        <span class="select-wrapper">
+                          <input
+                            id="client-version"
+                            v-tippy="{ theme: 'tooltip' }"
+                            title="socket.io-client version"
+                            class="
+                              bg-primaryLight
+                              border border-divider
+                              rounded-l
+                              cursor-pointer
+                              flex
+                              font-semibold
+                              text-secondaryDark
+                              py-2
+                              px-4
+                              w-26
+                              hover:border-dividerDark
+                              focus-visible:bg-transparent
+                              focus-visible:border-dividerDark
+                            "
+                            :value="`Client ${clientVersion}`"
+                            readonly
+                          />
+                        </span>
+                      </template>
+                      <SmartItem
+                        v-for="(_, version) in socketIoClients"
+                        :key="`client-${version}`"
+                        :label="`Client ${version}`"
+                        @click.native="onSelectVersion(version)"
+                      />
+                    </tippy>
+                  </label>
                   <input
                     id="socketio-url"
                     v-model="url"
@@ -26,7 +68,6 @@
                     class="
                       bg-primaryLight
                       border border-divider
-                      rounded-l
                       flex flex-1
                       text-secondaryDark
                       w-full
@@ -167,13 +208,23 @@
 import { defineComponent } from "@nuxtjs/composition-api"
 import { Splitpanes, Pane } from "splitpanes"
 import "splitpanes/dist/splitpanes.css"
-import { io as Client } from "socket.io-client"
+// All Socket.IO client version imports
+import ClientV2 from "socket.io-client-v2"
+import { io as ClientV3 } from "socket.io-client-v3"
+import { io as ClientV4 } from "socket.io-client-v4"
+
 import wildcard from "socketio-wildcard"
 import debounce from "lodash/debounce"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import { useSetting } from "~/newstore/settings"
 import useWindowSize from "~/helpers/utils/useWindowSize"
 
+const socketIoClients = {
+  v4: ClientV4,
+  v3: ClientV3,
+  v2: ClientV2,
+}
+
 export default defineComponent({
   components: { Splitpanes, Pane },
   setup() {
@@ -181,10 +232,13 @@ export default defineComponent({
       windowInnerWidth: useWindowSize(),
       RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
       COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
+      socketIoClients,
     }
   },
   data() {
     return {
+      // default version is set to v4
+      clientVersion: "v4",
       url: "wss://main-daxrc78qyb411dls-gtw.qovery.io",
       path: "/socket.io",
       isUrlValid: true,
@@ -250,9 +304,8 @@ export default defineComponent({
         if (!this.path) {
           this.path = "/socket.io"
         }
-        this.io = new Client(this.url, {
+        const Client = socketIoClients[this.clientVersion]
-          path: this.path,
+        this.io = new Client(this.url, { path: this.path })
-        })
         // Add ability to listen to all events
         wildcard(Client.Manager)(this.io)
         this.io.on("connect", () => {
@@ -362,6 +415,10 @@ export default defineComponent({
         this.communication.inputs = [""]
       }
     },
+    onSelectVersion(version) {
+      this.clientVersion = version
+      this.$refs.versionOptions.tippy().hide()
+    },
   },
 })
 </script>

packages/hoppscotch-app/package.json

@@ -56,7 +56,9 @@
     "nuxt": "^2.15.8",
     "paho-mqtt": "^1.1.0",
     "rxjs": "^7.4.0",
-    "socket.io-client": "^4.2.0",
+    "socket.io-client-v2": "npm:socket.io-client@2.4.0",
+    "socket.io-client-v3": "npm:socket.io-client@3.1.3",
+    "socket.io-client-v4": "npm:socket.io-client@4.2.0",
     "socketio-wildcard": "^2.0.0",
     "splitpanes": "^2.3.8",
     "tern": "^0.24.3",

pnpm-lock.yaml

@@ -85,7 +85,9 @@ importers:
       rxjs: ^7.4.0
       sass: ^1.42.1
       sass-loader: ^10.2.0
-      socket.io-client: ^4.2.0
+      socket.io-client-v2: npm:socket.io-client@2.4.0
+      socket.io-client-v3: npm:socket.io-client@3.1.3
+      socket.io-client-v4: npm:socket.io-client@4.2.0
       socketio-wildcard: ^2.0.0
       splitpanes: ^2.3.8
       stylelint: ^13.13.1
@@ -136,7 +138,9 @@ importers:
       nuxt: 2.15.8_typescript@4.4.3
       paho-mqtt: 1.1.0
       rxjs: 7.4.0
-      socket.io-client: 4.2.0
+      socket.io-client-v2: /socket.io-client/2.4.0
+      socket.io-client-v3: /socket.io-client/3.1.3
+      socket.io-client-v4: /socket.io-client/4.2.0
       socketio-wildcard: 2.0.0
       splitpanes: 2.3.8
       tern: 0.24.3
@@ -5068,6 +5072,10 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  /after/0.8.2:
+    resolution: {integrity: sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8=}
+    dev: false
+
   /agent-base/6.0.2:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
     engines: {node: '>= 6.0.0'}
@@ -5778,6 +5786,10 @@ packages:
       es-abstract: 1.19.1
     dev: true
 
+  /arraybuffer.slice/0.0.7:
+    resolution: {integrity: sha512-wGUIVQXuehL5TCqQun8OW81jGzAWycqzFF8lFp+GOM5BXLYj3bKNsYC4daB7n6XjCqxQA/qgTJ+8ANR3acjrog==}
+    dev: false
+
   /arrify/1.0.1:
     resolution: {integrity: sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=}
     engines: {node: '>=0.10.0'}
@@ -6195,6 +6207,10 @@ packages:
     dependencies:
       file-uri-to-path: 1.0.0
 
+  /blob/0.0.5:
+    resolution: {integrity: sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig==}
+    dev: false
+
   /bluebird/3.7.2:
     resolution: {integrity: sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==}
 
@@ -7054,9 +7070,17 @@ packages:
       dot-prop: 5.3.0
     dev: true
 
+  /component-bind/1.0.0:
+    resolution: {integrity: sha1-AMYIq33Nk4l8AAllGx06jh5zu9E=}
+    dev: false
+
   /component-emitter/1.3.0:
     resolution: {integrity: sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==}
 
+  /component-inherit/0.0.3:
+    resolution: {integrity: sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM=}
+    dev: false
+
   /compressible/2.0.18:
     resolution: {integrity: sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==}
     engines: {node: '>= 0.6'}
@@ -7674,6 +7698,12 @@ packages:
     dependencies:
       ms: 2.0.0
 
+  /debug/3.1.0:
+    resolution: {integrity: sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==}
+    dependencies:
+      ms: 2.0.0
+    dev: false
+
   /debug/3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
     dependencies:
@@ -8071,6 +8101,44 @@ packages:
     dependencies:
       once: 1.4.0
 
+  /engine.io-client/3.5.2:
+    resolution: {integrity: sha512-QEqIp+gJ/kMHeUun7f5Vv3bteRHppHH/FMBQX/esFj/fuYfjyUKWGMo3VCvIP/V8bE9KcjHmRZrhIz2Z9oNsDA==}
+    dependencies:
+      component-emitter: 1.3.0
+      component-inherit: 0.0.3
+      debug: 3.1.0
+      engine.io-parser: 2.2.1
+      has-cors: 1.1.0
+      indexof: 0.0.1
+      parseqs: 0.0.6
+      parseuri: 0.0.6
+      ws: 7.4.6
+      xmlhttprequest-ssl: 1.6.3
+      yeast: 0.1.2
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+    dev: false
+
+  /engine.io-client/4.1.4:
+    resolution: {integrity: sha512-843fqAdKeUMFqKi1sSjnR11tJ4wi8sIefu6+JC1OzkkJBmjtc/gM/rZ53tJfu5Iae/3gApm5veoS+v+gtT0+Fg==}
+    dependencies:
+      base64-arraybuffer: 0.1.4
+      component-emitter: 1.3.0
+      debug: 4.3.2
+      engine.io-parser: 4.0.3
+      has-cors: 1.1.0
+      parseqs: 0.0.6
+      parseuri: 0.0.6
+      ws: 7.4.6
+      xmlhttprequest-ssl: 1.6.3
+      yeast: 0.1.2
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    dev: false
+
   /engine.io-client/5.2.0:
     resolution: {integrity: sha512-BcIBXGBkT7wKecwnfrSV79G2X5lSUSgeAGgoo60plXf8UsQEvCQww/KMwXSMhVjb98fFYNq20CC5eo8IOAPqsg==}
     dependencies:
@@ -8090,6 +8158,16 @@ packages:
       - utf-8-validate
     dev: false
 
+  /engine.io-parser/2.2.1:
+    resolution: {integrity: sha512-x+dN/fBH8Ro8TFwJ+rkB2AmuVw9Yu2mockR/p3W8f8YtExwFgDvBDi0GWyb4ZLkpahtDGZgtr3zLovanJghPqg==}
+    dependencies:
+      after: 0.8.2
+      arraybuffer.slice: 0.0.7
+      base64-arraybuffer: 0.1.4
+      blob: 0.0.5
+      has-binary2: 1.0.3
+    dev: false
+
   /engine.io-parser/4.0.3:
     resolution: {integrity: sha512-xEAAY0msNnESNPc00e19y5heTPX4y/TJ36gr8t1voOaNmTojP9b3oK3BbJLFufW2XFPQaaijpFewm2g2Um3uqA==}
     engines: {node: '>=8.0.0'}
@@ -9834,6 +9912,12 @@ packages:
   /has-bigints/1.0.1:
     resolution: {integrity: sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==}
 
+  /has-binary2/1.0.3:
+    resolution: {integrity: sha512-G1LWKhDSvhGeAQ8mPVQlqNcOB2sJdwATtZKl2pDKKHfpf/rYj24lkinxf69blJbnsvtqqNU+L3SL50vzZhXOnw==}
+    dependencies:
+      isarray: 2.0.1
+    dev: false
+
   /has-cors/1.1.0:
     resolution: {integrity: sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=}
     dev: false
@@ -10351,6 +10435,10 @@ packages:
     resolution: {integrity: sha1-8w9xbI4r00bHtn0985FVZqfAVgc=}
     dev: false
 
+  /indexof/0.0.1:
+    resolution: {integrity: sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=}
+    dev: false
+
   /infer-owner/1.0.4:
     resolution: {integrity: sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==}
     dev: false
@@ -10848,6 +10936,10 @@ packages:
   /isarray/1.0.0:
     resolution: {integrity: sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=}
 
+  /isarray/2.0.1:
+    resolution: {integrity: sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4=}
+    dev: false
+
   /isexe/2.0.0:
     resolution: {integrity: sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=}
 
@@ -15477,6 +15569,42 @@ packages:
       source-map-resolve: 0.5.3
       use: 3.1.1
 
+  /socket.io-client/2.4.0:
+    resolution: {integrity: sha512-M6xhnKQHuuZd4Ba9vltCLT9oa+YvTsP8j9NcEiLElfIg8KeYPyhWOes6x4t+LTAC8enQbE/995AdTem2uNyKKQ==}
+    dependencies:
+      backo2: 1.0.2
+      component-bind: 1.0.0
+      component-emitter: 1.3.0
+      debug: 3.1.0
+      engine.io-client: 3.5.2
+      has-binary2: 1.0.3
+      indexof: 0.0.1
+      parseqs: 0.0.6
+      parseuri: 0.0.6
+      socket.io-parser: 3.3.2
+      to-array: 0.1.4
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+    dev: false
+
+  /socket.io-client/3.1.3:
+    resolution: {integrity: sha512-4sIGOGOmCg3AOgGi7EEr6ZkTZRkrXwub70bBB/F0JSkMOUFpA77WsL87o34DffQQ31PkbMUIadGOk+3tx1KGbw==}
+    engines: {node: '>=10.0.0'}
+    dependencies:
+      '@types/component-emitter': 1.2.10
+      backo2: 1.0.2
+      component-emitter: 1.3.0
+      debug: 4.3.2
+      engine.io-client: 4.1.4
+      parseuri: 0.0.6
+      socket.io-parser: 4.0.4
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    dev: false
+
   /socket.io-client/4.2.0:
     resolution: {integrity: sha512-3GJ2KMh7inJUNAOjgf8NaKJZJa9uRyfryh2LrVJyKyxmzoXlfW9DeDNqylJn0ovOFt4e/kRLNWzMt/YqqEWYSA==}
     engines: {node: '>=10.0.0'}
@@ -15494,6 +15622,14 @@ packages:
       - utf-8-validate
     dev: false
 
+  /socket.io-parser/3.3.2:
+    resolution: {integrity: sha512-FJvDBuOALxdCI9qwRrO/Rfp9yfndRtc1jSgVgV8FDraihmSP/MLGD5PEuJrNfjALvcQ+vMDM/33AWOYP/JSjDg==}
+    dependencies:
+      component-emitter: 1.3.0
+      debug: 3.1.0
+      isarray: 2.0.1
+    dev: false
+
   /socket.io-parser/4.0.4:
     resolution: {integrity: sha512-t+b0SS+IxG7Rxzda2EVvyBZbvFPBCjJoyHuE0P//7OAsN23GItzDRdWa6ALxZI/8R5ygK7jAR6t028/z+7295g==}
     engines: {node: '>=10.0.0'}
@@ -16376,6 +16512,10 @@ packages:
     resolution: {integrity: sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==}
     dev: true
 
+  /to-array/0.1.4:
+    resolution: {integrity: sha1-F+bBH3PdTz10zaek/zI46a2b+JA=}
+    dev: false
+
   /to-arraybuffer/1.0.1:
     resolution: {integrity: sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=}
     dev: false
@@ -17939,6 +18079,11 @@ packages:
     resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
     dev: true
 
+  /xmlhttprequest-ssl/1.6.3:
+    resolution: {integrity: sha512-3XfeQE/wNkvrIktn2Kf0869fC0BN6UpydVasGIeSm2B1Llihf7/0UfZM+eCkOw3P7bP4+qPgqhm7ZoxuJtFU0Q==}
+    engines: {node: '>=0.4.0'}
+    dev: false
+
   /xmlhttprequest-ssl/2.0.0:
     resolution: {integrity: sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==}
     engines: {node: '>=0.4.0'}