theliu
851 lines
28 KiB
JavaScript
851 lines
28 KiB
JavaScript
class WebWeChat {
|
|
constructor() {
|
|
this.socket = null;
|
|
this.currentUser = null;
|
|
self.currentContact = null;
|
|
this.contacts = [];
|
|
this.activeCall = null;
|
|
this.callTimer = null;
|
|
this.callStartTime = null;
|
|
this.peerConnection = null;
|
|
this.localStream = null;
|
|
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
this.initSocket();
|
|
this.bindEvents();
|
|
this.loadContacts();
|
|
this.setupWebRTC();
|
|
// 如果是移动设备（窄屏），默认打开联系人侧栏以便选择对话
|
|
if (window.innerWidth <= 768) {
|
|
this.showContactsSidebar();
|
|
}
|
|
}
|
|
|
|
initSocket() {
|
|
// 连接WebSocket服务器
|
|
this.socket = io({
|
|
transports: ['websocket', 'polling'],
|
|
reconnection: true,
|
|
reconnectionAttempts: 5
|
|
});
|
|
|
|
// Socket事件监听
|
|
this.socket.on('connect', () => {
|
|
console.log('WebSocket连接成功');
|
|
this.authenticate();
|
|
});
|
|
|
|
this.socket.on('disconnect', () => {
|
|
console.log('WebSocket断开连接');
|
|
});
|
|
|
|
this.socket.on('user_status', (data) => {
|
|
this.updateUserStatus(data.account, data.online);
|
|
});
|
|
|
|
this.socket.on('private_message', (data) => {
|
|
this.receiveMessage(data);
|
|
});
|
|
|
|
this.socket.on('private_message_sent', (data) => {
|
|
console.log('消息已发送:', data);
|
|
});
|
|
|
|
this.socket.on('incoming_call', (data) => {
|
|
this.handleIncomingCall(data);
|
|
});
|
|
|
|
this.socket.on('call_accepted', (data) => {
|
|
this.handleCallAccepted(data);
|
|
});
|
|
|
|
this.socket.on('call_ended', (data) => {
|
|
this.handleCallEnded(data);
|
|
});
|
|
|
|
this.socket.on('webrtc_signal', (signal) => {
|
|
this.handleWebRTCSignal(signal);
|
|
});
|
|
|
|
this.socket.on('file_received', (data) => {
|
|
this.showFileNotification(data);
|
|
});
|
|
}
|
|
|
|
authenticate() {
|
|
// 从localStorage获取用户信息
|
|
const account = localStorage.getItem('user_account');
|
|
if (account) {
|
|
this.socket.emit('authenticate', { account: account });
|
|
this.currentUser = account;
|
|
}
|
|
}
|
|
|
|
bindEvents() {
|
|
// 发送消息
|
|
document.getElementById('sendBtn').addEventListener('click', () => {
|
|
this.sendMessage();
|
|
});
|
|
|
|
document.getElementById('messageInput').addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault();
|
|
this.sendMessage();
|
|
}
|
|
});
|
|
|
|
// 语音通话
|
|
document.getElementById('voiceCallBtn').addEventListener('click', () => {
|
|
this.startVoiceCall();
|
|
});
|
|
|
|
document.getElementById('endCallBtn').addEventListener('click', () => {
|
|
this.endCall();
|
|
});
|
|
|
|
document.getElementById('answerCallBtn').addEventListener('click', () => {
|
|
this.answerCall();
|
|
});
|
|
|
|
// 文件上传
|
|
document.getElementById('fileUploadBtn').addEventListener('click', () => {
|
|
this.showFileUploadModal();
|
|
});
|
|
|
|
document.getElementById('selectFileBtn').addEventListener('click', () => {
|
|
document.getElementById('fileInput').click();
|
|
});
|
|
|
|
document.getElementById('fileInput').addEventListener('change', (e) => {
|
|
this.handleFileSelect(e.target.files[0]);
|
|
});
|
|
|
|
// 联系人列表
|
|
document.querySelectorAll('[data-tab="contacts"]').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
this.showContactsSidebar();
|
|
});
|
|
});
|
|
|
|
document.getElementById('closeContactsBtn').addEventListener('click', () => {
|
|
this.hideContactsSidebar();
|
|
});
|
|
|
|
// 手机端顶部打开联系人按钮
|
|
const openContactsBtn = document.getElementById('openContactsBtn');
|
|
if (openContactsBtn) {
|
|
openContactsBtn.addEventListener('click', () => {
|
|
this.showContactsSidebar();
|
|
});
|
|
}
|
|
|
|
// 文件列表
|
|
document.querySelectorAll('[data-tab="files"]').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
this.showFilesSidebar();
|
|
});
|
|
});
|
|
|
|
document.getElementById('closeFilesBtn').addEventListener('click', () => {
|
|
this.hideFilesSidebar();
|
|
});
|
|
|
|
// 关闭文件上传模态框
|
|
document.getElementById('closeFileModal').addEventListener('click', () => {
|
|
this.hideFileUploadModal();
|
|
});
|
|
|
|
// 拖放文件上传
|
|
const uploadArea = document.getElementById('uploadArea');
|
|
uploadArea.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
uploadArea.style.borderColor = '#0a84ff';
|
|
});
|
|
|
|
uploadArea.addEventListener('dragleave', () => {
|
|
uploadArea.style.borderColor = '#38383a';
|
|
});
|
|
|
|
uploadArea.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
uploadArea.style.borderColor = '#38383a';
|
|
const file = e.dataTransfer.files[0];
|
|
if (file) {
|
|
this.handleFileSelect(file);
|
|
}
|
|
});
|
|
}
|
|
|
|
loadContacts() {
|
|
// 从API加载联系人
|
|
fetch('/api/users')
|
|
.then(response => response.json())
|
|
.then(contacts => {
|
|
this.contacts = contacts;
|
|
this.renderContacts();
|
|
})
|
|
.catch(error => {
|
|
console.error('加载联系人失败:', error);
|
|
});
|
|
}
|
|
|
|
renderContacts() {
|
|
const contactsList = document.getElementById('contactsList');
|
|
const chatList = document.getElementById('chatList');
|
|
|
|
contactsList.innerHTML = '';
|
|
chatList.innerHTML = '';
|
|
|
|
this.contacts.forEach(contact => {
|
|
// 联系人侧边栏
|
|
const contactItem = document.createElement('div');
|
|
contactItem.className = 'contact-item';
|
|
contactItem.innerHTML = `
|
|
<div class="chat-item-avatar">
|
|
<i class="fas fa-user-circle"></i>
|
|
</div>
|
|
<div class="chat-item-info">
|
|
<div class="chat-item-name">
|
|
${contact.name}
|
|
<span class="contact-status ${contact.online ? 'online' : 'offline'}"></span>
|
|
</div>
|
|
<div class="chat-item-last-message">${contact.org}</div>
|
|
</div>
|
|
`;
|
|
contactItem.addEventListener('click', () => {
|
|
this.selectContact(contact);
|
|
this.hideContactsSidebar();
|
|
});
|
|
contactsList.appendChild(contactItem);
|
|
|
|
// 聊天列表
|
|
const chatItem = document.createElement('div');
|
|
chatItem.className = 'chat-item';
|
|
chatItem.innerHTML = `
|
|
<div class="chat-item-avatar">
|
|
<i class="fas fa-user-circle"></i>
|
|
</div>
|
|
<div class="chat-item-info">
|
|
<div class="chat-item-name">
|
|
${contact.name}
|
|
<span class="contact-status ${contact.online ? 'online' : 'offline'}"></span>
|
|
</div>
|
|
<div class="chat-item-last-message">${contact.org}</div>
|
|
</div>
|
|
`;
|
|
chatItem.addEventListener('click', () => {
|
|
this.selectContact(contact);
|
|
});
|
|
chatList.appendChild(chatItem);
|
|
});
|
|
}
|
|
|
|
selectContact(contact) {
|
|
this.currentContact = contact;
|
|
|
|
// 更新UI
|
|
document.getElementById('partnerName').textContent = contact.name;
|
|
document.getElementById('partnerStatus').textContent =
|
|
contact.online ? '在线' : '离线';
|
|
document.getElementById('partnerStatus').style.color =
|
|
contact.online ? '#30d158' : '#6c6c70';
|
|
|
|
// 启用通话按钮
|
|
document.getElementById('voiceCallBtn').disabled = !contact.online;
|
|
|
|
// 显示聊天区域
|
|
this.showChatArea();
|
|
|
|
// 加载聊天历史（这里简化处理）
|
|
this.loadChatHistory(contact.account);
|
|
}
|
|
|
|
showChatArea() {
|
|
// 隐藏欢迎消息，显示聊天消息区域
|
|
const welcomeMsg = document.querySelector('.welcome-message');
|
|
if (welcomeMsg) {
|
|
welcomeMsg.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
sendMessage() {
|
|
const input = document.getElementById('messageInput');
|
|
const message = input.value.trim();
|
|
|
|
if (!message || !this.currentContact) return;
|
|
|
|
// 发送消息
|
|
this.socket.emit('private_message', {
|
|
to: this.currentContact.account,
|
|
from: this.currentUser,
|
|
message: message
|
|
});
|
|
|
|
// 在界面上显示消息
|
|
this.addMessage({
|
|
from: this.currentUser,
|
|
message: message,
|
|
timestamp: Date.now() / 1000,
|
|
isOwn: true
|
|
});
|
|
|
|
// 清空输入框
|
|
input.value = '';
|
|
this.adjustTextareaHeight(input);
|
|
}
|
|
|
|
receiveMessage(data) {
|
|
// 如果是当前联系人的消息，直接显示
|
|
if (data.from === this.currentContact?.account) {
|
|
this.addMessage({
|
|
from: data.from,
|
|
message: data.message,
|
|
timestamp: data.timestamp,
|
|
isOwn: false
|
|
});
|
|
} else {
|
|
// 显示通知
|
|
this.showNotification(`收到来自 ${data.from} 的新消息`);
|
|
}
|
|
}
|
|
|
|
addMessage(data) {
|
|
const messagesContainer = document.getElementById('chatMessages');
|
|
const messageDiv = document.createElement('div');
|
|
messageDiv.className = `message ${data.isOwn ? 'sent' : 'received'}`;
|
|
|
|
const contact = this.contacts.find(c => c.account === data.from);
|
|
const contactName = contact ? contact.name : data.from;
|
|
|
|
const time = new Date(data.timestamp * 1000);
|
|
const timeStr = time.toLocaleTimeString('zh-CN', {
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
});
|
|
|
|
messageDiv.innerHTML = `
|
|
<div class="message-avatar">
|
|
<i class="fas fa-user-circle"></i>
|
|
</div>
|
|
<div class="message-content">
|
|
<div class="message-text">${this.escapeHtml(data.message)}</div>
|
|
<div class="message-time">${timeStr}</div>
|
|
</div>
|
|
`;
|
|
|
|
messagesContainer.appendChild(messageDiv);
|
|
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
|
}
|
|
|
|
escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
adjustTextareaHeight(textarea) {
|
|
textarea.style.height = 'auto';
|
|
textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
|
|
}
|
|
|
|
startVoiceCall() {
|
|
if (!this.currentContact || !this.currentContact.online) return;
|
|
|
|
const callId = 'call_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
|
|
|
|
this.activeCall = {
|
|
id: callId,
|
|
partner: this.currentContact.account,
|
|
type: 'voice'
|
|
};
|
|
|
|
// 显示通话界面
|
|
this.showCallInterface();
|
|
document.getElementById('callPartnerName').textContent = this.currentContact.name;
|
|
document.getElementById('callStatus').textContent = '正在呼叫...';
|
|
document.getElementById('answerCallBtn').style.display = 'none';
|
|
|
|
// 通知对方
|
|
this.socket.emit('start_call', {
|
|
call_id: callId,
|
|
to: this.currentContact.account,
|
|
from: this.currentUser
|
|
});
|
|
|
|
// 开始获取本地音频流
|
|
this.startLocalStream();
|
|
}
|
|
|
|
handleIncomingCall(data) {
|
|
// 找到联系人
|
|
const contact = this.contacts.find(c => c.account === data.from);
|
|
if (!contact) return;
|
|
|
|
this.activeCall = {
|
|
id: data.call_id,
|
|
partner: data.from,
|
|
type: 'incoming'
|
|
};
|
|
|
|
// 显示来电界面
|
|
this.showCallInterface();
|
|
document.getElementById('callPartnerName').textContent = contact.name;
|
|
document.getElementById('callStatus').textContent = '来电中...';
|
|
document.getElementById('answerCallBtn').style.display = 'flex';
|
|
|
|
// 播放铃声
|
|
this.playRingtone();
|
|
}
|
|
|
|
answerCall() {
|
|
if (!this.activeCall) return;
|
|
|
|
this.stopRingtone();
|
|
|
|
// 通知对方已接听
|
|
this.socket.emit('answer_call', {
|
|
call_id: this.activeCall.id
|
|
});
|
|
|
|
// 开始通话计时
|
|
this.startCallTimer();
|
|
document.getElementById('callStatus').textContent = '通话中...';
|
|
document.getElementById('answerCallBtn').style.display = 'none';
|
|
|
|
// 开始获取本地音频流并在就绪后建立WebRTC连接
|
|
this.startLocalStream()
|
|
.then(() => {
|
|
this.setupWebRTCCall();
|
|
})
|
|
.catch(() => {
|
|
console.error('无法获取本地音频，无法建立通话');
|
|
});
|
|
}
|
|
|
|
endCall() {
|
|
if (!this.activeCall) return;
|
|
|
|
this.stopRingtone();
|
|
this.stopCallTimer();
|
|
|
|
// 通知对方结束通话
|
|
this.socket.emit('end_call', {
|
|
call_id: this.activeCall.id
|
|
});
|
|
|
|
// 关闭本地流
|
|
if (this.localStream) {
|
|
this.localStream.getTracks().forEach(track => track.stop());
|
|
this.localStream = null;
|
|
}
|
|
|
|
// 关闭PeerConnection
|
|
if (this.peerConnection) {
|
|
this.peerConnection.close();
|
|
this.peerConnection = null;
|
|
}
|
|
|
|
// 隐藏通话界面
|
|
this.hideCallInterface();
|
|
this.activeCall = null;
|
|
}
|
|
|
|
handleCallAccepted(data) {
|
|
if (!this.activeCall || this.activeCall.id !== data.call_id) return;
|
|
|
|
// 开始通话计时
|
|
this.startCallTimer();
|
|
document.getElementById('callStatus').textContent = '通话中...';
|
|
|
|
// 确保本地音频就绪后建立WebRTC连接并创建offer
|
|
this.startLocalStream()
|
|
.then(() => {
|
|
this.setupWebRTCCall();
|
|
})
|
|
.catch(() => {
|
|
console.error('无法获取本地音频，无法建立通话');
|
|
});
|
|
}
|
|
|
|
handleCallEnded(data) {
|
|
if (this.activeCall && this.activeCall.id === data.call_id) {
|
|
this.endCall();
|
|
}
|
|
}
|
|
|
|
showCallInterface() {
|
|
document.getElementById('callInterface').style.display = 'flex';
|
|
}
|
|
|
|
hideCallInterface() {
|
|
document.getElementById('callInterface').style.display = 'none';
|
|
}
|
|
|
|
startCallTimer() {
|
|
this.callStartTime = Date.now();
|
|
this.callTimer = setInterval(() => {
|
|
const elapsed = Date.now() - this.callStartTime;
|
|
const minutes = Math.floor(elapsed / 60000);
|
|
const seconds = Math.floor((elapsed % 60000) / 1000);
|
|
document.getElementById('callTimer').textContent =
|
|
`${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
|
|
}, 1000);
|
|
}
|
|
|
|
stopCallTimer() {
|
|
if (this.callTimer) {
|
|
clearInterval(this.callTimer);
|
|
this.callTimer = null;
|
|
}
|
|
}
|
|
|
|
playRingtone() {
|
|
// 这里可以添加铃声播放逻辑
|
|
console.log('播放铃声');
|
|
}
|
|
|
|
stopRingtone() {
|
|
// 停止铃声
|
|
console.log('停止铃声');
|
|
}
|
|
|
|
setupWebRTC() {
|
|
// 简单的WebRTC配置
|
|
this.peerConnectionConfig = {
|
|
iceServers: [
|
|
{ urls: 'stun:stun.l.google.com:19302' }
|
|
]
|
|
};
|
|
}
|
|
|
|
startLocalStream() {
|
|
return navigator.mediaDevices.getUserMedia({
|
|
audio: true,
|
|
video: false
|
|
})
|
|
.then(stream => {
|
|
this.localStream = stream;
|
|
const localAudio = document.getElementById('localAudio');
|
|
if (localAudio) {
|
|
localAudio.srcObject = stream;
|
|
}
|
|
return stream;
|
|
})
|
|
.catch(error => {
|
|
console.error('获取音频流失败:', error);
|
|
throw error;
|
|
});
|
|
}
|
|
|
|
setupWebRTCCall() {
|
|
this.peerConnection = new RTCPeerConnection(this.peerConnectionConfig);
|
|
|
|
// 添加本地音频流
|
|
if (this.localStream) {
|
|
this.localStream.getTracks().forEach(track => {
|
|
this.peerConnection.addTrack(track, this.localStream);
|
|
});
|
|
}
|
|
|
|
// 处理远程流
|
|
this.peerConnection.ontrack = (event) => {
|
|
const remoteAudio = document.getElementById('remoteAudio');
|
|
if (remoteAudio) {
|
|
remoteAudio.srcObject = event.streams[0];
|
|
}
|
|
};
|
|
|
|
// 处理ICE候选
|
|
this.peerConnection.onicecandidate = (event) => {
|
|
if (event.candidate) {
|
|
this.socket.emit('webrtc_signal', {
|
|
to: this.activeCall.partner,
|
|
signal: {
|
|
type: 'candidate',
|
|
candidate: event.candidate
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
// 如果是发起方，创建offer
|
|
if (this.activeCall.type === 'voice') {
|
|
this.peerConnection.createOffer()
|
|
.then(offer => this.peerConnection.setLocalDescription(offer))
|
|
.then(() => {
|
|
this.socket.emit('webrtc_signal', {
|
|
to: this.activeCall.partner,
|
|
signal: {
|
|
type: 'offer',
|
|
sdp: this.peerConnection.localDescription
|
|
}
|
|
});
|
|
})
|
|
.catch(error => {
|
|
console.error('创建offer失败:', error);
|
|
});
|
|
}
|
|
}
|
|
|
|
handleWebRTCSignal(signal) {
|
|
if (!this.peerConnection) return;
|
|
|
|
switch (signal.type) {
|
|
case 'offer': {
|
|
const desc = signal.sdp || signal;
|
|
this.peerConnection.setRemoteDescription(new RTCSessionDescription(desc))
|
|
.then(() => this.peerConnection.createAnswer())
|
|
.then(answer => this.peerConnection.setLocalDescription(answer))
|
|
.then(() => {
|
|
this.socket.emit('webrtc_signal', {
|
|
to: this.activeCall.partner,
|
|
signal: {
|
|
type: 'answer',
|
|
sdp: this.peerConnection.localDescription
|
|
}
|
|
});
|
|
})
|
|
.catch(error => {
|
|
console.error('处理offer失败:', error);
|
|
});
|
|
break;
|
|
}
|
|
case 'answer': {
|
|
const desc = signal.sdp || signal;
|
|
this.peerConnection.setRemoteDescription(new RTCSessionDescription(desc))
|
|
.catch(error => {
|
|
console.error('处理answer失败:', error);
|
|
});
|
|
break;
|
|
}
|
|
case 'candidate': {
|
|
const candidate = signal.candidate || signal;
|
|
this.peerConnection.addIceCandidate(new RTCIceCandidate(candidate))
|
|
.catch(error => {
|
|
console.error('添加ICE候选失败:', error);
|
|
});
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
showFileUploadModal() {
|
|
document.getElementById('fileUploadModal').style.display = 'flex';
|
|
}
|
|
|
|
hideFileUploadModal() {
|
|
document.getElementById('fileUploadModal').style.display = 'none';
|
|
document.getElementById('filePreview').innerHTML = '';
|
|
document.getElementById('fileInput').value = '';
|
|
}
|
|
|
|
async handleFileSelect(file) {
|
|
if (!file) return;
|
|
|
|
// 显示文件预览
|
|
const filePreview = document.getElementById('filePreview');
|
|
filePreview.innerHTML = `
|
|
<div class="file-item">
|
|
<div class="file-icon">
|
|
<i class="fas fa-file"></i>
|
|
</div>
|
|
<div class="file-info">
|
|
<div class="file-name">${file.name}</div>
|
|
<div class="file-size">${this.formatFileSize(file.size)}</div>
|
|
</div>
|
|
<button class="upload-btn" id="uploadFileBtn">发送</button>
|
|
</div>
|
|
`;
|
|
|
|
// 添加发送按钮事件
|
|
document.getElementById('uploadFileBtn').addEventListener('click', async () => {
|
|
await this.uploadFile(file);
|
|
});
|
|
}
|
|
|
|
async uploadFile(file) {
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
try {
|
|
const response = await fetch('/api/upload', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
// 发送文件消息
|
|
this.socket.emit('file_uploaded', {
|
|
to: this.currentContact.account,
|
|
from: this.currentUser,
|
|
filename: result.filename,
|
|
url: result.url
|
|
});
|
|
|
|
// 显示文件消息
|
|
this.addMessage({
|
|
from: this.currentUser,
|
|
message: `[文件] ${result.filename}`,
|
|
timestamp: Date.now() / 1000,
|
|
isOwn: true
|
|
});
|
|
|
|
this.hideFileUploadModal();
|
|
} else {
|
|
alert(result.message);
|
|
}
|
|
} catch (error) {
|
|
console.error('文件上传失败:', error);
|
|
alert('文件上传失败');
|
|
}
|
|
}
|
|
|
|
showFileNotification(data) {
|
|
// 如果是当前联系人的文件，显示消息
|
|
if (data.from === this.currentContact?.account) {
|
|
this.addMessage({
|
|
from: data.from,
|
|
message: `[文件] ${data.filename}`,
|
|
timestamp: data.timestamp,
|
|
isOwn: false
|
|
});
|
|
|
|
// 添加下载链接
|
|
const messagesContainer = document.getElementById('chatMessages');
|
|
const fileLink = document.createElement('div');
|
|
fileLink.className = 'message received';
|
|
fileLink.innerHTML = `
|
|
<div class="message-content">
|
|
<div class="message-text">
|
|
<a href="${data.url}" target="_blank" style="color: #0a84ff; text-decoration: none;">
|
|
<i class="fas fa-download"></i> 下载文件: ${data.filename}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
`;
|
|
messagesContainer.appendChild(fileLink);
|
|
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
|
} else {
|
|
this.showNotification(`收到来自 ${data.from} 的文件: ${data.filename}`);
|
|
}
|
|
}
|
|
|
|
showContactsSidebar() {
|
|
document.getElementById('contactsSidebar').classList.add('active');
|
|
}
|
|
|
|
hideContactsSidebar() {
|
|
document.getElementById('contactsSidebar').classList.remove('active');
|
|
}
|
|
|
|
showFilesSidebar() {
|
|
this.loadFiles();
|
|
document.getElementById('filesSidebar').classList.add('active');
|
|
}
|
|
|
|
hideFilesSidebar() {
|
|
document.getElementById('filesSidebar').classList.remove('active');
|
|
}
|
|
|
|
async loadFiles() {
|
|
try {
|
|
const response = await fetch('/api/files');
|
|
const files = await response.json();
|
|
this.renderFiles(files);
|
|
} catch (error) {
|
|
console.error('加载文件失败:', error);
|
|
}
|
|
}
|
|
|
|
renderFiles(files) {
|
|
const filesList = document.getElementById('filesList');
|
|
filesList.innerHTML = '';
|
|
|
|
files.forEach(file => {
|
|
const fileItem = document.createElement('div');
|
|
fileItem.className = 'file-item';
|
|
fileItem.innerHTML = `
|
|
<div class="file-icon">
|
|
<i class="fas fa-file"></i>
|
|
</div>
|
|
<div class="file-info">
|
|
<div class="file-name">${file.filename}</div>
|
|
<div class="file-size">${this.formatFileSize(file.size)}</div>
|
|
<div class="file-uploader">上传者: ${file.uploader}</div>
|
|
</div>
|
|
<a href="${file.url}" target="_blank" class="upload-btn">
|
|
<i class="fas fa-download"></i>
|
|
</a>
|
|
`;
|
|
filesList.appendChild(fileItem);
|
|
});
|
|
}
|
|
|
|
updateUserStatus(account, online) {
|
|
// 更新联系人状态
|
|
const contact = this.contacts.find(c => c.account === account);
|
|
if (contact) {
|
|
contact.online = online;
|
|
this.renderContacts();
|
|
|
|
// 如果是当前联系人，更新状态显示
|
|
if (this.currentContact && this.currentContact.account === account) {
|
|
document.getElementById('partnerStatus').textContent = online ? '在线' : '离线';
|
|
document.getElementById('partnerStatus').style.color =
|
|
online ? '#30d158' : '#6c6c70';
|
|
document.getElementById('voiceCallBtn').disabled = !online;
|
|
}
|
|
}
|
|
}
|
|
|
|
formatFileSize(bytes) {
|
|
if (bytes === 0) return '0 B';
|
|
const k = 1024;
|
|
const sizes = ['B', 'KB', 'MB', 'GB'];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
|
}
|
|
|
|
showNotification(message) {
|
|
// 简单的浏览器通知
|
|
if ('Notification' in window && Notification.permission === 'granted') {
|
|
new Notification('Web WeChat', {
|
|
body: message,
|
|
icon: '/static/favicon.ico'
|
|
});
|
|
}
|
|
}
|
|
|
|
loadChatHistory(account) {
|
|
// 这里可以加载聊天历史
|
|
const messagesContainer = document.getElementById('chatMessages');
|
|
messagesContainer.innerHTML = '';
|
|
|
|
// 暂时显示一条欢迎消息
|
|
if (messagesContainer.children.length === 0) {
|
|
const welcomeMsg = document.createElement('div');
|
|
welcomeMsg.className = 'welcome-message';
|
|
welcomeMsg.innerHTML = `
|
|
<i class="fas fa-comment-dots"></i>
|
|
<h3>开始与 ${this.currentContact.name} 聊天</h3>
|
|
<p>输入消息开始对话</p>
|
|
`;
|
|
messagesContainer.appendChild(welcomeMsg);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 页面加载完成后初始化应用
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
window.wechatApp = new WebWeChat();
|
|
|
|
// 请求通知权限
|
|
if ('Notification' in window) {
|
|
Notification.requestPermission();
|
|
}
|
|
}); |