Add Socketio support
and modify some websocket and sse code to pick up common function and component
This commit is contained in:
moonrailgun
58
components/realtime/log.vue
Normal file
58
components/realtime/log.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<div>
|
||||
<label for="log">{{ title }}</label>
|
||||
<div name="log" class="realtime-log" ref="log">
|
||||
<span v-if="log">
|
||||
<span v-for="(logEntry, index) in log" :style="{ color: logEntry.color }" :key="index"
|
||||
>@ {{ logEntry.ts }}{{ getSourcePrefix(logEntry.source) }}{{ logEntry.payload }}</span
|
||||
>
|
||||
</span>
|
||||
<span v-else>{{ $t("waiting_for_connection") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
div.realtime-log {
|
||||
margin: 4px;
|
||||
padding: 8px 16px;
|
||||
width: calc(100% - 8px);
|
||||
border-radius: 8px;
|
||||
background-color: var(--bg-dark-color);
|
||||
color: var(--fg-color);
|
||||
height: 256px;
|
||||
overflow: auto;
|
||||
|
||||
&,
|
||||
span {
|
||||
font-size: 16px;
|
||||
font-family: "Roboto Mono", monospace;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { getSourcePrefix } from "~/functions/utils/string"
|
||||
|
||||
export default {
|
||||
props: ["log", "title"],
|
||||
methods: {
|
||||
getSourcePrefix,
|
||||
},
|
||||
updated: function() {
|
||||
this.$nextTick(function() {
|
||||
if (this.$refs.log) {
|
||||
this.$refs.log.scrollBy(0, this.$refs.log.scrollHeight + 100)
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
216
components/realtime/socketio.vue
Normal file
216
components/realtime/socketio.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div>
|
||||
<pw-section class="blue" :label="$t('request')" ref="request">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="url">{{ $t("url") }}</label>
|
||||
<input
|
||||
id="url"
|
||||
type="url"
|
||||
spellcheck="false"
|
||||
:class="{ error: !urlValid }"
|
||||
v-model="url"
|
||||
@keyup.enter="urlValid ? toggleConnection() : null"
|
||||
/>
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<label for="connect" class="hide-on-small-screen"> </label>
|
||||
<button :disabled="!urlValid" id="connect" name="connect" @click="toggleConnection">
|
||||
{{ !connectionState ? $t("connect") : $t("disconnect") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionState ? "sync" : "sync_disabled" }}
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</pw-section>
|
||||
|
||||
<pw-section class="purple" :label="$t('communication')" id="response" ref="response">
|
||||
<ul>
|
||||
<li>
|
||||
<realtime-log :log="communication.log" />
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="event_name">{{ $t("event_name") }}</label>
|
||||
<input
|
||||
name="event_name"
|
||||
type="text"
|
||||
v-model="communication.eventName"
|
||||
:readonly="!connectionState"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="message">{{ $t("message") }}</label>
|
||||
<input
|
||||
name="message"
|
||||
type="text"
|
||||
v-model="communication.input"
|
||||
:readonly="!connectionState"
|
||||
@keyup.enter="connectionState ? sendMessage() : null"
|
||||
/>
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<label for="send" class="hide-on-small-screen"> </label>
|
||||
<button id="send" name="send" :disabled="!connectionState" @click="sendMessage">
|
||||
{{ $t("send") }}
|
||||
<span>
|
||||
<i class="material-icons">send</i>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</pw-section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { wsValid } from "~/functions/utils/valid"
|
||||
import io from "socket.io-client"
|
||||
import realtimeLog from "./log"
|
||||
|
||||
export default {
|
||||
components: {
|
||||
"pw-section": () => import("../../components/layout/section"),
|
||||
realtimeLog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
url: "wss://echo.websocket.org",
|
||||
connectionState: false,
|
||||
io: null,
|
||||
communication: {
|
||||
log: null,
|
||||
eventName: "",
|
||||
input: "",
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
urlValid() {
|
||||
return wsValid(this.url)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toggleConnection() {
|
||||
// If it is connecting:
|
||||
if (!this.connectionState) return this.connect()
|
||||
// Otherwise, it's disconnecting.
|
||||
else return this.disconnect()
|
||||
},
|
||||
connect() {
|
||||
this.communication.log = [
|
||||
{
|
||||
payload: this.$t("connecting_to", { name: this.url }),
|
||||
source: "info",
|
||||
color: "var(--ac-color)",
|
||||
},
|
||||
]
|
||||
|
||||
try {
|
||||
this.io = new io(this.url)
|
||||
this.io.on("connect", () => {
|
||||
this.connectionState = true
|
||||
this.communication.log = [
|
||||
{
|
||||
payload: this.$t("connected_to", { name: this.url }),
|
||||
source: "info",
|
||||
color: "var(--ac-color)",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
},
|
||||
]
|
||||
this.$toast.success(this.$t("connected"), {
|
||||
icon: "sync",
|
||||
})
|
||||
})
|
||||
this.io.on("message", data => {
|
||||
this.communication.log.push({
|
||||
payload: data,
|
||||
source: "server",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
})
|
||||
this.io.on("connect_error", error => {
|
||||
this.handleError(error)
|
||||
})
|
||||
this.io.on("reconnect_error", error => {
|
||||
this.handleError(error)
|
||||
})
|
||||
this.io.on("error", data => {
|
||||
this.handleError()
|
||||
})
|
||||
this.io.on("disconnect", () => {
|
||||
this.connectionState = false
|
||||
this.communication.log.push({
|
||||
payload: this.$t("disconnected_from", { name: this.url }),
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
this.$toast.error(this.$t("disconnected"), {
|
||||
icon: "sync_disabled",
|
||||
})
|
||||
})
|
||||
} catch (ex) {
|
||||
this.handleError(ex)
|
||||
this.$toast.error(this.$t("something_went_wrong"), {
|
||||
icon: "error",
|
||||
})
|
||||
}
|
||||
},
|
||||
disconnect() {
|
||||
this.io.close()
|
||||
},
|
||||
handleError(error) {
|
||||
this.disconnect()
|
||||
this.connectionState = false
|
||||
this.communication.log.push({
|
||||
payload: this.$t("error_occurred"),
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
if (error !== null)
|
||||
this.communication.log.push({
|
||||
payload: error,
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
},
|
||||
sendMessage() {
|
||||
const eventName = this.communication.eventName
|
||||
const message = this.communication.input
|
||||
|
||||
if (this.io) {
|
||||
// TODO: support only one argument now
|
||||
// maybe should support more argument
|
||||
this.io.emit(eventName, message, data => {
|
||||
// receive response from server
|
||||
this.communication.log.push({
|
||||
payload: `[${eventName}] ${JSON.stringify(data)}`,
|
||||
source: "server",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
})
|
||||
|
||||
this.communication.log.push({
|
||||
payload: `[${eventName}] ${message}`,
|
||||
source: "client",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
this.communication.input = ""
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user