♻️ Refactor

components/realtime/mqtt.vue

@@ -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>
@@ -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: "",

components/realtime/socketio.vue

@@ -32,7 +32,7 @@
     <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>
@@ -76,12 +76,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 {

components/realtime/sse.vue

@@ -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">&nbsp;</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>

components/realtime/websocket.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="page">
+    <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">&nbsp;</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="message">{{ $t("message") }}</label>
+          <input
+            id="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">&nbsp;</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>

package-lock.json

@@ -2198,9 +2198,9 @@
             "integrity": "sha512-8ZVAxwyCGAxQX8mOp9imSXH0hoSPkGfy8igJy+WO/7axL30saRhKgg1XPACSmxxPA7nfHVwM+ShWXT+vKsNuFg=="
         },
         "acorn": {
-            "version": "6.4.0",
+            "version": "6.4.1",
-            "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.0.tgz",
+            "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
-            "integrity": "sha512-gac8OEcQ2Li1dxIEWGZzsp2BitJxwkwcOm0zHAJLcPJaVvm58FRnk6RkuLRpU1EujipU2ZFODv2P9DLMfnV8mw=="
+            "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA=="
         },
         "acorn-walk": {
             "version": "6.2.0",
@@ -7322,9 +7322,9 @@
             }
         },
         "kind-of": {
-            "version": "6.0.2",
+            "version": "6.0.3",
-            "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+            "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-            "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA=="
+            "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
         },
         "last-call-webpack-plugin": {
             "version": "3.0.0",

pages/realtime.vue

@@ -3,120 +3,17 @@
     <section id="options">
       <tabs>
         <tab :id="'websocket'" :label="$t('websocket')" :selected="true">
-          <pw-section class="blue" :label="$t('request')" ref="request">
+          <websocket />
-            <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">&nbsp;</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="message">{{ $t("message") }}</label>
-                <input
-                  id="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">&nbsp;</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>
         </tab>
 
         <tab :id="'sse'" :label="$t('sse')">
-          <pw-section class="blue" :label="$t('request')" ref="request">
+          <sse />
-            <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">&nbsp;</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>
         </tab>
 
         <tab :id="'socketio'" :label="$t('socketio')">
           <socketio />
         </tab>
+
         <tab :id="'mqtt'" :label="$t('mqtt')">
           <mqtt />
         </tab>
@@ -126,229 +23,15 @@
 </template>
 
 <script>
-import { wsValid, sseValid } from "~/functions/utils/valid"
-import realtimeLog from "~/components/realtime/log"
-
 export default {
   components: {
     "pw-section": () => import("../components/layout/section"),
-    socketio: () => import("../components/realtime/socketio"),
     tabs: () => import("../components/ui/tabs"),
     tab: () => import("../components/ui/tab"),
+    websocket: () => import("../components/realtime/websocket"),
+    sse: () => import("../components/realtime/sse"),
+    socketio: () => import("../components/realtime/socketio"),
     mqtt: () => import("../components/realtime/mqtt"),
-    realtimeLog,
-  },
-  data() {
-    return {
-      connectionState: false,
-      url: "wss://echo.websocket.org",
-      socket: null,
-      communication: {
-        log: null,
-        input: "",
-      },
-      connectionSSEState: false,
-      server: "https://express-eventsource.herokuapp.com/events",
-      sse: null,
-      events: {
-        log: null,
-        input: "",
-      },
-    }
-  },
-  computed: {
-    urlValid() {
-      return wsValid(this.url)
-    },
-    serverValid() {
-      return sseValid(this.server)
-    },
-  },
-  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 = ""
-    },
-    collapse({ target }) {
-      const el = target.parentNode.className
-      document.getElementsByClassName(el)[0].classList.toggle("hidden")
-    },
-    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>