btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

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

Browse Source
This commit is contained in:
Akash Hamirwasia
2021-10-12 11:22:47 +05:30
committed by GitHub
parent ab9b3e47b9
commit b8ffa872c7
3 changed files with 212 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
packages/hoppscotch-app/components/realtime/Socketio.vue
View File

@@ -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, {
path: this.path,
})
const Client = socketIoClients[this.clientVersion]
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>

4
packages/hoppscotch-app/package.json
View File

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

149
pnpm-lock.yaml generated
View File

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