Merge pull request #646 from liyasthomas/master

Even
2020-03-05 06:46:03 +05:30
parent 89d43ae52d 31fde475a3
commit da628ca26d
13 changed files with 595 additions and 101 deletions
--- a/README.md
+++ b/README.md
@@ -92,6 +92,8 @@ _Customized themes are synced with local session storage_

 📡 **Server Sent Events**: Receive a stream of updates from a server over a HTTP connection without resorting to polling.

+🌩 **Socket.IO**: Send and Receive data with socketio server. SocketIO is popular websocket solution.
+
 🔮 **GraphQL**: GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.

 - Set endpoint and get schemas
@@ -219,6 +221,8 @@ _Add-ons are developed and maintained under **[Official Postwoman Organization](
 **Sync:**
 - History
 - Collections
+ - Environments
+ - Notes

 ✅ **Post-Request Tests β**: Write tests associated with a request that are executed after the request response.

@@ -227,6 +231,17 @@ _Add-ons are developed and maintained under **[Official Postwoman Organization](
 - Filter response headers
 - Parse the response data

+📝 **Notes** : Instantly jot down notes, tasks or whatever you feel like as they come to your mind.
+
+_Notes are only available for signed-in users_
+
+🌱 **Environments** : Environment variables allow you to store and reuse values in your requests and scripts.
+
+**Use-cases:**
+ - By storing a value in a variable, you can reference it throughout your request section
+ - If you need to update the value, you only have to change it in one place
+ - Using variables increases your ability to work efficiently and minimizes the likelihood of error
+
 **To find out more, please check out [Postwoman Wiki](https://github.com/liyasthomas/postwoman/wiki).**

 ## Demo 🚀 [![Website](https://img.shields.io/website?url=https%3A%2F%2Fpostwoman.io&logo=Postwoman)](https://postwoman.io)
--- a/components/realtime/log.vue
+++ b/components/realtime/log.vue
@@ -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>
--- a/components/realtime/socketio.vue
+++ b/components/realtime/socketio.vue
@@ -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">&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 :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">&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"
+import io from "socket.io-client"
+import realtimeLog from "./log"
+
+export default {
+  components: {
+    "pw-section": () => import("../../components/layout/section"),
+    realtimeLog,
+  },
+  data() {
+    return {
+      url: "ws://",
+      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>
--- a/functions/utils/string.js
+++ b/functions/utils/string.js
@@ -0,0 +1,12 @@
+export function getSourcePrefix(source) {
+  const sourceEmojis = {
+    // Source used for info messages.
+    info: "\tℹ️ [INFO]:\t",
+    // Source used for client to server messages.
+    client: "\t👽 [SENT]:\t",
+    // Source used for server to client messages.
+    server: "\t📥 [RECEIVED]:\t",
+  }
+  if (Object.keys(sourceEmojis).includes(source)) return sourceEmojis[source]
+  return ""
+}
--- a/functions/utils/valid.js
+++ b/functions/utils/valid.js
@@ -0,0 +1,27 @@
+/**
+ * valid url for ws/wss
+ */
+export function wsValid(url) {
+  const protocol = "^(wss?:\\/\\/)?"
+  const validIP = new RegExp(
+    `${protocol}(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$`
+  )
+  const validHostname = new RegExp(
+    `${protocol}(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]).)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9/])$`
+  )
+  return validIP.test(url) || validHostname.test(url)
+}
+
+/**
+ * valid url for http/https
+ */
+export function sseValid(url) {
+  const protocol = "^(https?:\\/\\/)?"
+  const validIP = new RegExp(
+    `${protocol}(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$`
+  )
+  const validHostname = new RegExp(
+    `${protocol}(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]).)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9/])$`
+  )
+  return validIP.test(url) || validHostname.test(url)
+}
--- a/lang/en-US.js
+++ b/lang/en-US.js
@@ -274,4 +274,6 @@ export default {
  paste_a_note: "Paste a note",
  import_from_sync: "Import from Sync",
  notes: "Notes",
+  socketio: "Socket.IO",
+  event_name: "Event Name",
 }
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -57,7 +57,7 @@ export default {
      {
        name: "keywords",
        content:
-          "postwoman, postwoman chrome, postwoman online, postwoman for mac, postwoman app, postwoman for windows, postwoman google chrome, postwoman chrome app, get postwoman, postwoman web, postwoman android, postwoman app for chrome, postwoman mobile app, postwoman web app, api, request, testing, tool, rest, websocket, sse, graphql",
+          "postwoman, postwoman chrome, postwoman online, postwoman for mac, postwoman app, postwoman for windows, postwoman google chrome, postwoman chrome app, get postwoman, postwoman web, postwoman android, postwoman app for chrome, postwoman mobile app, postwoman web app, api, request, testing, tool, rest, websocket, sse, graphql, socketio",
      },
      {
        name: "X-UA-Compatible",
@@ -353,14 +353,14 @@ export default {
        code: "ja",
        name: "日本語",
        iso: "ja-JP",
-        file: "ja-JP.js"
+        file: "ja-JP.js",
      },
      {
        code: "ko",
        name: "한국어",
        iso: "ko-KR",
-        file: "ko-KR.js"
-      }
+        file: "ko-KR.js",
+      },
    ],
    defaultLocale: "en",
    vueI18n: {
--- a/package-lock.json
+++ b/package-lock.json
@@ -2207,6 +2207,11 @@
            "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-6.2.0.tgz",
            "integrity": "sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA=="
        },
+        "after": {
+            "version": "0.8.2",
+            "resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz",
+            "integrity": "sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8="
+        },
        "aggregate-error": {
            "version": "3.0.1",
            "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.0.1.tgz",
@@ -2418,6 +2423,11 @@
            "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
            "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg="
        },
+        "arraybuffer.slice": {
+            "version": "0.0.7",
+            "resolved": "https://registry.npmjs.org/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz",
+            "integrity": "sha512-wGUIVQXuehL5TCqQun8OW81jGzAWycqzFF8lFp+GOM5BXLYj3bKNsYC4daB7n6XjCqxQA/qgTJ+8ANR3acjrog=="
+        },
        "arrify": {
            "version": "2.0.1",
            "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
@@ -2612,6 +2622,11 @@
                "object.assign": "^4.1.0"
            }
        },
+        "backo2": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
+            "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc="
+        },
        "balanced-match": {
            "version": "1.0.0",
            "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -2667,6 +2682,11 @@
                }
            }
        },
+        "base64-arraybuffer": {
+            "version": "0.1.5",
+            "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz",
+            "integrity": "sha1-c5JncZI7Whl0etZmqlzUv5xunOg="
+        },
        "base64-js": {
            "version": "1.3.1",
            "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.1.tgz",
@@ -2681,6 +2701,14 @@
                "tweetnacl": "^0.14.3"
            }
        },
+        "better-assert": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/better-assert/-/better-assert-1.0.2.tgz",
+            "integrity": "sha1-QIZrnhueC1W0gYlDEeaPr/rrxSI=",
+            "requires": {
+                "callsite": "1.0.0"
+            }
+        },
        "bfj": {
            "version": "6.1.2",
            "resolved": "https://registry.npmjs.org/bfj/-/bfj-6.1.2.tgz",
@@ -2711,6 +2739,11 @@
                "file-uri-to-path": "1.0.0"
            }
        },
+        "blob": {
+            "version": "0.0.5",
+            "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.5.tgz",
+            "integrity": "sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig=="
+        },
        "block-stream": {
            "version": "0.0.9",
            "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
@@ -3141,6 +3174,11 @@
                "caller-callsite": "^2.0.0"
            }
        },
+        "callsite": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/callsite/-/callsite-1.0.0.tgz",
+            "integrity": "sha1-KAOY5dZkvXQDi28JBRU+borxvCA="
+        },
        "callsites": {
            "version": "2.0.0",
            "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
@@ -3601,11 +3639,21 @@
            "integrity": "sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA==",
            "dev": true
        },
+        "component-bind": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/component-bind/-/component-bind-1.0.0.tgz",
+            "integrity": "sha1-AMYIq33Nk4l8AAllGx06jh5zu9E="
+        },
        "component-emitter": {
            "version": "1.3.0",
            "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
            "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
        },
+        "component-inherit": {
+            "version": "0.0.3",
+            "resolved": "https://registry.npmjs.org/component-inherit/-/component-inherit-0.0.3.tgz",
+            "integrity": "sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM="
+        },
        "compressible": {
            "version": "2.0.17",
            "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.17.tgz",
@@ -4527,6 +4575,59 @@
                "once": "^1.4.0"
            }
        },
+        "engine.io-client": {
+            "version": "3.4.0",
+            "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-3.4.0.tgz",
+            "integrity": "sha512-a4J5QO2k99CM2a0b12IznnyQndoEvtA4UAldhGzKqnHf42I3Qs2W5SPnDvatZRcMaNZs4IevVicBPayxYt6FwA==",
+            "requires": {
+                "component-emitter": "1.2.1",
+                "component-inherit": "0.0.3",
+                "debug": "~4.1.0",
+                "engine.io-parser": "~2.2.0",
+                "has-cors": "1.1.0",
+                "indexof": "0.0.1",
+                "parseqs": "0.0.5",
+                "parseuri": "0.0.5",
+                "ws": "~6.1.0",
+                "xmlhttprequest-ssl": "~1.5.4",
+                "yeast": "0.1.2"
+            },
+            "dependencies": {
+                "component-emitter": {
+                    "version": "1.2.1",
+                    "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
+                    "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY="
+                },
+                "debug": {
+                    "version": "4.1.1",
+                    "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
+                    "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+                    "requires": {
+                        "ms": "^2.1.1"
+                    }
+                },
+                "ws": {
+                    "version": "6.1.4",
+                    "resolved": "https://registry.npmjs.org/ws/-/ws-6.1.4.tgz",
+                    "integrity": "sha512-eqZfL+NE/YQc1/ZynhojeV8q+H050oR8AZ2uIev7RU10svA9ZnJUddHcOUZTJLinZ9yEfdA2kSATS2qZK5fhJA==",
+                    "requires": {
+                        "async-limiter": "~1.0.0"
+                    }
+                }
+            }
+        },
+        "engine.io-parser": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-2.2.0.tgz",
+            "integrity": "sha512-6I3qD9iUxotsC5HEMuuGsKA0cXerGz+4uGcXQEkfBidgKf0amsjrrtwcbwK/nzpZBxclXlV7gGl9dgWvu4LF6w==",
+            "requires": {
+                "after": "0.8.2",
+                "arraybuffer.slice": "~0.0.7",
+                "base64-arraybuffer": "0.1.5",
+                "blob": "0.0.5",
+                "has-binary2": "~1.0.2"
+            }
+        },
        "enhanced-resolve": {
            "version": "4.1.1",
            "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.1.1.tgz",
@@ -6169,6 +6270,26 @@
                }
            }
        },
+        "has-binary2": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/has-binary2/-/has-binary2-1.0.3.tgz",
+            "integrity": "sha512-G1LWKhDSvhGeAQ8mPVQlqNcOB2sJdwATtZKl2pDKKHfpf/rYj24lkinxf69blJbnsvtqqNU+L3SL50vzZhXOnw==",
+            "requires": {
+                "isarray": "2.0.1"
+            },
+            "dependencies": {
+                "isarray": {
+                    "version": "2.0.1",
+                    "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz",
+                    "integrity": "sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4="
+                }
+            }
+        },
+        "has-cors": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz",
+            "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk="
+        },
        "has-flag": {
            "version": "4.0.0",
            "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -6687,6 +6808,11 @@
            "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
            "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc="
        },
+        "indexof": {
+            "version": "0.0.1",
+            "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz",
+            "integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10="
+        },
        "infer-owner": {
            "version": "1.0.4",
            "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
@@ -8638,6 +8764,11 @@
            "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
            "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
        },
+        "object-component": {
+            "version": "0.0.3",
+            "resolved": "https://registry.npmjs.org/object-component/-/object-component-0.0.3.tgz",
+            "integrity": "sha1-8MaapQ78lbhmwYb0AKM3acsvEpE="
+        },
        "object-copy": {
            "version": "0.1.0",
            "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
@@ -8938,6 +9069,22 @@
                "json-parse-better-errors": "^1.0.1"
            }
        },
+        "parseqs": {
+            "version": "0.0.5",
+            "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.5.tgz",
+            "integrity": "sha1-1SCKNzjkZ2bikbouoXNoSSGouJ0=",
+            "requires": {
+                "better-assert": "~1.0.0"
+            }
+        },
+        "parseuri": {
+            "version": "0.0.5",
+            "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.5.tgz",
+            "integrity": "sha1-gCBKUNTbt3m/3G6+J3jZDkvOMgo=",
+            "requires": {
+                "better-assert": "~1.0.0"
+            }
+        },
        "parseurl": {
            "version": "1.3.3",
            "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -11300,6 +11447,77 @@
                }
            }
        },
+        "socket.io-client": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-2.3.0.tgz",
+            "integrity": "sha512-cEQQf24gET3rfhxZ2jJ5xzAOo/xhZwK+mOqtGRg5IowZsMgwvHwnf/mCRapAAkadhM26y+iydgwsXGObBB5ZdA==",
+            "requires": {
+                "backo2": "1.0.2",
+                "base64-arraybuffer": "0.1.5",
+                "component-bind": "1.0.0",
+                "component-emitter": "1.2.1",
+                "debug": "~4.1.0",
+                "engine.io-client": "~3.4.0",
+                "has-binary2": "~1.0.2",
+                "has-cors": "1.1.0",
+                "indexof": "0.0.1",
+                "object-component": "0.0.3",
+                "parseqs": "0.0.5",
+                "parseuri": "0.0.5",
+                "socket.io-parser": "~3.3.0",
+                "to-array": "0.1.4"
+            },
+            "dependencies": {
+                "component-emitter": {
+                    "version": "1.2.1",
+                    "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
+                    "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY="
+                },
+                "debug": {
+                    "version": "4.1.1",
+                    "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
+                    "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+                    "requires": {
+                        "ms": "^2.1.1"
+                    }
+                }
+            }
+        },
+        "socket.io-parser": {
+            "version": "3.3.0",
+            "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.3.0.tgz",
+            "integrity": "sha512-hczmV6bDgdaEbVqhAeVMM/jfUfzuEZHsQg6eOmLgJht6G3mPKMxYm75w2+qhAQZ+4X+1+ATZ+QFKeOZD5riHng==",
+            "requires": {
+                "component-emitter": "1.2.1",
+                "debug": "~3.1.0",
+                "isarray": "2.0.1"
+            },
+            "dependencies": {
+                "component-emitter": {
+                    "version": "1.2.1",
+                    "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
+                    "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY="
+                },
+                "debug": {
+                    "version": "3.1.0",
+                    "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+                    "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+                    "requires": {
+                        "ms": "2.0.0"
+                    }
+                },
+                "isarray": {
+                    "version": "2.0.1",
+                    "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz",
+                    "integrity": "sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4="
+                },
+                "ms": {
+                    "version": "2.0.0",
+                    "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+                    "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+                }
+            }
+        },
        "sort-keys": {
            "version": "1.1.2",
            "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
@@ -12131,6 +12349,11 @@
                "rimraf": "^2.6.3"
            }
        },
+        "to-array": {
+            "version": "0.1.4",
+            "resolved": "https://registry.npmjs.org/to-array/-/to-array-0.1.4.tgz",
+            "integrity": "sha1-F+bBH3PdTz10zaek/zI46a2b+JA="
+        },
        "to-arraybuffer": {
            "version": "1.0.1",
            "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
@@ -13818,6 +14041,11 @@
            "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz",
            "integrity": "sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw="
        },
+        "xmlhttprequest-ssl": {
+            "version": "1.5.5",
+            "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz",
+            "integrity": "sha1-wodrBhaKrcQOV9l+gRkayPQ5iz4="
+        },
        "xtend": {
            "version": "4.0.2",
            "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -13958,6 +14186,11 @@
                    }
                }
            }
+        },
+        "yeast": {
+            "version": "0.1.2",
+            "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
+            "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
        }
    }
 }
--- 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",
+    "socket.io-client": "^2.3.0",
    "v-tooltip": "^2.0.3",
    "vue-virtual-scroll-list": "^1.4.6",
    "vuefire": "^2.2.1",
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -29,6 +29,7 @@
          <Editor
            v-model="collectionJSON"
            :lang="'json'"
+            :lint="false"
            :options="{
              maxLines: '16',
              minLines: '8',
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2132,16 +2132,6 @@ export default {
            }
          }
        })()
-        // tests
-        const syntheticResponse = {
-          status: this.response.status,
-          body: this.response.body,
-          headers: this.response.headers,
-        }
-        const { testResults } = runTestScriptWithVariables(this.testScript, {
-          response: syntheticResponse,
-        })
-        this.testReports = testResults
      } catch (error) {
        console.error(error)
        if (error.response) {
@@ -2187,6 +2177,16 @@ export default {
          }
        }
      }
+      // tests
+      const syntheticResponse = {
+        status: this.response.status,
+        body: this.response.body,
+        headers: this.response.headers,
+      }
+      const { testResults } = runTestScriptWithVariables(this.testScript, {
+        response: syntheticResponse,
+      })
+      this.testReports = testResults
    },
    getQueryStringFromPath() {
      let queryString
--- a/pages/realtime.vue
+++ b/pages/realtime.vue
@@ -36,19 +36,7 @@
        <pw-section class="purple" :label="$t('communication')" id="response" ref="response">
          <ul>
            <li>
-              <label for="log">{{ $t("log") }}</label>
-              <div id="log" name="log" class="log">
-                <span v-if="communication.log">
-                  <span
-                    v-for="(logEntry, index) in communication.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>
+              <realtime-log :title="$t('log')" :log="communication.log" />
            </li>
          </ul>
          <ul>
@@ -116,59 +104,31 @@
        <pw-section class="purple" :label="$t('communication')" id="response" ref="response">
          <ul>
            <li>
-              <label for="log">{{ $t("events") }}</label>
-              <div id="log" name="log" class="log">
-                <span v-if="events.log">
-                  <span
-                    v-for="(logEntry, index) in events.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>
+              <realtime-log :title="$t('events')" :log="events.log" />
              <div id="result"></div>
            </li>
          </ul>
        </pw-section>
      </div>
+
+      <input id="tab-three" type="radio" name="options" />
+      <label for="tab-three">{{ $t("socketio") }}</label>
+      <div class="tab">
+        <socketio />
+      </div>
    </section>
  </div>
 </template>

-<style scoped lang="scss">
-div.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 { 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"),
+    realtimeLog,
  },
  data() {
    return {
@@ -190,24 +150,10 @@ export default {
  },
  computed: {
    urlValid() {
-      const protocol = "^(wss?:\\/\\/)?"
-      const validIP = new RegExp(
-        `${protocol}(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$`
-      )
-      const validHostname = new RegExp(
-        `${protocol}(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]).)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9/])$`
-      )
-      return validIP.test(this.url) || validHostname.test(this.url)
+      return wsValid(this.url)
    },
    serverValid() {
-      const protocol = "^(https?:\\/\\/)?"
-      const validIP = new RegExp(
-        `${protocol}(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$`
-      )
-      const validHostname = new RegExp(
-        `${protocol}(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]).)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9/])$`
-      )
-      return validIP.test(this.server) || validHostname.test(this.server)
+      return sseValid(this.server)
    },
  },
  methods: {
@@ -304,18 +250,6 @@ export default {
      const el = target.parentNode.className
      document.getElementsByClassName(el)[0].classList.toggle("hidden")
    },
-    getSourcePrefix(source) {
-      const sourceEmojis = {
-        // Source used for info messages.
-        info: "\tℹ️ [INFO]:\t",
-        // Source used for client to server messages.
-        client: "\t👽 [SENT]:\t",
-        // Source used for server to client messages.
-        server: "\t📥 [RECEIVED]:\t",
-      }
-      if (Object.keys(sourceEmojis).includes(source)) return sourceEmojis[source]
-      return ""
-    },
    toggleSSEConnection() {
      // If it is connecting:
      if (!this.connectionSSEState) return this.start()
@@ -408,11 +342,5 @@ export default {
      this.sse.close()
    },
  },
-  updated: function() {
-    this.$nextTick(function() {
-      const divLog = document.getElementById("log")
-      divLog.scrollBy(0, divLog.scrollHeight + 100)
-    })
-  },
 }
 </script>
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -654,6 +654,7 @@ export default {
  },

  beforeMount() {
+    this.settings.THEME_CLASS = document.documentElement.className
    this.settings.THEME_COLOR = this.getActiveColor()
  },