"Fossies" - the Fresh Open Source Software Archive  

Source code changes of the file "components/realtime/Socketio.vue" between
hoppscotch-2.0.0.tar.gz and hoppscotch-2.1.0.tar.gz

About: Hoppscotch 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

Home  |  About  |  Features  |  All  |  Newest  |  Dox  |  Diffs  |  RSS Feeds  |  Screenshots  |  Comments  |  Imprint  |  Privacy  |  HTTP(S)