From 7345cc9943fa3812a963caeb61808823bed04b39 Mon Sep 17 00:00:00 2001
From: Rahul <rahul@Railsfactorys-MacBook-Pro.local>
Date: Wed, 11 Mar 2020 17:50:04 +0530
Subject: [PATCH] Added MQTT support

---
 components/realtime/mqtt.vue | 260 +++++++++++++++++++++++++++++++++++
 lang/en-US.js                |   5 +
 package-lock.json            |   5 +
 package.json                 |   1 +
 pages/realtime.vue           |  19 ++-
 5 files changed, 284 insertions(+), 6 deletions(-)
 create mode 100644 components/realtime/mqtt.vue

diff --git a/components/realtime/mqtt.vue b/components/realtime/mqtt.vue
new file mode 100644
index 000000000..36beb5d0e
--- /dev/null
+++ b/components/realtime/mqtt.vue
@@ -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">&nbsp;</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">&nbsp;</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">&nbsp;</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>
diff --git a/lang/en-US.js b/lang/en-US.js
index dbbfd4343..745b0c41f 100644
--- a/lang/en-US.js
+++ b/lang/en-US.js
@@ -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",
 }
diff --git a/package-lock.json b/package-lock.json
index 02bdfb1a1..4c8515bb0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
diff --git a/package.json b/package.json
index 5e1065a04..991ecfed2 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/pages/realtime.vue b/pages/realtime.vue
index fa56ee5c8..7fd9c3ac6 100644
--- a/pages/realtime.vue
+++ b/pages/realtime.vue
@@ -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() {