SSE mvp

assets/js/curlparser.js

@@ -9,7 +9,7 @@ import * as querystring from "querystring";
  */
 function joinDataArguments(dataArguments) {
   let data = "";
-  dataArguments.forEach(function (argument, i) {
+  dataArguments.forEach((argument, i) => {
     if (i === 0) {
       data += argument;
     } else {
@@ -55,7 +55,7 @@ function parseCurlCommand(curlCommand) {
       if (!Array.isArray(parsedArguments[headerFieldName])) {
         parsedArguments[headerFieldName] = [parsedArguments[headerFieldName]];
       }
-      parsedArguments[headerFieldName].forEach(function (header) {
+      parsedArguments[headerFieldName].forEach((header) => {
         if (header.includes("Cookie")) {
           // stupid javascript tricks: closure
           cookieString = header;
@@ -95,7 +95,7 @@ function parseCurlCommand(curlCommand) {
     if (!Array.isArray(parsedArguments.F)) {
       parsedArguments.F = [parsedArguments.F];
     }
-    parsedArguments.F.forEach(function (multipartArgument) {
+    parsedArguments.F.forEach((multipartArgument) => {
       // input looks like key=value. value could be json or a file path prepended with an @
       const [key, value] = multipartArgument.split("=", 2);
       multipartUploads[key] = value;

build.js

@@ -43,8 +43,9 @@ try {
       runCommand("git", ["branch"])
       .split("* ")[1]
       .split(" ")[0] + (IS_DEV_MODE ? " - DEV MODE" : "");
-    if (["", "master"].includes(version.variant))
+    if (["", "master"].includes(version.variant)) {
       delete version.variant;
+    }
 
     // Write version data into a file
     fs.writeFileSync(

pages/graphql.vue

@@ -321,7 +321,7 @@ export default {
       this.responseBodyMaxLines = (this.responseBodyMaxLines == Infinity) ? 16 : Infinity;
     },
     downloadResponse() {
-      var dataToWrite = JSON.stringify(this.schemaString, null, 2);
+      var dataToWrite = JSON.stringify(this.schemaString, null, 2)
       var file = new Blob([dataToWrite], { type: "application/json" });
       var a = document.createElement("a"),
         url = URL.createObjectURL(file);
@@ -331,7 +331,7 @@ export default {
         " on " +
         Date() +
         ".graphql"
-      ).replace(".", "[dot]");
+      ).replace(/\./g, "[dot]");
       document.body.appendChild(a);
       a.click();
       this.$refs.downloadResponse.innerHTML = this.doneButton;

pages/index.vue

@@ -1737,7 +1737,7 @@ export default {
         this.method +
         "] on " +
         Date()
-      ).replace(".", "[dot]");
+      ).replace(/\./g, "[dot]");
       document.body.appendChild(a);
       a.click();
       this.$refs.downloadResponse.innerHTML = this.doneButton;

pages/websocket.vue

@@ -125,9 +125,29 @@
             </div>
           </ul>
         </pw-section>
-        <input type="text" name="" value="">
+        <pw-section
-        <button type="button" name="button" @click="start()"></button>
+          class="purple"
+          label="Communication"
+          id="response"
+          ref="response"
+        >
+          <ul>
+            <li>
+              <label for="log">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>(waiting for connection)</span>
+              </div>
               <div id="result"></div>
+            </li>
+          </ul>
+        </pw-section>
       </div>
     </section>
   </div>
@@ -174,7 +194,7 @@ export default {
         input: ""
       },
       connectionSSEState: false,
-      server: "wss://echo.websocket.org",
+      server: "https://wgrothaus.ucc.ie/~frank/cs3513/server_event_source.php",
       sse: null,
       events: {
         log: null,
@@ -203,7 +223,7 @@ export default {
     },
     serverValid() {
       const pattern = new RegExp(
-        "^(wss?:\\/\\/)?" +
+        "^(http(s)?:\\/\\/)?" +
           "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" +
           "((\\d{1,3}\\.){3}\\d{1,3}))" +
           "(\\:\\d+)?(\\/[-a-z\\d%_.~+@]*)*" +
@@ -275,7 +295,7 @@ export default {
       }
     },
     disconnect() {
-      if (this.socket != null) this.socket.close();
+      if (this.socket !== null) this.socket.close();
     },
     handleError(error) {
       this.disconnect();
@@ -286,7 +306,7 @@ export default {
         color: "#ff5555",
         ts: new Date().toLocaleTimeString()
       });
-      if (error != null)
+      if (error !== null)
         this.communication.log.push({
           payload: error,
           source: "info",
@@ -328,17 +348,88 @@ export default {
       else return this.stop();
     },
     start() {
+      this.events.log = [
+        {
+          payload: `Connecting to ${this.server}...`,
+          source: "info",
+          color: "var(--ac-color)"
+        }
+      ];
       if(typeof(EventSource) !== "undefined") {
-        var source = new EventSource("http://wgrothaus.ucc.ie/~frank/cs3513/server_event_source.php");
+        try {
-        source.onmessage = function(event) {
+          this.sse = new EventSource(this.server);
-          document.getElementById("result").innerHTML += event.data + "<br>";
+          this.sse.onopen = event => {
+            this.connectionSSEState = true;
+            this.events.log = [
+              {
+                payload: `Connected to ${this.server}.`,
+                source: "info",
+                color: "var(--ac-color)",
+                ts: new Date().toLocaleTimeString()
+              }
+            ];
+            this.$toast.success("Connected", {
+              icon: "sync"
+            });
           };
+          this.sse.onerror = event => {
+            this.handleSSEError();
+          };
+          this.sse.onclose = event => {
+            this.connectionSSEState = false;
+            this.events.log.push({
+              payload: `Disconnected from ${this.server}.`,
+              source: "info",
+              color: "#ff5555",
+              ts: new Date().toLocaleTimeString()
+            });
+            this.$toast.error("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("Something went wrong!", {
+            icon: "error"
+          });
+        }
       } else {
-        document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
+        this.events.log = [
+          {
+            payload: `This browser doesn't seems to have Server Sent Events support.`,
+            source: "info",
+            color: "#ff5555",
+            ts: new Date().toLocaleTimeString()
+          }
+        ];
       }
     },
+    handleSSEError(error) {
+      this.stop();
+      this.connectionSSEState = false;
+      this.events.log.push({
+        payload: `An error has 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() {
-      if (this.sse != null) this.sse.close();
+      if (this.sse !== null) this.sse.close();
     }
   },
   updated: function() {

store/postwoman.js

@@ -73,15 +73,18 @@ export const state = () => ({
 export const mutations = {
 
   applySetting(state, setting) {
-    if (setting == null || !(setting instanceof Array) || setting.length !== 2)
+    if (setting == null || !(setting instanceof Array) || setting.length !== 2) {
       throw new Error("You must provide a setting (array in the form [key, value])");
+    }
 
     const [key, value] = setting;
     // Do not just remove this check.
     // Add your settings key to the SETTINGS_KEYS array at the
     // top of the file.
     // This is to ensure that application settings remain documented.
-    if (!SETTINGS_KEYS.includes(key)) throw new Error("The settings structure does not include the key " + key);
+    if (!SETTINGS_KEYS.includes(key)) {
+      throw new Error("The settings structure does not include the key " + key);
+    }
 
     state.settings[key] = value;
   },
@@ -182,18 +185,22 @@ export const mutations = {
     const changedPlace = changedCollection || changedFolder
 
     // set new request
-    if (requestNewFolderIndex !== undefined)
+    if (requestNewFolderIndex !== undefined) {
       Vue.set(state.collections[requestNewCollectionIndex].folders[requestNewFolderIndex].requests, requestOldIndex, requestNew)
-    else
+    }
+    else {
       Vue.set(state.collections[requestNewCollectionIndex].requests, requestOldIndex, requestNew)
+    }
 
     // remove old request
     if (changedPlace) {
-      if (requestOldFolderIndex !== undefined)
+      if (requestOldFolderIndex !== undefined) {
         state.collections[requestOldCollectionIndex].folders[requestOldFolderIndex].requests.splice(requestOldIndex, 1)
-      else
+      }
+      else {
         state.collections[requestOldCollectionIndex].requests.splice(requestOldIndex, 1)
       }
+    }
   },
 
   saveRequestAs(state, payload) {
@@ -208,8 +215,9 @@ export const mutations = {
     const specifiedFolder = folderIndex !== undefined
     const specifiedRequest = requestIndex !== undefined
 
-    if (specifiedCollection && specifiedFolder && specifiedRequest)
+    if (specifiedCollection && specifiedFolder && specifiedRequest) {
       Vue.set(state.collections[collectionIndex].folders[folderIndex].requests, requestIndex, request)
+    }
     else if (specifiedCollection && specifiedFolder && !specifiedRequest) {
       const requests = state.collections[collectionIndex].folders[folderIndex].requests
       const lastRequestIndex = requests.length - 1;