btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

🎉 Initial SSE MVP

Browse Source
This commit is contained in:
Liyas Thomas
2019-11-24 08:48:50 +05:30
parent 1dbea4d39a
commit 873b97b052
1 changed files with 160 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
pages/websocket.vue
View File

@@ -1,94 +1,135 @@
<template> <template>
<div class="page"> <div class="page">
<pw-section class="blue" label="Request" ref="request"> <section id="options">
<ul> <input id="tab-one" type="radio" name="options" checked="checked" />
<li> <label for="tab-one">WebSocket</label>
<label for="url">URL</label> <div class="tab">
<input <pw-section class="blue" label="Request" ref="request">
id="url" <ul>
type="url" <li>
:class="{ error: !urlValid }" <label for="url">URL</label>
v-model="url" <input
@keyup.enter="urlValid ? toggleConnection() : null" id="url"
/> type="url"
</li> :class="{ error: !urlValid }"
<div> v-model="url"
<li> @keyup.enter="urlValid ? toggleConnection() : null"
<label for="connect" class="hide-on-small-screen">&nbsp;</label> />
<button </li>
:disabled="!urlValid" <div>
id="connect" <li>
name="connect" <label for="connect" class="hide-on-small-screen">&nbsp;</label>
@click="toggleConnection" <button
> :disabled="!urlValid"
{{ toggleConnectionVerb }} id="connect"
<span> name="connect"
<i class="material-icons" v-if="!connectionState">sync</i> @click="toggleConnection"
<i class="material-icons" v-if="connectionState"
>sync_disabled</i
> >
</span> {{ toggleConnectionVerb }}
</button> <span>
</li> <i class="material-icons" v-if="!connectionState">sync</i>
</div> <i class="material-icons" v-if="connectionState"
</ul> >sync_disabled</i
</pw-section> >
</span>
<pw-section </button>
class="purple" </li>
label="Communication" </div>
id="response" </ul>
ref="response" </pw-section>
> <pw-section
<ul> class="purple"
<li> label="Communication"
<label for="log">Log</label> id="response"
<div id="log" name="log" class="log"> ref="response"
<span v-if="communication.log"> >
<span <ul>
v-for="(logEntry, index) in communication.log" <li>
:style="{ color: logEntry.color }" <label for="log">Log</label>
:key="index" <div id="log" name="log" class="log">
>@ {{ logEntry.ts }} {{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span> <span v-if="communication.log">
</span> <span
<span v-else>(waiting for connection)</span> v-for="(logEntry, index) in communication.log"
</div> :style="{ color: logEntry.color }"
</li> :key="index"
</ul> >@ {{ logEntry.ts }} {{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span>
<ul> </span>
<li> <span v-else>(waiting for connection)</span>
<label for="message">Message</label> </div>
<input </li>
id="message" </ul>
name="message" <ul>
type="text" <li>
v-model="communication.input" <label for="message">Message</label>
:readonly="!connectionState" <input
@keyup.enter="connectionState ? sendMessage() : null" id="message"
/> name="message"
</li> type="text"
<div> v-model="communication.input"
<li> :readonly="!connectionState"
<label for="send" class="hide-on-small-screen">&nbsp;</label> @keyup.enter="connectionState ? sendMessage() : null"
<button />
id="send" </li>
name="send" <div>
:disabled="!connectionState" <li>
@click="sendMessage" <label for="send" class="hide-on-small-screen">&nbsp;</label>
> <button
Send id="send"
<span> name="send"
<i class="material-icons">send</i> :disabled="!connectionState"
</span> @click="sendMessage"
</button> >
</li> Send
</div> <span>
</ul> <i class="material-icons">send</i>
</span>
<input type="text" name="" value=""> </button>
<button type="button" name="button" @click="start()"></button> </li>
<div id="result"></div> </div>
</pw-section> </ul>
</pw-section>
</div>
<input id="tab-two" type="radio" name="options" />
<label for="tab-two">SSE</label>
<div class="tab">
<pw-section class="blue" label="Request" ref="request">
<ul>
<li>
<label for="server">Server</label>
<input
id="server"
type="url"
:class="{ error: !serverValid }"
v-model="server"
@keyup.enter="serverValid ? toggleSSEConnection() : null"
/>
</li>
<div>
<li>
<label for="start" class="hide-on-small-screen">&nbsp;</label>
<button
:disabled="!serverValid"
id="start"
name="start"
@click="toggleSSEConnection"
>
{{ toggleSSEConnectionVerb }}
<span>
<i class="material-icons" v-if="!connectionSSEState">sync</i>
<i class="material-icons" v-if="connectionSSEState"
>sync_disabled</i
>
</span>
</button>
</li>
</div>
</ul>
</pw-section>
<input type="text" name="" value="">
<button type="button" name="button" @click="start()"></button>
<div id="result"></div>
</div>
</section>
</div> </div>
</template> </template>
<style lang="scss"> <style lang="scss">
@@ -131,6 +172,13 @@ export default {
communication: { communication: {
log: null, log: null,
input: "" input: ""
},
connectionSSEState: false,
server: "wss://echo.websocket.org",
sse: null,
events: {
log: null,
input: ""
} }
}; };
}, },
@@ -149,6 +197,21 @@ export default {
"i" "i"
); );
return pattern.test(this.url); return pattern.test(this.url);
},
toggleSSEConnectionVerb() {
return !this.connectionSSEState ? "Start" : "Stop";
},
serverValid() {
const pattern = new RegExp(
"^(wss?:\\/\\/)?" +
"((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" +
"((\\d{1,3}\\.){3}\\d{1,3}))" +
"(\\:\\d+)?(\\/[-a-z\\d%_.~+@]*)*" +
"(\\?[;&a-z\\d%_.~+=-]*)?" +
"(\\#[-a-z\\d_]*)?$",
"i"
);
return pattern.test(this.server);
} }
}, },
methods: { methods: {
@@ -258,6 +321,12 @@ export default {
return sourceEmojis[source]; return sourceEmojis[source];
return ""; return "";
}, },
toggleSSEConnection() {
// If it is connecting:
if (!this.connectionSSEState) return this.start();
// Otherwise, it's disconnecting.
else return this.stop();
},
start() { start() {
if(typeof(EventSource) !== "undefined") { if(typeof(EventSource) !== "undefined") {
var source = new EventSource("http://wgrothaus.ucc.ie/~frank/cs3513/server_event_source.php"); var source = new EventSource("http://wgrothaus.ucc.ie/~frank/cs3513/server_event_source.php");
@@ -267,6 +336,9 @@ export default {
} else { } else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events..."; document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
} }
},
stop() {
if (this.sse != null) this.sse.close();
} }
}, },
updated: function() { updated: function() {