feat: 优化文字消息功能

static/index.css

@@ -99,6 +99,17 @@ p:not(:hover) .logout-link {
   color: white;
 }
 
+#chat-box p {
+  margin: 5px 10px;
+}
+
+#chat-box {
+  background: #fff8;
+  overflow: auto;
+  max-height: 200px;
+  min-height: 100px;
+}
+
 .footer {
   background: black;
   color: white;

static/index.js

@@ -20,6 +20,12 @@ var options = {
 };
 
 
+function add_chat_text(s) {
+  $('#chat-box').append($('<p></p>').text(s));
+  $('#chat-box').animate({
+      scrollTop: $("#chat-box")[0].scrollHeight
+    }, 300);
+}
 
 $('.leave-btn').hide();
 
@@ -36,7 +42,7 @@ $('.send-message').submit(async function (e) {
   }
   var inp = $(this).find('input');
   rtm_channel.sendMessage({'text': inp.val()}).then(() => {
-    $('#part2').append($('<p></p>').text(window._MY_NAME + ': ' + inp.val()));
+    add_chat_text(window._MY_NAME + ': ' + inp.val());
     inp.val('');
   }).catch(error => {
     alert('发送失败', error);
@@ -60,9 +66,15 @@ $('.join-form').submit(async function (e) {
     rtm_channel.on('ChannelMessage', (message, user) => {
       console.log(message, user);
       if (message.messageType === 'TEXT') {
-        $('#part2').append($('<p></p>').text(user + ': ' + message.text));
+        add_chat_text(user + ': ' + message.text);
       }
     });
+    rtm_channel.on('MemberJoined', memberId => {
+      add_chat_text(`[${memberId} 加入了]`)
+    });
+    rtm_channel.on('MemberLeft', memberId => {
+      add_chat_text(`[${memberId} 离开了]`)
+    });
   } catch (error) {
     console.error(error);
     alert('出错啦\n' + error);
@@ -74,6 +86,8 @@ $('.join-form').submit(async function (e) {
 $(".leave-btn").click(function (e) {
   leave();
   rtm_channel.leave();
+  rtm_channel = null;
+  $('#chat-box').empty();
 })
 
 function set_soundmeter(ele, at) {

templates/homepage.html

@@ -29,7 +29,7 @@
               {% if is_private and not _cid %}
                【非公开】
               {% else %}
-              创建者: <a href="{{user.url}}" target="_blank"><img class="rounded-circle" src="{{user.avat}}" width="20"></a>
+              第一发言者: <a href="{{user.url}}" target="_blank"><img class="rounded-circle" src="{{user.avat}}" width="20"></a>
               <form class="join-form" id="form-{{cid}}">
                 <input type="hidden" name="channel" value="{{cid}}">
                 <input type="hidden" name="token" value="{{token}}">
@@ -94,6 +94,9 @@
       </div>
       <div id="remote-playerlist">
       </div>
+      <h5>文字区</h5>
+      <div class="qbox" id="chat-box">
+      </div>
     </div>
 
   </div>