is a light-weight, web based API development suite.
| Socketio.vue (hoppscotch-2.0.0) | : | Socketio.vue (hoppscotch-2.1.0) |
|---|
| <template> | | <template> |
|
| <Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical> | | <Splitpanes |
| <Pane class="hide-scrollbar !overflow-auto"> | | class="smart-splitter" |
| <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal> | | :rtl="SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768" |
| | :class="{ |
| | '!flex-row-reverse': SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768, |
| | }" |
| | :horizontal="!(windowInnerWidth.x.value >= 768)" |
| | > |
| | <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto"> |
| | <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT"> |
| <Pane class="hide-scrollbar !overflow-auto"> | | <Pane class="hide-scrollbar !overflow-auto"> |
| <AppSection label="request"> | | <AppSection label="request"> |
| <div class="bg-primary flex p-4 top-0 z-10 sticky"> | | <div class="bg-primary flex p-4 top-0 z-10 sticky"> |
| <div class="space-x-2 flex-1 inline-flex"> | | <div class="space-x-2 flex-1 inline-flex"> |
| <div class="flex flex-1"> | | <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 |
| | :disabled="connectionState" |
| | /> |
| | </span> |
| | </template> |
| | <SmartItem |
| | v-for="(_, version) in socketIoClients" |
| | :key="`client-${version}`" |
| | :label="`Client ${version}`" |
| | @click.native="onSelectVersion(version)" |
| | /> |
| | </tippy> |
| | </label> |
| <input | | <input |
| id="socketio-url" | | id="socketio-url" |
| v-model="url" | | v-model="url" |
| v-focus | | v-focus |
| type="url" | | type="url" |
|
| | autocomplete="off" |
| spellcheck="false" | | spellcheck="false" |
| :class="{ error: !urlValid }" | | :class="{ error: !urlValid }" |
| class=" | | class=" |
| bg-primaryLight | | bg-primaryLight |
| border border-divider | | border border-divider |
|
| rounded-l | | |
| flex flex-1 | | flex flex-1 |
| text-secondaryDark | | text-secondaryDark |
| w-full | | w-full |
| py-2 | | py-2 |
| px-4 | | px-4 |
| hover:border-dividerDark | | hover:border-dividerDark |
| focus-visible:bg-transparent | | focus-visible:bg-transparent |
| focus-visible:border-dividerDark | | focus-visible:border-dividerDark |
| " | | " |
| :placeholder="$t('socketio.url')" | | :placeholder="$t('socketio.url')" |
|
| | :disabled="connectionState" |
| @keyup.enter="urlValid ? toggleConnection() : null" | | @keyup.enter="urlValid ? toggleConnection() : null" |
| /> | | /> |
| <input | | <input |
| id="socketio-path" | | id="socketio-path" |
| v-model="path" | | v-model="path" |
| class=" | | class=" |
| bg-primaryLight | | bg-primaryLight |
| border border-divider | | border border-divider |
| rounded-r | | rounded-r |
| flex flex-1 | | flex flex-1 |
| text-secondaryDark | | text-secondaryDark |
| w-full | | w-full |
| py-2 | | py-2 |
| px-4 | | px-4 |
| hover:border-dividerDark | | hover:border-dividerDark |
| focus-visible:bg-transparent | | focus-visible:bg-transparent |
| focus-visible:border-dividerDark | | focus-visible:border-dividerDark |
| " | | " |
| spellcheck="false" | | spellcheck="false" |
|
| | :disabled="connectionState" |
| /> | | /> |
| </div> | | </div> |
| <ButtonPrimary | | <ButtonPrimary |
| id="connect" | | id="connect" |
| :disabled="!urlValid" | | :disabled="!urlValid" |
| name="connect" | | name="connect" |
| class="w-32" | | class="w-32" |
| :label=" | | :label=" |
| !connectionState | | !connectionState |
| ? $t('action.connect') | | ? $t('action.connect') |
| | |
| skipping to change at line 77 | | skipping to change at line 129 |
|---|
| </AppSection> | | </AppSection> |
| </Pane> | | </Pane> |
| <Pane class="hide-scrollbar !overflow-auto"> | | <Pane class="hide-scrollbar !overflow-auto"> |
| <AppSection label="response"> | | <AppSection label="response"> |
| <RealtimeLog :title="$t('socketio.log')" :log="communication.log" /> | | <RealtimeLog :title="$t('socketio.log')" :log="communication.log" /> |
| </AppSection> | | </AppSection> |
| </Pane> | | </Pane> |
| </Splitpanes> | | </Splitpanes> |
| </Pane> | | </Pane> |
| <Pane | | <Pane |
|
| v-if="RIGHT_SIDEBAR" | | v-if="SIDEBAR" |
| max-size="35" | | |
| size="25" | | size="25" |
| min-size="20" | | min-size="20" |
| class="hide-scrollbar !overflow-auto" | | class="hide-scrollbar !overflow-auto" |
| > | | > |
| <AppSection label="messages"> | | <AppSection label="messages"> |
| <div class="flex flex-col flex-1 p-4 inline-flex"> | | <div class="flex flex-col flex-1 p-4 inline-flex"> |
| <label for="events" class="font-semibold text-secondaryLight"> | | <label for="events" class="font-semibold text-secondaryLight"> |
| {{ $t("socketio.events") }} | | {{ $t("socketio.events") }} |
| </label> | | </label> |
| </div> | | </div> |
| <div class="flex px-4"> | | <div class="flex px-4"> |
| <input | | <input |
| id="event_name" | | id="event_name" |
| v-model="communication.eventName" | | v-model="communication.eventName" |
| class="input" | | class="input" |
| name="event_name" | | name="event_name" |
| :placeholder="$t('socketio.event_name')" | | :placeholder="$t('socketio.event_name')" |
| type="text" | | type="text" |
|
| | autocomplete="off" |
| :disabled="!connectionState" | | :disabled="!connectionState" |
| /> | | /> |
| </div> | | </div> |
| <div class="flex flex-1 p-4 items-center justify-between"> | | <div class="flex flex-1 p-4 items-center justify-between"> |
| <label class="font-semibold text-secondaryLight"> | | <label class="font-semibold text-secondaryLight"> |
| {{ $t("socketio.communication") }} | | {{ $t("socketio.communication") }} |
| </label> | | </label> |
| <div class="flex"> | | <div class="flex"> |
| <ButtonSecondary | | <ButtonSecondary |
| v-tippy="{ theme: 'tooltip' }" | | v-tippy="{ theme: 'tooltip' }" |
| :title="$t('add.new')" | | :title="$t('add.new')" |
|
| icon="add" | | svg="plus" |
| class="rounded" | | class="rounded" |
| @click.native="addCommunicationInput" | | @click.native="addCommunicationInput" |
| /> | | /> |
| </div> | | </div> |
| </div> | | </div> |
|
| <div class="flex flex-col space-y-2 px-4"> | | <div class="flex flex-col space-y-2 px-4 pb-4"> |
| <div | | <div |
| v-for="(input, index) of communication.inputs" | | v-for="(input, index) of communication.inputs" |
| :key="`input-${index}`" | | :key="`input-${index}`" |
| > | | > |
| <div class="flex space-x-2"> | | <div class="flex space-x-2"> |
| <input | | <input |
| v-model="communication.inputs[index]" | | v-model="communication.inputs[index]" |
| class="input" | | class="input" |
| name="message" | | name="message" |
| :placeholder="$t('count.message', { count: index + 1 })" | | :placeholder="$t('count.message', { count: index + 1 })" |
| type="text" | | type="text" |
|
| | autocomplete="off" |
| :disabled="!connectionState" | | :disabled="!connectionState" |
| @keyup.enter="connectionState ? sendMessage() : null" | | @keyup.enter="connectionState ? sendMessage() : null" |
| /> | | /> |
| <ButtonSecondary | | <ButtonSecondary |
| v-if="index + 1 !== communication.inputs.length" | | v-if="index + 1 !== communication.inputs.length" |
| v-tippy="{ theme: 'tooltip' }" | | v-tippy="{ theme: 'tooltip' }" |
| :title="$t('action.remove')" | | :title="$t('action.remove')" |
|
| icon="remove_circle_outline" | | svg="trash" |
| class="rounded" | | class="rounded" |
| color="red" | | color="red" |
| outline | | outline |
| @click.native="removeCommunicationInput({ index })" | | @click.native="removeCommunicationInput({ index })" |
| /> | | /> |
| <ButtonPrimary | | <ButtonPrimary |
| v-if="index + 1 === communication.inputs.length" | | v-if="index + 1 === communication.inputs.length" |
| id="send" | | id="send" |
| name="send" | | name="send" |
| :disabled="!connectionState" | | :disabled="!connectionState" |
| | |
| skipping to change at line 159 | | skipping to change at line 212 |
|---|
| </div> | | </div> |
| </AppSection> | | </AppSection> |
| </Pane> | | </Pane> |
| </Splitpanes> | | </Splitpanes> |
| </template> | | </template> |
| | |
| <script> | | <script> |
| import { defineComponent } from "@nuxtjs/composition-api" | | import { defineComponent } from "@nuxtjs/composition-api" |
| import { Splitpanes, Pane } from "splitpanes" | | import { Splitpanes, Pane } from "splitpanes" |
| import "splitpanes/dist/splitpanes.css" | | 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 wildcard from "socketio-wildcard" |
|
| import debounce from "~/helpers/utils/debounce" | | import debounce from "lodash/debounce" |
| import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics" | | import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics" |
| import { useSetting } from "~/newstore/settings" | | import { useSetting } from "~/newstore/settings" |
|
| | import useWindowSize from "~/helpers/utils/useWindowSize" |
| | |
| | const socketIoClients = { |
| | v4: ClientV4, |
| | v3: ClientV3, |
| | v2: ClientV2, |
| | } |
| | |
| export default defineComponent({ | | export default defineComponent({ |
| components: { Splitpanes, Pane }, | | components: { Splitpanes, Pane }, |
| setup() { | | setup() { |
| return { | | return { |
|
| RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"), | | windowInnerWidth: useWindowSize(), |
| | SIDEBAR: useSetting("SIDEBAR"), |
| | COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"), |
| | SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"), |
| | socketIoClients, |
| } | | } |
| }, | | }, |
| data() { | | data() { |
| return { | | return { |
|
| url: "wss://main-daxrc78qyb411dls-gtw.qovery.io", | | // default version is set to v4 |
| | clientVersion: "v4", |
| | url: "wss://hoppscotch-socketio.herokuapp.com", |
| path: "/socket.io", | | path: "/socket.io", |
| isUrlValid: true, | | isUrlValid: true, |
| connectingState: false, | | connectingState: false, |
| connectionState: false, | | connectionState: false, |
| io: null, | | io: null, |
| communication: { | | communication: { |
| log: null, | | log: null, |
| eventName: "", | | eventName: "", |
| inputs: [""], | | inputs: [""], |
| }, | | }, |
| | |
| skipping to change at line 196 | | skipping to change at line 266 |
|---|
| }, | | }, |
| computed: { | | computed: { |
| urlValid() { | | urlValid() { |
| return this.isUrlValid | | return this.isUrlValid |
| }, | | }, |
| }, | | }, |
| watch: { | | watch: { |
| url() { | | url() { |
| this.debouncer() | | this.debouncer() |
| }, | | }, |
|
| | connectionState(connected) { |
| | if (connected) this.$refs.versionOptions.tippy().disable() |
| | else this.$refs.versionOptions.tippy().enable() |
| | }, |
| }, | | }, |
| mounted() { | | mounted() { |
| if (process.browser) { | | if (process.browser) { |
| this.worker = this.$worker.createRejexWorker() | | this.worker = this.$worker.createRejexWorker() |
| this.worker.addEventListener("message", this.workerResponseHandler) | | this.worker.addEventListener("message", this.workerResponseHandler) |
| } | | } |
| }, | | }, |
| destroyed() { | | destroyed() { |
| this.worker.terminate() | | this.worker.terminate() |
| }, | | }, |
| | |
| skipping to change at line 239 | | skipping to change at line 313 |
|---|
| payload: this.$t("state.connecting_to", { name: this.url }), | | payload: this.$t("state.connecting_to", { name: this.url }), |
| source: "info", | | source: "info", |
| color: "var(--accent-color)", | | color: "var(--accent-color)", |
| }, | | }, |
| ] | | ] |
| | |
| try { | | try { |
| if (!this.path) { | | if (!this.path) { |
| this.path = "/socket.io" | | 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 | | // Add ability to listen to all events |
| wildcard(Client.Manager)(this.io) | | wildcard(Client.Manager)(this.io) |
| this.io.on("connect", () => { | | this.io.on("connect", () => { |
| this.connectingState = false | | this.connectingState = false |
| this.connectionState = true | | this.connectionState = true |
| this.communication.log = [ | | this.communication.log = [ |
| { | | { |
| payload: this.$t("state.connected_to", { name: this.url }), | | payload: this.$t("state.connected_to", { name: this.url }), |
| source: "info", | | source: "info", |
| color: "var(--accent-color)", | | color: "var(--accent-color)", |
| | |
| skipping to change at line 351 | | skipping to change at line 424 |
|---|
| }) | | }) |
| | |
| this.communication.log.push({ | | this.communication.log.push({ |
| payload: `[${eventName}] ${JSON.stringify(messages)}`, | | payload: `[${eventName}] ${JSON.stringify(messages)}`, |
| source: "client", | | source: "client", |
| ts: new Date().toLocaleTimeString(), | | ts: new Date().toLocaleTimeString(), |
| }) | | }) |
| this.communication.inputs = [""] | | this.communication.inputs = [""] |
| } | | } |
| }, | | }, |
|
| | onSelectVersion(version) { |
| | this.clientVersion = version |
| | this.$refs.versionOptions.tippy().hide() |
| | }, |
| }, | | }, |
| }) | | }) |
| </script> | | </script> |
| | | |
| End of changes. 20 change blocks. |
|---|
| 16 lines changed or deleted | | 93 lines changed or added |
|---|
"Fossies" - the Fresh Open Source Software Archive 