From 897e648b980ab6696e1715760106bc9b69a911a1 Mon Sep 17 00:00:00 2001
From: wanggeng <450292408@qq.com>
Date: Tue, 14 Sep 2021 11:43:58 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4IM=20Demo=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/main/resources/templates/chat-demo.html          | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/module-instant-message/src/main/resources/templates/chat-demo.html b/module-instant-message/src/main/resources/templates/chat-demo.html
index dc995ade..acbfcaea 100644
--- a/module-instant-message/src/main/resources/templates/chat-demo.html
+++ b/module-instant-message/src/main/resources/templates/chat-demo.html
@@ -10,7 +10,7 @@
         .websocket-container {width: 295px;}
         .websocket-history-box {height: 400px; border: 1px solid silver; overflow: auto;}
         .websocket-box {padding: 5px 0; text-align: right;}
-        .message {display: inline-block; max-width: 195px; font-size: 13px; margin: 10px; padding: 5px; border-radius: 5px;}
+        .message {display: inline-block; max-width: 195px; font-size: 13px; margin: 10px; padding: 5px; border-radius: 5px;word-wrap: break-word; word-break: normal;}
         .receive-msg-box {}
         .receive-msg {background-color: #04b304; color: #FFFFFF;}
         .send-msg-box {text-align: right;}
@@ -104,6 +104,7 @@
                 } else if(data.type === 101) {
                     var body = data.body;
                     $('#websocketHistoryBox').append('<div class="receive-msg-box"><div class="message receive-msg">'+ body +'</div></div>');
+                    autoScrollBottom();
                 } else if(data.type === 1100) {
                     var body = JSON.parse(data.body);
                     $('#'+ data.id).before('<span class="send-status" title="'+ body.msg +'">!</span> ')
@@ -161,7 +162,7 @@
             websocket.send(JSON.stringify(sendBody));
             $('#websocketHistoryBox').append('<div class="send-msg-box"><div id="'+ sendId +'" class="message send-msg">'+ $('#message').val() +'</div></div>');
             $('#message').val('');
-
+            autoScrollBottom();
             //
         }
 
@@ -174,6 +175,10 @@
             $('#sendBox').hide();
         }
 
+        function autoScrollBottom() {
+            var websocketHistoryBox = document.getElementById('websocketHistoryBox');
+            websocketHistoryBox.scrollTop = websocketHistoryBox.scrollHeight;
+        }
     </script>
 
 </body>