From 77edec5f76e8412e0b70277e5ae8ef1af009d77a Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 3 Mar 2020 20:49:37 -0500
Subject: [PATCH 1/6] Removed linting for the collection docs import editor

---
 pages/doc.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pages/doc.vue b/pages/doc.vue
index 6a7f6ae1..241ae7b5 100644
--- 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',

From b14e475db08cd09f8cd49ac470c6d57111ff173f Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Wed, 4 Mar 2020 09:21:48 +0530
Subject: [PATCH 2/6] Hotfix: Select current theme swatch

---
 pages/settings.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pages/settings.vue b/pages/settings.vue
index c41fe3be..41c04c98 100644
--- 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()
   },
 

From 14701369bd0fead608b90e93e43d09f7b3e358e6 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Wed, 4 Mar 2020 14:40:44 +0800
Subject: [PATCH 3/6] Add Socketio support

and modify some websocket and sse code to pick up common function and component
---
 components/realtime/log.vue      |  58 ++++++++
 components/realtime/socketio.vue | 216 ++++++++++++++++++++++++++++
 functions/utils/string.js        |  12 ++
 functions/utils/valid.js         |  27 ++++
 package-lock.json                | 233 +++++++++++++++++++++++++++++++
 package.json                     |   1 +
 pages/realtime.vue               | 102 ++------------
 7 files changed, 562 insertions(+), 87 deletions(-)
 create mode 100644 components/realtime/log.vue
 create mode 100644 components/realtime/socketio.vue
 create mode 100644 functions/utils/string.js
 create mode 100644 functions/utils/valid.js

diff --git a/components/realtime/log.vue b/components/realtime/log.vue
new file mode 100644
index 00000000..0bd3fbbd
--- /dev/null
+++ 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>
diff --git a/components/realtime/socketio.vue b/components/realtime/socketio.vue
new file mode 100644
index 00000000..718e35f5
--- /dev/null
+++ 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: "wss://echo.websocket.org",
+      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>
diff --git a/functions/utils/string.js b/functions/utils/string.js
new file mode 100644
index 00000000..8b048b20
--- /dev/null
+++ 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 ""
+}
diff --git a/functions/utils/valid.js b/functions/utils/valid.js
new file mode 100644
index 00000000..8295ea96
--- /dev/null
+++ 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)
+}
diff --git a/package-lock.json b/package-lock.json
index 32a05990..6ee33d17 100644
--- 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="
         }
     }
 }
diff --git a/package.json b/package.json
index 4089e034..d93d10da 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",
+    "socket.io-client": "^2.3.0",
     "v-tooltip": "^2.0.3",
     "vue-virtual-scroll-list": "^1.4.6",
     "vuefire": "^2.2.1",
diff --git a/pages/realtime.vue b/pages/realtime.vue
index a27227cd..e53072ff 100644
--- 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("socket.io") }}</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>

From 356d736f4eabe0ed7e44df1ca1a83bc743f6cd2d Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Wed, 4 Mar 2020 14:50:47 +0800
Subject: [PATCH 4/6] Trans and docs for socketio feature

---
 README.md                        | 2 ++
 components/realtime/socketio.vue | 2 +-
 lang/en-US.js                    | 2 ++
 nuxt.config.js                   | 8 ++++----
 pages/realtime.vue               | 2 +-
 5 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 02a2eafe..b60f371b 100644
--- 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
diff --git a/components/realtime/socketio.vue b/components/realtime/socketio.vue
index 718e35f5..1bdf5bb5 100644
--- a/components/realtime/socketio.vue
+++ b/components/realtime/socketio.vue
@@ -85,7 +85,7 @@ export default {
   },
   data() {
     return {
-      url: "wss://echo.websocket.org",
+      url: "ws://",
       connectionState: false,
       io: null,
       communication: {
diff --git a/lang/en-US.js b/lang/en-US.js
index b123c838..811b9821 100644
--- 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",
 }
diff --git a/nuxt.config.js b/nuxt.config.js
index 988b00f5..685a3ca6 100644
--- 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: {
diff --git a/pages/realtime.vue b/pages/realtime.vue
index e53072ff..82fdd77a 100644
--- a/pages/realtime.vue
+++ b/pages/realtime.vue
@@ -112,7 +112,7 @@
       </div>
 
       <input id="tab-three" type="radio" name="options" />
-      <label for="tab-three">{{ $t("socket.io") }}</label>
+      <label for="tab-three">{{ $t("socketio") }}</label>
       <div class="tab">
         <socketio />
       </div>

From 1a93ce1d436172e89fc5cc48a6e3669ad2bfcda6 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Wed, 4 Mar 2020 16:08:12 +0530
Subject: [PATCH 5/6] :pencil: Updated feature list

---
 README.md | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/README.md b/README.md
index b60f371b..acbd42b9 100644
--- a/README.md
+++ b/README.md
@@ -221,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.
 
@@ -229,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)

From 0533f3a0709cc625b84a7ea8379520cce93fbd50 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Wed, 4 Mar 2020 20:04:38 +0530
Subject: [PATCH 6/6] :bug: Fixed #644

---
 pages/index.vue | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index 1915a938..7828c53f 100644
--- 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