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('
'+ body +'
'); + autoScrollBottom(); } else if(data.type === 1100) { var body = JSON.parse(data.body); $('#'+ data.id).before('! ') @@ -161,7 +162,7 @@ websocket.send(JSON.stringify(sendBody)); $('#websocketHistoryBox').append('
'+ $('#message').val() +'
'); $('#message').val(''); - + autoScrollBottom(); // } @@ -174,6 +175,10 @@ $('#sendBox').hide(); } + function autoScrollBottom() { + var websocketHistoryBox = document.getElementById('websocketHistoryBox'); + websocketHistoryBox.scrollTop = websocketHistoryBox.scrollHeight; + }