🔌 Add websocket page
This commit is contained in:
NBTX
225
pages/websocket.vue
Normal file
225
pages/websocket.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
|
||||
<fieldset class="request" ref="request">
|
||||
<legend v-on:click="collapse">Request ↕</legend>
|
||||
<div class="collapsible">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="url">URL</label>
|
||||
<input type="url" :class="{ error: !urlValid }" v-model="url" @keyup.enter="toggleConnection">
|
||||
</li>
|
||||
<li class="no-grow">
|
||||
<label for="action"> </label>
|
||||
<button class="action" :class="{ disabled: !urlValid }" name="action" @click="toggleConnection">{{ toggleConnectionVerb }}</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class="response" id="response" ref="response">
|
||||
<legend v-on:click="collapse">Communication ↕</legend>
|
||||
<div class="collapsible">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="body">Log</label>
|
||||
<div name="body" class="body" readonly>
|
||||
<span v-if="communication.log">
|
||||
<span v-for="logEntry in communication.log" :style="{ color: logEntry.color }">{{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span>
|
||||
</span>
|
||||
<span v-else>(Waiting for connection...)</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<label for="status">Message</label>
|
||||
<input name="status" type="text" v-model="communication.input" :readonly="!connectionState" @keyup.enter="sendMessage">
|
||||
</li>
|
||||
|
||||
<li class="no-grow">
|
||||
<label for="send"> </label>
|
||||
<button class="action" name="send" :class="{ disabled: !connectionState }" @click="sendMessage">Send</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.no-grow { flex-grow: 0; }
|
||||
.action {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
div.body {
|
||||
margin: 4px;
|
||||
padding: 8px 16px;
|
||||
width: calc(100% - 8px);
|
||||
border-radius: 4px;
|
||||
background-color: #000;
|
||||
color: var(--fg-color);
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
|
||||
&, span {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
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);
|
||||
}
|
||||
},
|
||||
|
||||
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: 'lime'
|
||||
}
|
||||
];
|
||||
|
||||
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: 'lime'
|
||||
}
|
||||
];
|
||||
};
|
||||
|
||||
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: 'red'
|
||||
});
|
||||
};
|
||||
|
||||
this.socket.onmessage = (event) => {
|
||||
this.communication.log.push({
|
||||
payload: event.data,
|
||||
source: 'server'
|
||||
});
|
||||
}
|
||||
}catch(ex){
|
||||
this.handleError(ex);
|
||||
}
|
||||
},
|
||||
|
||||
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: 'red'
|
||||
});
|
||||
if(error != null) this.communication.log.push({
|
||||
payload: error,
|
||||
source: 'info',
|
||||
color: 'red'
|
||||
});
|
||||
},
|
||||
|
||||
sendMessage () {
|
||||
const message = this.communication.input;
|
||||
|
||||
this.socket.send(message);
|
||||
this.communication.log.push({
|
||||
payload: message,
|
||||
source: 'client'
|
||||
});
|
||||
|
||||
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': 'ℹ️ [INFO]:\t',
|
||||
// Source used for client to server messages.
|
||||
'client': '👽 [SENT]:\t',
|
||||
// Source used for server to client messages.
|
||||
'server': '📥 [RECEIVED]:\t'
|
||||
};
|
||||
|
||||
if (Object.keys(sourceEmojis).includes(source)) return sourceEmojis[source];
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user