Merge remote-tracking branch 'upstream/master'
Synced fork
This commit is contained in:
Rahul
@@ -3,12 +3,12 @@
|
||||
<pw-section class="blue" :label="$t('request')">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="url">{{ $t("url") }}</label>
|
||||
<input id="url" type="url" v-model="url" spellcheck="false" />
|
||||
<label for="mqtt-url">{{ $t("url") }}</label>
|
||||
<input id="mqtt-url" type="url" v-model="url" spellcheck="false" />
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<label for="connect"> </label>
|
||||
<label for="connect" class="hide-on-small-screen"> </label>
|
||||
<button id="connect" :disabled="!validUrl" @click="toggleConnection">
|
||||
{{ this.connectionState ? $t("disconnect") : $t("connect") }}
|
||||
<span>
|
||||
@@ -19,10 +19,11 @@
|
||||
</div>
|
||||
</ul>
|
||||
</pw-section>
|
||||
|
||||
<pw-section class="blue" :label="$t('communication')">
|
||||
<ul>
|
||||
<li>
|
||||
<realtimeLog :log="this.log" />
|
||||
<realtime-log :title="$t('log')" :log="this.log" />
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
@@ -31,12 +32,12 @@
|
||||
<input id="pub_topic" type="text" v-model="pub_topic" spellcheck="false" />
|
||||
</li>
|
||||
<li>
|
||||
<label for="message">{{ $t("message") }}</label>
|
||||
<input id="message" type="text" v-model="msg" spellcheck="false" />
|
||||
<label for="mqtt-message">{{ $t("message") }}</label>
|
||||
<input id="mqtt-message" type="text" v-model="msg" spellcheck="false" />
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<label for="publish"> </label>
|
||||
<label for="publish" class="hide-on-small-screen"> </label>
|
||||
<button id="publish" name="get" :disabled="!canpublish" @click="publish">
|
||||
{{ $t("mqtt_publish") }}
|
||||
<span>
|
||||
@@ -53,7 +54,7 @@
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<label for="subscribe"> </label>
|
||||
<label for="subscribe" class="hide-on-small-screen"> </label>
|
||||
<button id="subscribe" name="get" :disabled="!cansubscribe" @click="toggleSubscription">
|
||||
{{ subscriptionState ? $t("mqtt_unsubscribe") : $t("mqtt_subscribe") }}
|
||||
<span>
|
||||
@@ -66,19 +67,19 @@
|
||||
</pw-section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import realtimeLog from "./log"
|
||||
import Paho from "paho-mqtt"
|
||||
import { wsValid } from "~/functions/utils/valid"
|
||||
|
||||
export default {
|
||||
name: "mqtt",
|
||||
components: {
|
||||
"pw-section": () => import("../../components/layout/section"),
|
||||
realtimeLog,
|
||||
realtimeLog: () => import("./log"),
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
url: "wss://",
|
||||
url: "wss://test.mosquitto.org:8081",
|
||||
client: null,
|
||||
pub_topic: "",
|
||||
sub_topic: "",
|
||||
|
||||
@@ -3,9 +3,9 @@
|
||||
<pw-section class="blue" :label="$t('request')" ref="request">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="url">{{ $t("url") }}</label>
|
||||
<label for="socketio-url">{{ $t("url") }}</label>
|
||||
<input
|
||||
id="url"
|
||||
id="socketio-url"
|
||||
type="url"
|
||||
spellcheck="false"
|
||||
:class="{ error: !urlValid }"
|
||||
@@ -32,13 +32,14 @@
|
||||
<pw-section class="purple" :label="$t('communication')" id="response" ref="response">
|
||||
<ul>
|
||||
<li>
|
||||
<realtime-log :log="communication.log" />
|
||||
<realtime-log :title="$t('log')" :log="communication.log" />
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="event_name">{{ $t("event_name") }}</label>
|
||||
<input
|
||||
id="event_name"
|
||||
name="event_name"
|
||||
type="text"
|
||||
v-model="communication.eventName"
|
||||
@@ -48,8 +49,9 @@
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="message">{{ $t("message") }}</label>
|
||||
<label for="socketio-message">{{ $t("message") }}</label>
|
||||
<input
|
||||
id="socketio-message"
|
||||
name="message"
|
||||
type="text"
|
||||
v-model="communication.input"
|
||||
@@ -76,12 +78,11 @@
|
||||
<script>
|
||||
import { socketioValid } from "~/functions/utils/valid"
|
||||
import io from "socket.io-client"
|
||||
import realtimeLog from "./log"
|
||||
|
||||
export default {
|
||||
components: {
|
||||
"pw-section": () => import("../../components/layout/section"),
|
||||
realtimeLog,
|
||||
realtimeLog: () => import("./log"),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
160
components/realtime/sse.vue
Normal file
160
components/realtime/sse.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<pw-section class="blue" :label="$t('request')" ref="request">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="server">{{ $t("server") }}</label>
|
||||
<input
|
||||
id="server"
|
||||
type="url"
|
||||
:class="{ error: !serverValid }"
|
||||
v-model="server"
|
||||
@keyup.enter="serverValid ? toggleSSEConnection() : null"
|
||||
/>
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<label for="start" class="hide-on-small-screen"> </label>
|
||||
<button :disabled="!serverValid" id="start" name="start" @click="toggleSSEConnection">
|
||||
{{ !connectionSSEState ? $t("start") : $t("stop") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionSSEState ? "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 :title="$t('events')" :log="events.log" />
|
||||
<div id="result"></div>
|
||||
</li>
|
||||
</ul>
|
||||
</pw-section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { sseValid } from "~/functions/utils/valid"
|
||||
|
||||
export default {
|
||||
components: {
|
||||
"pw-section": () => import("../layout/section"),
|
||||
realtimeLog: () => import("./log"),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
connectionSSEState: false,
|
||||
server: "https://express-eventsource.herokuapp.com/events",
|
||||
sse: null,
|
||||
events: {
|
||||
log: null,
|
||||
input: "",
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
serverValid() {
|
||||
return sseValid(this.server)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toggleSSEConnection() {
|
||||
// If it is connecting:
|
||||
if (!this.connectionSSEState) return this.start()
|
||||
// Otherwise, it's disconnecting.
|
||||
else return this.stop()
|
||||
},
|
||||
start() {
|
||||
this.events.log = [
|
||||
{
|
||||
payload: this.$t("connecting_to", { name: this.server }),
|
||||
source: "info",
|
||||
color: "var(--ac-color)",
|
||||
},
|
||||
]
|
||||
if (typeof EventSource !== "undefined") {
|
||||
try {
|
||||
this.sse = new EventSource(this.server)
|
||||
this.sse.onopen = event => {
|
||||
this.connectionSSEState = true
|
||||
this.events.log = [
|
||||
{
|
||||
payload: this.$t("connected_to", { name: this.server }),
|
||||
source: "info",
|
||||
color: "var(--ac-color)",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
},
|
||||
]
|
||||
this.$toast.success(this.$t("connected"), {
|
||||
icon: "sync",
|
||||
})
|
||||
}
|
||||
this.sse.onerror = event => {
|
||||
this.handleSSEError()
|
||||
}
|
||||
this.sse.onclose = event => {
|
||||
this.connectionSSEState = false
|
||||
this.events.log.push({
|
||||
payload: this.$t("disconnected_from", { name: this.server }),
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
this.$toast.error(this.$t("disconnected"), {
|
||||
icon: "sync_disabled",
|
||||
})
|
||||
}
|
||||
this.sse.onmessage = event => {
|
||||
this.events.log.push({
|
||||
payload: event.data,
|
||||
source: "server",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
}
|
||||
} catch (ex) {
|
||||
this.handleSSEError(ex)
|
||||
this.$toast.error(this.$t("something_went_wrong"), {
|
||||
icon: "error",
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.events.log = [
|
||||
{
|
||||
payload: this.$t("browser_support_sse"),
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
handleSSEError(error) {
|
||||
this.stop()
|
||||
this.connectionSSEState = false
|
||||
this.events.log.push({
|
||||
payload: this.$t("error_occurred"),
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
if (error !== null)
|
||||
this.events.log.push({
|
||||
payload: error,
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
},
|
||||
stop() {
|
||||
this.sse.onclose()
|
||||
this.sse.close()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
182
components/realtime/websocket.vue
Normal file
182
components/realtime/websocket.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<pw-section class="blue" :label="$t('request')" ref="request">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="websocket-url">{{ $t("url") }}</label>
|
||||
<input
|
||||
id="websocket-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 :title="$t('log')" :log="communication.log" />
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="websocket-message">{{ $t("message") }}</label>
|
||||
<input
|
||||
id="websocket-message"
|
||||
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"
|
||||
|
||||
export default {
|
||||
components: {
|
||||
"pw-section": () => import("../layout/section"),
|
||||
realtimeLog: () => import("./log"),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
connectionState: false,
|
||||
url: "wss://echo.websocket.org",
|
||||
socket: null,
|
||||
communication: {
|
||||
log: null,
|
||||
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.socket = new WebSocket(this.url)
|
||||
this.socket.onopen = event => {
|
||||
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.socket.onerror = event => {
|
||||
this.handleError()
|
||||
}
|
||||
this.socket.onclose = event => {
|
||||
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",
|
||||
})
|
||||
}
|
||||
this.socket.onmessage = event => {
|
||||
this.communication.log.push({
|
||||
payload: event.data,
|
||||
source: "server",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
}
|
||||
} catch (ex) {
|
||||
this.handleError(ex)
|
||||
this.$toast.error(this.$t("something_went_wrong"), {
|
||||
icon: "error",
|
||||
})
|
||||
}
|
||||
},
|
||||
disconnect() {
|
||||
this.socket.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 message = this.communication.input
|
||||
this.socket.send(message)
|
||||
this.communication.log.push({
|
||||
payload: message,
|
||||
source: "client",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
this.communication.input = ""
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user