This commit is contained in:
CakeCN
2024-12-03 16:21:19 +08:00
commit 4198ca63b1
975 changed files with 333413 additions and 0 deletions

83
Html/static/js/chatbox.js Normal file
View File

@@ -0,0 +1,83 @@
var socket;
document.addEventListener('DOMContentLoaded', function() {
const data = window.appData;
console.log(data);
socket = io.connect(`http://172.21.20.148:5500?username=${data.username}&folder=${data.folder}`);
// 监听来自服务器的消息
socket.on('receive_message', function(data) {
// 显示服务器的回复消息
const serverMessage = document.createElement('div');
serverMessage.innerHTML = `<div class="chat-message server-message"><b>服务器:</b> ${marked.parse(data)}</div>`;
document.getElementById('chatbox').appendChild(serverMessage);
// 滚动到最新消息
document.getElementById('chatbox').scrollTop = document.getElementById('chatbox').scrollHeight;
});
});
// 控制文字大小的滑块
const fontSizeSlider = document.getElementById('fontSizeSlider');
const chatbox = document.getElementById('chatbox');
fontSizeSlider.addEventListener('input', function() {
console.log(fontSizeSlider.value);
chatbox.style.fontSize = fontSizeSlider.value + 'px';
});
// 语言切换按钮
const englishRadio = document.getElementById('english');
const chineseRadio = document.getElementById('chinese');
let language = 'en'; // 默认语言
// 切换语言事件
englishRadio.addEventListener('change', function() {
if (englishRadio.checked) language = 'en';
});
chineseRadio.addEventListener('change', function() {
if (chineseRadio.checked) language = 'zn';
});
function sendMessage() {
const input = document.getElementById('messageInput').value;
if (input.trim() === '') return;
// 创建一个新的消息元素
const newMessage = document.createElement('div');
newMessage.classList.add('chat-message');
newMessage.innerHTML = `<b>${language === 'en' ? 'You:' : '你:'}</b> ${input}`;
chatbox.appendChild(newMessage);
// 清空输入框
document.getElementById('messageInput').value = '';
// 滚动到最新消息
chatbox.scrollTop = chatbox.scrollHeight;
}
// 发送消息
function sendMessage() {
const input = document.getElementById('messageInput').value;
if (input.trim() === '') return;
// 使用 marked.js 解析 markdown
const markdownHtml = marked.parse(input);
// 显示用户发送的消息
const userMessage = document.createElement('div');
userMessage.innerHTML = `<div class="chat-message user-message"><b>你:</b> ${markdownHtml}</div>`;
document.getElementById('chatbox').appendChild(userMessage);
// 发送消息到服务器
socket.emit('send_message', input);
// 清空输入框
document.getElementById('messageInput').value = '';
// 滚动到最新消息
document.getElementById('chatbox').scrollTop = document.getElementById('chatbox').scrollHeight;
}