464 lines
14 KiB
Vue
464 lines
14 KiB
Vue
<template>
|
|
<AppPaneLayout layout-id="socketio">
|
|
<template #primary>
|
|
<div
|
|
class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto bg-primary"
|
|
>
|
|
<div class="inline-flex flex-1 space-x-2">
|
|
<div class="flex flex-1">
|
|
<label for="client-version">
|
|
<tippy
|
|
interactive
|
|
trigger="click"
|
|
theme="popover"
|
|
:on-shown="() => tippyActions.focus()"
|
|
>
|
|
<span class="select-wrapper">
|
|
<input
|
|
id="client-version"
|
|
v-tippy="{ theme: 'tooltip' }"
|
|
title="socket.io-client version"
|
|
class="flex px-4 py-2 font-semibold border rounded-l cursor-pointer bg-primaryLight border-divider text-secondaryDark w-26"
|
|
:value="`Client ${clientVersion}`"
|
|
readonly
|
|
:disabled="
|
|
connectionState === 'CONNECTED' ||
|
|
connectionState === 'CONNECTING'
|
|
"
|
|
/>
|
|
</span>
|
|
<template #content="{ hide }">
|
|
<div
|
|
ref="tippyActions"
|
|
class="flex flex-col focus:outline-none"
|
|
tabindex="0"
|
|
@keyup.escape="hide()"
|
|
>
|
|
<HoppSmartItem
|
|
v-for="version in SIOVersions"
|
|
:key="`client-${version}`"
|
|
:label="`Client ${version}`"
|
|
@click="
|
|
() => {
|
|
onSelectVersion(version as SIOClientVersion)
|
|
hide()
|
|
}
|
|
"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</tippy>
|
|
</label>
|
|
<input
|
|
id="socketio-url"
|
|
v-model="url"
|
|
type="url"
|
|
autocomplete="off"
|
|
spellcheck="false"
|
|
:class="{ error: !isUrlValid }"
|
|
class="flex flex-1 w-full px-4 py-2 border bg-primaryLight border-divider text-secondaryDark"
|
|
:placeholder="`${t('socketio.url')}`"
|
|
:disabled="
|
|
connectionState === 'CONNECTED' ||
|
|
connectionState === 'CONNECTING'
|
|
"
|
|
@keyup.enter="isUrlValid ? toggleConnection() : null"
|
|
/>
|
|
<input
|
|
id="socketio-path"
|
|
v-model="path"
|
|
class="flex flex-1 w-full px-4 py-2 border rounded-r bg-primaryLight border-divider text-secondaryDark"
|
|
spellcheck="false"
|
|
:disabled="
|
|
connectionState === 'CONNECTED' ||
|
|
connectionState === 'CONNECTING'
|
|
"
|
|
@keyup.enter="isUrlValid ? toggleConnection() : null"
|
|
/>
|
|
</div>
|
|
<HoppButtonPrimary
|
|
id="connect"
|
|
:disabled="!isUrlValid"
|
|
name="connect"
|
|
class="w-32"
|
|
:label="
|
|
connectionState === 'CONNECTING'
|
|
? t('action.connecting')
|
|
: connectionState === 'DISCONNECTED'
|
|
? t('action.connect')
|
|
: t('action.disconnect')
|
|
"
|
|
:loading="connectionState === 'CONNECTING'"
|
|
@click="toggleConnection"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<HoppSmartTabs
|
|
v-model="selectedTab"
|
|
styles="sticky overflow-x-auto flex-shrink-0 bg-primary top-upperPrimaryStickyFold z-10"
|
|
render-inactive-tabs
|
|
>
|
|
<HoppSmartTab
|
|
:id="'communication'"
|
|
:label="`${t('websocket.communication')}`"
|
|
render-inactive-tabs
|
|
>
|
|
<RealtimeCommunication
|
|
:show-event-field="true"
|
|
:is-connected="connectionState === 'CONNECTED'"
|
|
event-field-styles="top-upperSecondaryStickyFold"
|
|
sticky-header-styles="top-upperTertiaryStickyFold"
|
|
@send-message="sendMessage($event)"
|
|
/>
|
|
</HoppSmartTab>
|
|
<HoppSmartTab
|
|
:id="'protocols'"
|
|
:label="`${t('request.authorization')}`"
|
|
>
|
|
<div
|
|
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
|
|
>
|
|
<span class="flex items-center">
|
|
<label class="font-semibold truncate text-secondaryLight">
|
|
{{ t("authorization.type") }}
|
|
</label>
|
|
<tippy
|
|
interactive
|
|
trigger="click"
|
|
theme="popover"
|
|
:on-shown="() => authTippyActions.focus()"
|
|
>
|
|
<span class="select-wrapper">
|
|
<HoppButtonSecondary
|
|
class="pr-8 ml-2 rounded-none"
|
|
:label="authType"
|
|
/>
|
|
</span>
|
|
<template #content="{ hide }">
|
|
<div
|
|
ref="authTippyActions"
|
|
class="flex flex-col focus:outline-none"
|
|
tabindex="0"
|
|
@keyup.escape="hide()"
|
|
>
|
|
<HoppSmartItem
|
|
label="None"
|
|
:icon="authType === 'None' ? IconCircleDot : IconCircle"
|
|
:active="authType === 'None'"
|
|
@click="
|
|
() => {
|
|
authType = 'None'
|
|
hide()
|
|
}
|
|
"
|
|
/>
|
|
<HoppSmartItem
|
|
label="Bearer Token"
|
|
:icon="authType === 'Bearer' ? IconCircleDot : IconCircle"
|
|
:active="authType === 'Bearer'"
|
|
@click="
|
|
() => {
|
|
authType = 'Bearer'
|
|
hide()
|
|
}
|
|
"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</tippy>
|
|
</span>
|
|
<div class="flex">
|
|
<HoppSmartCheckbox
|
|
:on="authActive"
|
|
class="px-2"
|
|
@change="authActive = !authActive"
|
|
>
|
|
{{ t("state.enabled") }}
|
|
</HoppSmartCheckbox>
|
|
<HoppButtonSecondary
|
|
v-tippy="{ theme: 'tooltip' }"
|
|
to="https://docs.hoppscotch.io/documentation/features/authorization"
|
|
blank
|
|
:title="t('app.wiki')"
|
|
:icon="IconHelpCircle"
|
|
/>
|
|
<HoppButtonSecondary
|
|
v-tippy="{ theme: 'tooltip' }"
|
|
:title="t('action.clear')"
|
|
:icon="IconTrash2"
|
|
@click="clearContent"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="authType === 'None'"
|
|
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
|
|
>
|
|
<img
|
|
:src="`/images/states/${colorMode.value}/login.svg`"
|
|
loading="lazy"
|
|
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
|
|
:alt="`${t('empty.authorization')}`"
|
|
/>
|
|
<span class="pb-4 text-center">
|
|
{{ t("socketio.connection_not_authorized") }}
|
|
</span>
|
|
<HoppButtonSecondary
|
|
outline
|
|
:label="t('app.documentation')"
|
|
to="https://docs.hoppscotch.io/documentation/features/authorization"
|
|
blank
|
|
:icon="IconExternalLink"
|
|
reverse
|
|
class="mb-4"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-if="authType === 'Bearer'"
|
|
class="flex flex-1 border-b border-dividerLight"
|
|
>
|
|
<div class="w-2/3 border-r border-dividerLight">
|
|
<div class="flex flex-1 border-b border-dividerLight">
|
|
<SmartEnvInput v-model="bearerToken" placeholder="Token" />
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="sticky flex-shrink-0 h-full p-4 overflow-auto overflow-x-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
|
|
>
|
|
<div class="p-2">
|
|
<div class="pb-2 text-secondaryLight">
|
|
{{ t("helpers.authorization") }}
|
|
</div>
|
|
<HoppSmartAnchor
|
|
class="link"
|
|
:label="t('authorization.learn')"
|
|
:icon="IconExternalLink"
|
|
to="https://docs.hoppscotch.io/documentation/features/authorization"
|
|
blank
|
|
reverse
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</HoppSmartTab>
|
|
</HoppSmartTabs>
|
|
</template>
|
|
<template #secondary>
|
|
<RealtimeLog
|
|
:title="t('socketio.log')"
|
|
:log="(log as LogEntryData[])"
|
|
@delete="clearLogEntries()"
|
|
/>
|
|
</template>
|
|
</AppPaneLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, onUnmounted, ref, watch } from "vue"
|
|
|
|
import IconCircleDot from "~icons/lucide/circle-dot"
|
|
import IconCircle from "~icons/lucide/circle"
|
|
import IconHelpCircle from "~icons/lucide/help-circle"
|
|
import IconTrash2 from "~icons/lucide/trash-2"
|
|
import IconExternalLink from "~icons/lucide/external-link"
|
|
|
|
import { debounce } from "lodash-es"
|
|
import {
|
|
SIOConnection,
|
|
SIOError,
|
|
SIOMessage,
|
|
SOCKET_CLIENTS,
|
|
} from "~/helpers/realtime/SIOConnection"
|
|
import { useI18n } from "@composables/i18n"
|
|
import { useToast } from "@composables/toast"
|
|
import {
|
|
useReadonlyStream,
|
|
useStream,
|
|
useStreamSubscriber,
|
|
} from "@composables/stream"
|
|
import {
|
|
addSIOLogLine,
|
|
setSIOEndpoint,
|
|
setSIOLog,
|
|
setSIOPath,
|
|
setSIOVersion,
|
|
SIOClientVersion,
|
|
SIOEndpoint$,
|
|
SIOLog$,
|
|
SIOPath$,
|
|
SIOVersion$,
|
|
} from "~/newstore/SocketIOSession"
|
|
import { useColorMode } from "@composables/theming"
|
|
import RegexWorker from "@workers/regex?worker"
|
|
import { LogEntryData } from "~/components/realtime/Log.vue"
|
|
|
|
const t = useI18n()
|
|
const colorMode = useColorMode()
|
|
const toast = useToast()
|
|
const { subscribeToStream } = useStreamSubscriber()
|
|
|
|
type SIOTab = "communication" | "protocols"
|
|
const selectedTab = ref<SIOTab>("communication")
|
|
|
|
const SIOVersions = Object.keys(SOCKET_CLIENTS)
|
|
const url = useStream(SIOEndpoint$, "", setSIOEndpoint)
|
|
const clientVersion = useStream(SIOVersion$, "v4", setSIOVersion)
|
|
const path = useStream(SIOPath$, "", setSIOPath)
|
|
const socket = new SIOConnection()
|
|
const connectionState = useReadonlyStream(
|
|
socket.connectionState$,
|
|
"DISCONNECTED"
|
|
)
|
|
const log = useStream(SIOLog$, [], setSIOLog)
|
|
|
|
// Template refs
|
|
const tippyActions = ref<any | null>(null)
|
|
const authTippyActions = ref<any | null>(null)
|
|
const isUrlValid = ref(true)
|
|
const authType = ref<"None" | "Bearer">("None")
|
|
const bearerToken = ref("")
|
|
const authActive = ref(true)
|
|
|
|
let worker: Worker
|
|
|
|
const workerResponseHandler = ({
|
|
data,
|
|
}: {
|
|
data: { url: string; result: boolean }
|
|
}) => {
|
|
if (data.url === url.value) isUrlValid.value = data.result
|
|
}
|
|
|
|
const getMessagePayload = (data: SIOMessage): string =>
|
|
typeof data.value === "object" ? JSON.stringify(data.value) : `${data.value}`
|
|
|
|
const getErrorPayload = (error: SIOError): string => {
|
|
switch (error.type) {
|
|
case "CONNECTION":
|
|
return t("state.connection_error").toString()
|
|
case "RECONNECT_ERROR":
|
|
return t("state.reconnection_error").toString()
|
|
default:
|
|
return t("state.disconnected_from", { name: url.value }).toString()
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
worker = new RegexWorker()
|
|
worker.addEventListener("message", workerResponseHandler)
|
|
|
|
subscribeToStream(socket.event$, (event) => {
|
|
switch (event?.type) {
|
|
case "CONNECTING":
|
|
log.value = [
|
|
{
|
|
payload: `${t("state.connecting_to", { name: url.value })}`,
|
|
source: "info",
|
|
color: "var(--accent-color)",
|
|
ts: undefined,
|
|
},
|
|
]
|
|
break
|
|
|
|
case "CONNECTED":
|
|
log.value = [
|
|
{
|
|
payload: `${t("state.connected_to", { name: url.value })}`,
|
|
source: "info",
|
|
color: "var(--accent-color)",
|
|
ts: event.time,
|
|
},
|
|
]
|
|
toast.success(`${t("state.connected")}`)
|
|
break
|
|
|
|
case "MESSAGE_SENT":
|
|
addSIOLogLine({
|
|
prefix: `[${event.message.eventName}]`,
|
|
payload: getMessagePayload(event.message),
|
|
source: "client",
|
|
ts: event.time,
|
|
})
|
|
break
|
|
|
|
case "MESSAGE_RECEIVED":
|
|
addSIOLogLine({
|
|
prefix: `[${event.message.eventName}]`,
|
|
payload: getMessagePayload(event.message),
|
|
source: "server",
|
|
ts: event.time,
|
|
})
|
|
break
|
|
|
|
case "ERROR":
|
|
addSIOLogLine({
|
|
payload: getErrorPayload(event.error),
|
|
source: "info",
|
|
color: "#ff5555",
|
|
ts: event.time,
|
|
})
|
|
break
|
|
|
|
case "DISCONNECTED":
|
|
addSIOLogLine({
|
|
payload: t("state.disconnected_from", { name: url.value }).toString(),
|
|
source: "disconnected",
|
|
color: "#ff5555",
|
|
ts: event.time,
|
|
})
|
|
toast.error(`${t("state.disconnected")}`)
|
|
break
|
|
}
|
|
})
|
|
})
|
|
|
|
watch(url, (newUrl) => {
|
|
if (newUrl) debouncer()
|
|
})
|
|
|
|
// TODO: How important is this ?
|
|
// watch(connectionState, (connected) => {
|
|
// if (connected) versionOptions.value.tippy().disable()
|
|
// else versionOptions.value.tippy().enable()
|
|
// })
|
|
|
|
onUnmounted(() => {
|
|
worker.terminate()
|
|
})
|
|
|
|
const debouncer = debounce(function () {
|
|
worker.postMessage({ type: "socketio", url: url.value })
|
|
}, 1000)
|
|
|
|
const toggleConnection = () => {
|
|
// If it is connecting:
|
|
if (connectionState.value === "DISCONNECTED") {
|
|
return socket.connect({
|
|
url: url.value,
|
|
path: path.value || "/socket.io",
|
|
clientVersion: clientVersion.value,
|
|
auth: authActive.value
|
|
? {
|
|
type: authType.value,
|
|
token: bearerToken.value,
|
|
}
|
|
: undefined,
|
|
})
|
|
}
|
|
// Otherwise, it's disconnecting.
|
|
socket.disconnect()
|
|
}
|
|
const sendMessage = (event: { message: string; eventName: string }) => {
|
|
socket.sendMessage(event)
|
|
}
|
|
const onSelectVersion = (version: SIOClientVersion) => {
|
|
clientVersion.value = version
|
|
}
|
|
const clearLogEntries = () => {
|
|
log.value = []
|
|
}
|
|
const clearContent = () => {
|
|
// TODO: Implementation ?
|
|
}
|
|
</script>
|