Added MQTT support
This commit is contained in:
Rahul
260
components/realtime/mqtt.vue
Normal file
260
components/realtime/mqtt.vue
Normal file
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<div>
|
||||
<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" />
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<label for="connect"> </label>
|
||||
<button id="connect" :disabled="!validUrl" @click="toggleConnection">
|
||||
{{ this.connectionState ? $t("disconnect") : $t("connect") }}
|
||||
<span>
|
||||
<i class="material-icons">{{ !connectionState ? "sync" : "sync_disabled" }}</i>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</pw-section>
|
||||
<pw-section class="blue" :label="$t('communication')">
|
||||
<ul>
|
||||
<li>
|
||||
<realtimeLog :log="this.log" />
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="pub_topic">{{ $t("mqtt_topic") }}</label>
|
||||
<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" />
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<label for="publish"> </label>
|
||||
<button id="publish" name="get" :disabled="!canpublish" @click="publish">
|
||||
{{ $t("mqtt_publish") }}
|
||||
<span>
|
||||
<i class="material-icons">send</i>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="sub_topic">{{ $t("mqtt_topic") }}</label>
|
||||
<input id="sub_topic" type="text" v-model="sub_topic" spellcheck="false" />
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<label for="subscribe"> </label>
|
||||
<button id="subscribe" name="get" :disabled="!cansubscribe" @click="toggleSubscription">
|
||||
{{ subscriptionState ? $t("mqtt_unsubscribe") : $t("mqtt_subscribe") }}
|
||||
<span>
|
||||
<i class="material-icons">{{ subscriptionState ? "sync_disabled" : "sync" }}</i>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</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,
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
url: "wss://",
|
||||
client: null,
|
||||
pub_topic: "",
|
||||
sub_topic: "",
|
||||
msg: "",
|
||||
connectionState: false,
|
||||
log: null,
|
||||
manualDisconnect: false,
|
||||
subscriptionState: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
validUrl() {
|
||||
return wsValid(this.url)
|
||||
},
|
||||
canpublish() {
|
||||
return this.pub_topic != "" && this.msg != "" && this.connectionState
|
||||
},
|
||||
cansubscribe() {
|
||||
return this.sub_topic != "" && this.connectionState
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
connect() {
|
||||
this.log = [
|
||||
{
|
||||
payload: this.$t("connecting_to", { name: this.url }),
|
||||
source: "info",
|
||||
color: "var(--ac-color)",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
},
|
||||
]
|
||||
let parseUrl = new URL(this.url)
|
||||
this.client = new Paho.Client(
|
||||
parseUrl.hostname,
|
||||
parseUrl.port != "" ? Number(parseUrl.port) : 8081,
|
||||
"postwoman"
|
||||
)
|
||||
this.client.connect({
|
||||
onSuccess: this.onConnectionSuccess,
|
||||
onFailure: this.onConnectionFailure,
|
||||
})
|
||||
this.client.onConnectionLost = this.onConnectionLost
|
||||
this.client.onMessageArrived = this.onMessageArrived
|
||||
},
|
||||
onConnectionFailure() {
|
||||
this.connectionState = false
|
||||
this.log.push({
|
||||
payload: this.$t("error_occurred"),
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
},
|
||||
onConnectionSuccess() {
|
||||
this.connectionState = true
|
||||
this.log.push({
|
||||
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",
|
||||
})
|
||||
},
|
||||
onMessageArrived(message) {
|
||||
debugger
|
||||
this.log.push({
|
||||
payload: `Message: ${message.payloadString} arrived on topic: ${message.destinationName}`,
|
||||
source: "info",
|
||||
color: "var(--ac-color)",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
},
|
||||
toggleConnection() {
|
||||
if (this.connectionState) {
|
||||
this.disconnect()
|
||||
} else {
|
||||
this.connect()
|
||||
}
|
||||
},
|
||||
disconnect() {
|
||||
this.manualDisconnect = true
|
||||
this.client.disconnect()
|
||||
this.log.push({
|
||||
payload: this.$t("disconnected_from", { name: this.url }),
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
},
|
||||
onConnectionLost() {
|
||||
this.connectionState = false
|
||||
if (this.manualDisconnect) {
|
||||
this.$toast.error(this.$t("disconnected"), {
|
||||
icon: "sync_disabled",
|
||||
})
|
||||
} else {
|
||||
this.$toast.error(this.$t("something_went_wrong"), {
|
||||
icon: "error",
|
||||
})
|
||||
}
|
||||
this.manualDisconnect = false
|
||||
this.subscriptionState = false
|
||||
},
|
||||
publish() {
|
||||
try {
|
||||
this.client.publish(this.pub_topic, this.msg, 0, false)
|
||||
this.log.push({
|
||||
payload: `Published message: ${this.msg} to topic: ${this.pub_topic}`,
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
source: "info",
|
||||
color: "var(--ac-color)",
|
||||
})
|
||||
} catch (e) {
|
||||
this.log.push({
|
||||
payload:
|
||||
this.$t("error_occurred") +
|
||||
`while publishing msg: ${this.msg} to topic: ${this.pub_topic}`,
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
}
|
||||
},
|
||||
toggleSubscription() {
|
||||
if (this.subscriptionState) {
|
||||
this.unsubscribe()
|
||||
} else {
|
||||
this.subscribe()
|
||||
}
|
||||
},
|
||||
subscribe() {
|
||||
try {
|
||||
this.client.subscribe(this.sub_topic, {
|
||||
onSuccess: this.usubSuccess,
|
||||
onFailure: this.usubFailure,
|
||||
})
|
||||
} catch (e) {
|
||||
this.log.push({
|
||||
payload: this.$t("error_occurred") + `while subscribing to topic: ${this.sub_topic}`,
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
}
|
||||
},
|
||||
usubSuccess() {
|
||||
this.subscriptionState = !this.subscriptionState
|
||||
this.log.push({
|
||||
payload:
|
||||
`Successfully ` +
|
||||
(this.subscriptionState ? "subscribed" : "unsubscribed") +
|
||||
` to topic: ${this.sub_topic}`,
|
||||
source: "info",
|
||||
color: "var(--ac-color)",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
},
|
||||
usubFailure() {
|
||||
this.log.push({
|
||||
payload:
|
||||
`Failed to ` +
|
||||
(this.subscriptionState ? "unsubscribe" : "subscribe") +
|
||||
` to topic: ${this.sub_topic}`,
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
})
|
||||
},
|
||||
unsubscribe() {
|
||||
this.client.unsubscribe(this.sub_topic, {
|
||||
onSuccess: this.usubSuccess,
|
||||
onFailure: this.usubFailure,
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -276,4 +276,9 @@ export default {
|
||||
notes: "Notes",
|
||||
socketio: "Socket.IO",
|
||||
event_name: "Event Name",
|
||||
mqtt_topic: "Topic",
|
||||
mqtt_topic_title: "Publish / Subscribe topic",
|
||||
mqtt_publish: "Publish",
|
||||
mqtt_subscribe: "Subscribe",
|
||||
mqtt_unsubscribe: "Unsubscribe",
|
||||
}
|
||||
|
||||
5
package-lock.json
generated
5
package-lock.json
generated
@@ -8983,6 +8983,11 @@
|
||||
"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
|
||||
"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
|
||||
},
|
||||
"paho-mqtt": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/paho-mqtt/-/paho-mqtt-1.1.0.tgz",
|
||||
"integrity": "sha512-KPbL9KAB0ASvhSDbOrZBaccXS+/s7/LIofbPyERww8hM5Ko71GUJQ6Nmg0BWqj8phAIT8zdf/Sd/RftHU9i2HA=="
|
||||
},
|
||||
"pako": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/pako/-/pako-1.0.10.tgz",
|
||||
|
||||
@@ -43,6 +43,7 @@
|
||||
"graphql-language-service-interface": "^2.3.3",
|
||||
"nuxt": "^2.11.0",
|
||||
"nuxt-i18n": "^6.6.0",
|
||||
"paho-mqtt": "^1.1.0",
|
||||
"socket.io-client": "^2.3.0",
|
||||
"v-tooltip": "^2.0.3",
|
||||
"vue-virtual-scroll-list": "^1.4.6",
|
||||
|
||||
@@ -27,9 +27,7 @@
|
||||
>
|
||||
{{ !connectionState ? $t("connect") : $t("disconnect") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionState ? "sync" : "sync_disabled" }}
|
||||
</i>
|
||||
<i class="material-icons">{{ !connectionState ? "sync" : "sync_disabled" }}</i>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
@@ -94,9 +92,7 @@
|
||||
>
|
||||
{{ !connectionSSEState ? $t("start") : $t("stop") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionSSEState ? "sync" : "sync_disabled" }}
|
||||
</i>
|
||||
<i class="material-icons">{{ !connectionSSEState ? "sync" : "sync_disabled" }}</i>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
@@ -118,6 +114,16 @@
|
||||
<socketio />
|
||||
</tab>
|
||||
</tabs>
|
||||
<input id="tab-three" type="radio" name="options" />
|
||||
<label for="tab-three">{{ $t("socketio") }}</label>
|
||||
<div class="tab">
|
||||
<socketio />
|
||||
</div>
|
||||
<input id="tab-four" type="radio" name="options" />
|
||||
<label for="tab-four">{{ $t("mqtt") }}</label>
|
||||
<div class="tab">
|
||||
<mqtt />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
@@ -132,6 +138,7 @@ export default {
|
||||
socketio: () => import("../components/realtime/socketio"),
|
||||
tabs: () => import("../components/ui/tabs"),
|
||||
tab: () => import("../components/ui/tab"),
|
||||
mqtt: () => import("../components/realtime/mqtt"),
|
||||
realtimeLog,
|
||||
},
|
||||
data() {
|
||||
|
||||
Reference in New Issue
Block a user