From e5bad9cbc253038a859fa28f4d76680019c416d1 Mon Sep 17 00:00:00 2001
From: Konstantin Podsvirov <konstantin@podsvirov.pro>
Date: Sat, 18 May 2019 13:31:17 +0300
Subject: [PATCH] Make chat websocket javascript client more user friendly

Close #1611
---
 CHANGELOG.md                                    |  1 +
 .../server/chat-multi/chat_client.html          | 17 +++++++++--------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 32eac599..5b1af64e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@ Version 256:
 * Remove redundant use of `static_string`
 * Remove redundant template in service_base
 * Expand CI matrix using Azure Pipelines
+* Make chat websocket javascript client more user friendly
 
 --------------------------------------------------------------------------------
 
diff --git a/example/websocket/server/chat-multi/chat_client.html b/example/websocket/server/chat-multi/chat_client.html
index ce959ece..e6d99175 100644
--- a/example/websocket/server/chat-multi/chat_client.html
+++ b/example/websocket/server/chat-multi/chat_client.html
@@ -14,9 +14,7 @@
   <button class="echo-button" id="connect">Connect</button>
   <button class="echo-button" id="disconnect">Disconnect</button><br>
   Your Name: <input class="draw-border" id="userName" size=47 style="margin-bottom: 5px;"><br>
-
-  <pre id="messages" style="width: 600px; height: 400px; border: solid 1px #cccccc; margin-bottom: 5px;"></pre>
-
+  <pre id="messages" style="width: 600px; height: 400px; white-space: normal; overflow: auto; border: solid 1px #cccccc; margin-bottom: 5px;"></pre>
   <div style="margin-bottom: 5px;">
     Message<br>
     <input class="draw-border" id="sendMessage" size="74" value="">
@@ -24,20 +22,23 @@
   </div>
   <script>
     var ws = null;
-    
+    function showMessage(msg) {
+      messages.innerText += msg + "\n";
+      messages.scrollTop = messages.scrollHeight - messages.clientHeight;
+    };
     connect.onclick = function() {
       ws = new WebSocket(uri.value);
       ws.onopen = function(ev) {
-        messages.innerText += "[connection opened]\n";
+        showMessage("[connection opened]");
       };
       ws.onclose = function(ev) {
-        messages.innerText += "[connection closed]\n";
+        showMessage("[connection closed]");
       };
       ws.onmessage = function(ev) {
-        messages.innerText += ev.data + "\n";
+        showMessage(ev.data);
       };
       ws.onerror = function(ev) {
-        messages.innerText += "[error]\n";
+        showMessage("[error]");
         console.log(ev);
       };
     };