Make chat websocket javascript client more user friendly

Close #1611
This commit is contained in:
Konstantin Podsvirov
2019-05-18 13:31:17 +03:00
committed by Damian Jarek
parent 86176786c3
commit e5bad9cbc2
2 changed files with 10 additions and 8 deletions

View File

@@ -5,6 +5,7 @@ Version 256:
* Remove redundant use of `static_string` * Remove redundant use of `static_string`
* Remove redundant template in service_base * Remove redundant template in service_base
* Expand CI matrix using Azure Pipelines * Expand CI matrix using Azure Pipelines
* Make chat websocket javascript client more user friendly
-------------------------------------------------------------------------------- --------------------------------------------------------------------------------

View File

@@ -14,9 +14,7 @@
<button class="echo-button" id="connect">Connect</button> <button class="echo-button" id="connect">Connect</button>
<button class="echo-button" id="disconnect">Disconnect</button><br> <button class="echo-button" id="disconnect">Disconnect</button><br>
Your Name: <input class="draw-border" id="userName" size=47 style="margin-bottom: 5px;"><br> Your Name: <input class="draw-border" id="userName" size=47 style="margin-bottom: 5px;"><br>
<pre id="messages" style="width: 600px; height: 400px; white-space: normal; overflow: auto; border: solid 1px #cccccc; margin-bottom: 5px;"></pre>
<pre id="messages" style="width: 600px; height: 400px; border: solid 1px #cccccc; margin-bottom: 5px;"></pre>
<div style="margin-bottom: 5px;"> <div style="margin-bottom: 5px;">
Message<br> Message<br>
<input class="draw-border" id="sendMessage" size="74" value=""> <input class="draw-border" id="sendMessage" size="74" value="">
@@ -24,20 +22,23 @@
</div> </div>
<script> <script>
var ws = null; var ws = null;
function showMessage(msg) {
messages.innerText += msg + "\n";
messages.scrollTop = messages.scrollHeight - messages.clientHeight;
};
connect.onclick = function() { connect.onclick = function() {
ws = new WebSocket(uri.value); ws = new WebSocket(uri.value);
ws.onopen = function(ev) { ws.onopen = function(ev) {
messages.innerText += "[connection opened]\n"; showMessage("[connection opened]");
}; };
ws.onclose = function(ev) { ws.onclose = function(ev) {
messages.innerText += "[connection closed]\n"; showMessage("[connection closed]");
}; };
ws.onmessage = function(ev) { ws.onmessage = function(ev) {
messages.innerText += ev.data + "\n"; showMessage(ev.data);
}; };
ws.onerror = function(ev) { ws.onerror = function(ev) {
messages.innerText += "[error]\n"; showMessage("[error]");
console.log(ev); console.log(ev);
}; };
}; };