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

Websocket log auto scroll to bottom

Browse Source 
also added timestamp in the log
This commit is contained in:
pmankar
2019-08-29 01:20:20 +02:00
parent 0861a7f303
commit 11791deec5
1 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
pages/websocket.vue
View File

@@ -18,7 +18,7 @@
<label for="log">Log</label> <label for="log">Log</label>
<div id="log" name="log" class="log"> <div id="log" name="log" class="log">
<span v-if="communication.log"> <span v-if="communication.log">
<span v-for="logEntry in communication.log" :style="{ color: logEntry.color }">{{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span> <span v-for="logEntry in communication.log" :style="{ color: logEntry.color }">@ {{ logEntry.ts }} {{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span>
</span> </span>
<span v-else>(Waiting for connection...)</span> <span v-else>(Waiting for connection...)</span>
</div> </div>
@@ -113,7 +113,8 @@
this.communication.log = [{ this.communication.log = [{
payload: `Connected to ${this.url}.`, payload: `Connected to ${this.url}.`,
source: 'info', source: 'info',
color: 'lime' color: 'lime',
ts: (new Date()).toLocaleTimeString()
}]; }];
}; };
this.socket.onerror = (event) => { this.socket.onerror = (event) => {
@@ -124,13 +125,15 @@
this.communication.log.push({ this.communication.log.push({
payload: `Disconnected from ${this.url}.`, payload: `Disconnected from ${this.url}.`,
source: 'info', source: 'info',
color: 'red' color: 'red',
ts: (new Date()).toLocaleTimeString()
}); });
}; };
this.socket.onmessage = (event) => { this.socket.onmessage = (event) => {
this.communication.log.push({ this.communication.log.push({
payload: event.data, payload: event.data,
source: 'server' source: 'server',
ts: (new Date()).toLocaleTimeString()
}); });
} }
} catch (ex) { } catch (ex) {
@@ -146,12 +149,14 @@
this.communication.log.push({ this.communication.log.push({
payload: `An error has occurred.`, payload: `An error has occurred.`,
source: 'info', source: 'info',
color: 'red' color: 'red',
ts: (new Date()).toLocaleTimeString()
}); });
if (error != null) this.communication.log.push({ if (error != null) this.communication.log.push({
payload: error, payload: error,
source: 'info', source: 'info',
color: 'red' color: 'red',
ts: (new Date()).toLocaleTimeString()
}); });
}, },
sendMessage() { sendMessage() {
@@ -159,7 +164,8 @@
this.socket.send(message); this.socket.send(message);
this.communication.log.push({ this.communication.log.push({
payload: message, payload: message,
source: 'client' source: 'client',
ts: (new Date()).toLocaleTimeString()
}); });
this.communication.input = ""; this.communication.input = "";
}, },
@@ -172,15 +178,21 @@
getSourcePrefix(source) { getSourcePrefix(source) {
const sourceEmojis = { const sourceEmojis = {
// Source used for info messages. // Source used for info messages.
'info': 'ℹ️ [INFO]:\t', 'info': '\tℹ️ [INFO]:\t',
// Source used for client to server messages. // Source used for client to server messages.
'client': '👽 [SENT]:\t', 'client': '\t👽 [SENT]:\t',
// Source used for server to client messages. // Source used for server to client messages.
'server': '📥 [RECEIVED]:\t' 'server': '\t📥 [RECEIVED]:\t'
}; };
if (Object.keys(sourceEmojis).includes(source)) return sourceEmojis[source]; if (Object.keys(sourceEmojis).includes(source)) return sourceEmojis[source];
return ''; return '';
} }
},
updated: function () {
this.$nextTick(function () {
var divLog = document.getElementById("log")
divLog.scrollBy(0, divLog.scrollHeight + 100)
})
} }
} }