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

🚨 Lint

Browse Source
This commit is contained in:
Liyas Thomas
2019-11-02 11:02:21 +05:30
parent 9023e62fb4
commit b95eaf1aed
28 changed files with 1644 additions and 1496 deletions
Download Patch File Download Diff File Expand all files Collapse all files

317
pages/websocket.vue
View File

@@ -25,14 +25,9 @@
</ul>
</pw-section>
<br>
<br />
<pw-section
class="purple"
label="Communication"
id="response"
ref="response"
>
<pw-section class="purple" label="Communication" id="response" ref="response">
<ul>
<li>
<label for="log">Log</label>
@@ -74,176 +69,176 @@
</div>
</template>
<style 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;
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: 18px;
font-family: "Roboto Mono", monospace;
}
span {
display: block;
white-space: pre-wrap;
}
&,
span {
font-size: 18px;
font-family: "Roboto Mono", monospace;
}
span {
display: block;
white-space: pre-wrap;
}
}
</style>
<script>
import section from "../components/section";
export default {
components: {
"pw-section": section
},
data() {
return {
connectionState: false,
url: "wss://echo.websocket.org",
socket: null,
communication: {
log: null,
input: ""
}
};
},
computed: {
toggleConnectionVerb() {
return !this.connectionState ? "Connect" : "Disconnect";
},
urlValid() {
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.url);
import section from "../components/section";
export default {
components: {
"pw-section": section
},
data() {
return {
connectionState: false,
url: "wss://echo.websocket.org",
socket: null,
communication: {
log: null,
input: ""
}
};
},
computed: {
toggleConnectionVerb() {
return !this.connectionState ? "Connect" : "Disconnect";
},
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: `Connecting to ${this.url}...`,
source: "info",
color: "var(--ac-color)"
}
];
try {
this.socket = new WebSocket(this.url);
this.socket.onopen = event => {
this.connectionState = true;
this.communication.log = [
{
payload: `Connected to ${this.url}.`,
source: "info",
color: "var(--ac-color)",
ts: new Date().toLocaleTimeString()
}
];
this.$toast.success("Connected", {
icon: "sync"
});
};
this.socket.onerror = event => {
this.handleError();
};
this.socket.onclose = event => {
this.connectionState = false;
this.communication.log.push({
payload: `Disconnected from ${this.url}.`,
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
});
this.$toast.error("Disconnected", {
icon: "sync_disabled"
});
};
this.socket.onmessage = event => {
this.communication.log.push({
payload: event.data,
source: "server",
ts: new Date().toLocaleTimeString()
});
};
} catch (ex) {
this.handleError(ex);
this.$toast.error("Something went wrong!", {
icon: "error"
});
}
},
disconnect() {
if (this.socket != null) this.socket.close();
},
handleError(error) {
this.disconnect();
this.connectionState = false;
this.communication.log.push({
payload: `An error has occurred.`,
urlValid() {
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.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: `Connecting to ${this.url}...`,
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
});
if (error != null)
color: "var(--ac-color)"
}
];
try {
this.socket = new WebSocket(this.url);
this.socket.onopen = event => {
this.connectionState = true;
this.communication.log = [
{
payload: `Connected to ${this.url}.`,
source: "info",
color: "var(--ac-color)",
ts: new Date().toLocaleTimeString()
}
];
this.$toast.success("Connected", {
icon: "sync"
});
};
this.socket.onerror = event => {
this.handleError();
};
this.socket.onclose = event => {
this.connectionState = false;
this.communication.log.push({
payload: error,
payload: `Disconnected from ${this.url}.`,
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
});
},
sendMessage() {
const message = this.communication.input;
this.socket.send(message);
this.communication.log.push({
payload: message,
source: "client",
ts: new Date().toLocaleTimeString()
});
this.communication.input = "";
},
collapse({ target }) {
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"
this.$toast.error("Disconnected", {
icon: "sync_disabled"
});
};
if (Object.keys(sourceEmojis).includes(source))
return sourceEmojis[source];
return "";
this.socket.onmessage = event => {
this.communication.log.push({
payload: event.data,
source: "server",
ts: new Date().toLocaleTimeString()
});
};
} catch (ex) {
this.handleError(ex);
this.$toast.error("Something went wrong!", {
icon: "error"
});
}
},
updated: function() {
this.$nextTick(function() {
var divLog = document.getElementById("log");
divLog.scrollBy(0, divLog.scrollHeight + 100);
disconnect() {
if (this.socket != null) this.socket.close();
},
handleError(error) {
this.disconnect();
this.connectionState = false;
this.communication.log.push({
payload: `An error has 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 message = this.communication.input;
this.socket.send(message);
this.communication.log.push({
payload: message,
source: "client",
ts: new Date().toLocaleTimeString()
});
this.communication.input = "";
},
collapse({ target }) {
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 "";
}
};
},
updated: function() {
this.$nextTick(function() {
var divLog = document.getElementById("log");
divLog.scrollBy(0, divLog.scrollHeight + 100);
});
}
};
</script>