From f6752e9743c8a96f39d6dd946277228b9cd447a5 Mon Sep 17 00:00:00 2001 From: Liyas Thomas Date: Sun, 24 Nov 2019 18:45:26 +0530 Subject: [PATCH] SSE mvp --- assets/js/curlparser.js | 6 +-- build.js | 3 +- pages/graphql.vue | 4 +- pages/index.vue | 2 +- pages/websocket.vue | 117 +++++++++++++++++++++++++++++++++++----- store/postwoman.js | 22 +++++--- 6 files changed, 127 insertions(+), 27 deletions(-) diff --git a/assets/js/curlparser.js b/assets/js/curlparser.js index d9c1de445..601d0c7f9 100644 --- a/assets/js/curlparser.js +++ b/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; diff --git a/build.js b/build.js index 22ebe8164..ea7d91426 100644 --- a/build.js +++ b/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( diff --git a/pages/graphql.vue b/pages/graphql.vue index 6e8bea3e2..2add7ddce 100644 --- a/pages/graphql.vue +++ b/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; diff --git a/pages/index.vue b/pages/index.vue index eb78da41c..b8e719b3b 100644 --- a/pages/index.vue +++ b/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; diff --git a/pages/websocket.vue b/pages/websocket.vue index 70c932118..d512153a7 100644 --- a/pages/websocket.vue +++ b/pages/websocket.vue @@ -125,9 +125,29 @@ - - -
+ + + @@ -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"); - source.onmessage = function(event) { - document.getElementById("result").innerHTML += event.data + "
"; - }; + try { + this.sse = new EventSource(this.server); + 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() { diff --git a/store/postwoman.js b/store/postwoman.js index df3b2aa35..0229fa4de 100644 --- a/store/postwoman.js +++ b/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,17 +185,21 @@ 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) + } } }, @@ -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;