Browse Source

feat: 优化文字消息功能

master
欧醚 1 year ago
parent
commit
317ab81cc3
3 changed files with 31 additions and 3 deletions
  1. +11
    -0
      static/index.css
  2. +16
    -2
      static/index.js
  3. +4
    -1
      templates/homepage.html

+ 11
- 0
static/index.css View File

@ -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;

+ 16
- 2
static/index.js View File

@ -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) {

+ 4
- 1
templates/homepage.html View File

@ -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>

Loading…
Cancel
Save