434 lines
13 KiB
Vue
434 lines
13 KiB
Vue
<template>
|
|
<AppPaneLayout>
|
|
<template #primary>
|
|
<div
|
|
class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
|
|
>
|
|
<div class="inline-flex flex-1 space-x-2">
|
|
<input
|
|
id="websocket-url"
|
|
v-model="url"
|
|
class="w-full px-4 py-2 border rounded bg-primaryLight border-divider text-secondaryDark"
|
|
type="url"
|
|
autocomplete="off"
|
|
spellcheck="false"
|
|
:class="{ error: !urlValid }"
|
|
:placeholder="$t('websocket.url')"
|
|
:disabled="connectionState"
|
|
@keyup.enter="urlValid ? toggleConnection() : null"
|
|
/>
|
|
<ButtonPrimary
|
|
id="connect"
|
|
:disabled="!urlValid"
|
|
class="w-32"
|
|
name="connect"
|
|
:label="
|
|
!connectionState ? $t('action.connect') : $t('action.disconnect')
|
|
"
|
|
:loading="connectingState"
|
|
@click.native="toggleConnection"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperPrimaryStickyFold"
|
|
>
|
|
<label class="font-semibold text-secondaryLight">
|
|
{{ $t("websocket.protocols") }}
|
|
</label>
|
|
<div class="flex">
|
|
<ButtonSecondary
|
|
v-tippy="{ theme: 'tooltip' }"
|
|
:title="$t('action.clear_all')"
|
|
svg="trash-2"
|
|
@click.native="clearContent"
|
|
/>
|
|
<ButtonSecondary
|
|
v-tippy="{ theme: 'tooltip' }"
|
|
:title="$t('add.new')"
|
|
svg="plus"
|
|
@click.native="addProtocol"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<draggable
|
|
v-model="protocols"
|
|
animation="250"
|
|
handle=".draggable-handle"
|
|
draggable=".draggable-content"
|
|
ghost-class="cursor-move"
|
|
chosen-class="bg-primaryLight"
|
|
drag-class="cursor-grabbing"
|
|
>
|
|
<div
|
|
v-for="(protocol, index) of protocols"
|
|
:key="`protocol-${index}`"
|
|
class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
|
|
>
|
|
<span>
|
|
<ButtonSecondary
|
|
svg="grip-vertical"
|
|
class="cursor-auto text-primary hover:text-primary"
|
|
:class="{
|
|
'draggable-handle group-hover:text-secondaryLight !cursor-grab':
|
|
index !== protocols?.length - 1,
|
|
}"
|
|
tabindex="-1"
|
|
/>
|
|
</span>
|
|
<input
|
|
v-model="protocol.value"
|
|
class="flex flex-1 px-4 py-2 bg-transparent"
|
|
:placeholder="$t('count.protocol', { count: index + 1 })"
|
|
name="message"
|
|
type="text"
|
|
autocomplete="off"
|
|
@change="
|
|
updateProtocol(index, {
|
|
value: $event.target.value,
|
|
active: protocol.active,
|
|
})
|
|
"
|
|
/>
|
|
<span>
|
|
<ButtonSecondary
|
|
v-tippy="{ theme: 'tooltip' }"
|
|
:title="
|
|
protocol.hasOwnProperty('active')
|
|
? protocol.active
|
|
? $t('action.turn_off')
|
|
: $t('action.turn_on')
|
|
: $t('action.turn_off')
|
|
"
|
|
:svg="
|
|
protocol.hasOwnProperty('active')
|
|
? protocol.active
|
|
? 'check-circle'
|
|
: 'circle'
|
|
: 'check-circle'
|
|
"
|
|
color="green"
|
|
@click.native="
|
|
updateProtocol(index, {
|
|
value: protocol.value,
|
|
active: !protocol.active,
|
|
})
|
|
"
|
|
/>
|
|
</span>
|
|
<span>
|
|
<ButtonSecondary
|
|
v-tippy="{ theme: 'tooltip' }"
|
|
:title="$t('action.remove')"
|
|
svg="trash"
|
|
color="red"
|
|
@click.native="deleteProtocol({ index })"
|
|
/>
|
|
</span>
|
|
</div>
|
|
</draggable>
|
|
<div
|
|
v-if="protocols.length === 0"
|
|
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
|
|
>
|
|
<img
|
|
:src="`/images/states/${$colorMode.value}/add_category.svg`"
|
|
loading="lazy"
|
|
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
|
|
:alt="$t('empty.protocols')"
|
|
/>
|
|
<span class="mb-4 text-center">
|
|
{{ $t("empty.protocols") }}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
<template #secondary>
|
|
<RealtimeLog :title="$t('websocket.log')" :log="log" />
|
|
</template>
|
|
<template #sidebar>
|
|
<div class="flex items-center justify-between p-4">
|
|
<label
|
|
for="websocket-message"
|
|
class="font-semibold text-secondaryLight"
|
|
>
|
|
{{ $t("websocket.communication") }}
|
|
</label>
|
|
</div>
|
|
<div class="flex px-4 space-x-2">
|
|
<input
|
|
id="websocket-message"
|
|
v-model="communication.input"
|
|
name="message"
|
|
type="text"
|
|
autocomplete="off"
|
|
:disabled="!connectionState"
|
|
:placeholder="$t('websocket.message')"
|
|
class="input"
|
|
@keyup.enter="connectionState ? sendMessage() : null"
|
|
@keyup.up="connectionState ? walkHistory('up') : null"
|
|
@keyup.down="connectionState ? walkHistory('down') : null"
|
|
/>
|
|
<ButtonPrimary
|
|
id="send"
|
|
name="send"
|
|
:disabled="!connectionState"
|
|
:label="$t('action.send')"
|
|
@click.native="sendMessage"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</AppPaneLayout>
|
|
</template>
|
|
|
|
<script>
|
|
import { defineComponent } from "@nuxtjs/composition-api"
|
|
import debounce from "lodash/debounce"
|
|
import draggable from "vuedraggable"
|
|
import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
|
|
import {
|
|
setWSEndpoint,
|
|
WSEndpoint$,
|
|
WSProtocols$,
|
|
setWSProtocols,
|
|
addWSProtocol,
|
|
deleteWSProtocol,
|
|
updateWSProtocol,
|
|
deleteAllWSProtocols,
|
|
WSSocket$,
|
|
setWSSocket,
|
|
setWSConnectionState,
|
|
setWSConnectingState,
|
|
WSConnectionState$,
|
|
WSConnectingState$,
|
|
addWSLogLine,
|
|
WSLog$,
|
|
setWSLog,
|
|
} from "~/newstore/WebSocketSession"
|
|
import { useStream } from "~/helpers/utils/composables"
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
draggable,
|
|
},
|
|
setup() {
|
|
return {
|
|
url: useStream(WSEndpoint$, "", setWSEndpoint),
|
|
protocols: useStream(WSProtocols$, [], setWSProtocols),
|
|
connectionState: useStream(
|
|
WSConnectionState$,
|
|
false,
|
|
setWSConnectionState
|
|
),
|
|
connectingState: useStream(
|
|
WSConnectingState$,
|
|
false,
|
|
setWSConnectingState
|
|
),
|
|
socket: useStream(WSSocket$, null, setWSSocket),
|
|
log: useStream(WSLog$, [], setWSLog),
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
isUrlValid: true,
|
|
communication: {
|
|
input: "",
|
|
},
|
|
currentIndex: -1, // index of the message log array to put in input box
|
|
activeProtocols: [],
|
|
}
|
|
},
|
|
computed: {
|
|
urlValid() {
|
|
return this.isUrlValid
|
|
},
|
|
},
|
|
watch: {
|
|
url() {
|
|
this.debouncer()
|
|
},
|
|
protocols: {
|
|
handler(newVal) {
|
|
this.activeProtocols = newVal
|
|
.filter((item) =>
|
|
Object.prototype.hasOwnProperty.call(item, "active")
|
|
? item.active === true
|
|
: true
|
|
)
|
|
.map(({ value }) => value)
|
|
},
|
|
deep: true,
|
|
},
|
|
},
|
|
created() {
|
|
if (process.browser) {
|
|
this.worker = this.$worker.createRejexWorker()
|
|
this.worker.addEventListener("message", this.workerResponseHandler)
|
|
}
|
|
},
|
|
destroyed() {
|
|
this.worker.terminate()
|
|
},
|
|
methods: {
|
|
clearContent() {
|
|
deleteAllWSProtocols()
|
|
},
|
|
debouncer: debounce(function () {
|
|
this.worker.postMessage({ type: "ws", url: this.url })
|
|
}, 1000),
|
|
workerResponseHandler({ data }) {
|
|
if (data.url === this.url) this.isUrlValid = data.result
|
|
},
|
|
toggleConnection() {
|
|
// If it is connecting:
|
|
if (!this.connectionState) return this.connect()
|
|
// Otherwise, it's disconnecting.
|
|
else return this.disconnect()
|
|
},
|
|
connect() {
|
|
this.log = [
|
|
{
|
|
payload: this.$t("state.connecting_to", { name: this.url }),
|
|
source: "info",
|
|
color: "var(--accent-color)",
|
|
},
|
|
]
|
|
try {
|
|
this.connectingState = true
|
|
this.socket = new WebSocket(this.url, this.activeProtocols)
|
|
this.socket.onopen = () => {
|
|
this.connectingState = false
|
|
this.connectionState = true
|
|
this.log = [
|
|
{
|
|
payload: this.$t("state.connected_to", { name: this.url }),
|
|
source: "info",
|
|
color: "var(--accent-color)",
|
|
ts: new Date().toLocaleTimeString(),
|
|
},
|
|
]
|
|
this.$toast.success(this.$t("state.connected"))
|
|
}
|
|
this.socket.onerror = () => {
|
|
this.handleError()
|
|
}
|
|
this.socket.onclose = () => {
|
|
this.connectionState = false
|
|
addWSLogLine({
|
|
payload: this.$t("state.disconnected_from", { name: this.url }),
|
|
source: "info",
|
|
color: "#ff5555",
|
|
ts: new Date().toLocaleTimeString(),
|
|
})
|
|
this.$toast.error(this.$t("state.disconnected"))
|
|
}
|
|
this.socket.onmessage = ({ data }) => {
|
|
addWSLogLine({
|
|
payload: data,
|
|
source: "server",
|
|
ts: new Date().toLocaleTimeString(),
|
|
})
|
|
}
|
|
} catch (e) {
|
|
this.handleError(e)
|
|
this.$toast.error(this.$t("error.something_went_wrong"))
|
|
}
|
|
|
|
logHoppRequestRunToAnalytics({
|
|
platform: "wss",
|
|
})
|
|
},
|
|
disconnect() {
|
|
if (this.socket) {
|
|
this.socket.close()
|
|
this.connectionState = false
|
|
this.connectingState = false
|
|
}
|
|
},
|
|
handleError(error) {
|
|
this.disconnect()
|
|
this.connectionState = false
|
|
addWSLogLine({
|
|
payload: this.$t("error.something_went_wrong"),
|
|
source: "info",
|
|
color: "#ff5555",
|
|
ts: new Date().toLocaleTimeString(),
|
|
})
|
|
if (error !== null)
|
|
addWSLogLine({
|
|
payload: error,
|
|
source: "info",
|
|
color: "#ff5555",
|
|
ts: new Date().toLocaleTimeString(),
|
|
})
|
|
},
|
|
sendMessage() {
|
|
const message = this.communication.input
|
|
this.socket.send(message)
|
|
addWSLogLine({
|
|
payload: message,
|
|
source: "client",
|
|
ts: new Date().toLocaleTimeString(),
|
|
})
|
|
this.communication.input = ""
|
|
},
|
|
walkHistory(direction) {
|
|
const clientMessages = this.log.filter(
|
|
({ source }) => source === "client"
|
|
)
|
|
const length = clientMessages.length
|
|
switch (direction) {
|
|
case "up":
|
|
if (length > 0 && this.currentIndex !== 0) {
|
|
// does nothing if message log is empty or the currentIndex is 0 when up arrow is pressed
|
|
if (this.currentIndex === -1) {
|
|
this.currentIndex = length - 1
|
|
this.communication.input =
|
|
clientMessages[this.currentIndex].payload
|
|
} else if (this.currentIndex === 0) {
|
|
this.communication.input = clientMessages[0].payload
|
|
} else if (this.currentIndex > 0) {
|
|
this.currentIndex = this.currentIndex - 1
|
|
this.communication.input =
|
|
clientMessages[this.currentIndex].payload
|
|
}
|
|
}
|
|
break
|
|
case "down":
|
|
if (length > 0 && this.currentIndex > -1) {
|
|
if (this.currentIndex === length - 1) {
|
|
this.currentIndex = -1
|
|
this.communication.input = ""
|
|
} else if (this.currentIndex < length - 1) {
|
|
this.currentIndex = this.currentIndex + 1
|
|
this.communication.input =
|
|
clientMessages[this.currentIndex].payload
|
|
}
|
|
}
|
|
break
|
|
}
|
|
},
|
|
addProtocol() {
|
|
addWSProtocol({ value: "", active: true })
|
|
},
|
|
deleteProtocol({ index }) {
|
|
const oldProtocols = this.protocols.slice()
|
|
deleteWSProtocol(index)
|
|
this.$toast.success(this.$t("state.deleted"), {
|
|
action: {
|
|
text: this.$t("action.undo"),
|
|
duration: 4000,
|
|
onClick: (_, toastObject) => {
|
|
this.protocols = oldProtocols
|
|
toastObject.remove()
|
|
},
|
|
},
|
|
})
|
|
},
|
|
updateProtocol(index, updated) {
|
|
updateWSProtocol(index, updated)
|
|
},
|
|
},
|
|
})
|
|
</script>
|