v1.0
This commit is contained in:
theliu
@@ -0,0 +1,176 @@
|
||||
from flask import Flask, render_template, request, jsonify, session, redirect, url_for, send_from_directory
|
||||
import os
|
||||
from flask_socketio import SocketIO
|
||||
from flask_cors import CORS
|
||||
import sys
|
||||
|
||||
from config import Config
|
||||
from auth import infi_login, login_required
|
||||
from database import UserManager, ChatManager
|
||||
from websocket_handler import WebSocketHandler
|
||||
from file_handler import FileHandler
|
||||
|
||||
app = Flask(__name__)
|
||||
app.config.from_object(Config)
|
||||
CORS(app)
|
||||
|
||||
# 初始化SocketIO
|
||||
# 在 Windows 上避免使用 eventlet 的 monkey_patch，改用 threading
|
||||
use_eventlet = False
|
||||
if not sys.platform.startswith('win'):
|
||||
try:
|
||||
import eventlet
|
||||
eventlet.monkey_patch()
|
||||
use_eventlet = True
|
||||
except Exception:
|
||||
use_eventlet = False
|
||||
|
||||
socketio = SocketIO(app, cors_allowed_origins="*", async_mode='eventlet' if use_eventlet else 'threading')
|
||||
|
||||
# 初始化管理器
|
||||
user_manager = UserManager()
|
||||
chat_manager = ChatManager()
|
||||
|
||||
# 初始化WebSocket处理器
|
||||
ws_handler = WebSocketHandler(socketio, user_manager)
|
||||
|
||||
@app.route('/')
|
||||
@login_required
|
||||
def index():
|
||||
"""主页面"""
|
||||
user_account = session.get('user_account')
|
||||
user_info = user_manager.get_user(user_account)['user_info']
|
||||
return render_template('index.html', user_info=user_info)
|
||||
|
||||
@app.route('/login', methods=['GET', 'POST'])
|
||||
def login():
|
||||
"""登录页面"""
|
||||
if request.method == 'GET':
|
||||
return render_template('login.html')
|
||||
|
||||
# POST请求处理登录
|
||||
data = request.json
|
||||
account = data.get('account')
|
||||
password = data.get('password')
|
||||
|
||||
# 检查本地是否已保存用户
|
||||
if user_manager.verify_user(account, password):
|
||||
session['user_account'] = account
|
||||
user_manager.update_user_status(account, online=True)
|
||||
return jsonify({'success': True, 'message': '登录成功'})
|
||||
|
||||
# 使用英飞API登录
|
||||
result, error = infi_login(account, password)
|
||||
if error:
|
||||
return jsonify({'success': False, 'message': error})
|
||||
|
||||
# 保存用户信息到本地
|
||||
user_manager.add_user(account, password, result['token'], result['user_info'])
|
||||
|
||||
# 设置session
|
||||
session['user_account'] = account
|
||||
user_manager.update_user_status(account, online=True)
|
||||
|
||||
return jsonify({'success': True, 'message': '登录成功'})
|
||||
|
||||
@app.route('/logout')
|
||||
def logout():
|
||||
"""登出"""
|
||||
account = session.get('user_account')
|
||||
if account:
|
||||
user_manager.update_user_status(account, online=False)
|
||||
session.clear()
|
||||
return redirect(url_for('login'))
|
||||
|
||||
@app.route('/api/users')
|
||||
@login_required
|
||||
def get_users():
|
||||
"""获取用户列表"""
|
||||
current_user = session.get('user_account')
|
||||
users = []
|
||||
|
||||
for account, data in user_manager.users.items():
|
||||
if account != current_user:
|
||||
users.append({
|
||||
'account': account,
|
||||
'name': data['user_info'].get('name', '未知用户'),
|
||||
'online': data.get('online', False),
|
||||
'org': data['user_info'].get('orgFullList', [{}])[0].get('name', '')
|
||||
})
|
||||
|
||||
return jsonify(users)
|
||||
|
||||
@app.route('/api/upload', methods=['POST'])
|
||||
@login_required
|
||||
def upload_file():
|
||||
"""文件上传"""
|
||||
if 'file' not in request.files:
|
||||
return jsonify({'success': False, 'message': '没有文件'})
|
||||
|
||||
# 检查是否可以上传新文件
|
||||
if not chat_manager.can_upload_file():
|
||||
return jsonify({'success': False, 'message': '同时最多只能有5个文件存在'})
|
||||
|
||||
file = request.files['file']
|
||||
uploader = session.get('user_account')
|
||||
|
||||
# 检查文件大小
|
||||
file.seek(0, 2) # 移动到文件末尾
|
||||
file_size = file.tell()
|
||||
file.seek(0) # 重置文件指针
|
||||
|
||||
if file_size > Config.MAX_CONTENT_LENGTH:
|
||||
return jsonify({'success': False, 'message': '文件太大，最大100MB'})
|
||||
|
||||
# 保存文件
|
||||
file_info = FileHandler.save_file(file, uploader)
|
||||
if not file_info:
|
||||
return jsonify({'success': False, 'message': '不支持的文件类型'})
|
||||
|
||||
# 添加到活跃文件列表
|
||||
chat_manager.add_file(file_info)
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'filename': file_info.get('filename', file_info.get('original_name')),
|
||||
'url': file_info['url']
|
||||
})
|
||||
|
||||
@app.route('/api/files')
|
||||
@login_required
|
||||
def list_files():
|
||||
"""获取文件列表"""
|
||||
files = []
|
||||
for file_info in chat_manager.active_files:
|
||||
files.append({
|
||||
'filename': file_info.get('filename', file_info.get('original_name')),
|
||||
'uploader': file_info['uploader'],
|
||||
'upload_time': file_info['upload_time'].isoformat(),
|
||||
'size': file_info['size'],
|
||||
'url': file_info['url']
|
||||
})
|
||||
|
||||
return jsonify(files)
|
||||
|
||||
|
||||
@app.route('/favicon.ico')
|
||||
def favicon():
|
||||
# 从 static/favicon.ico 返回 favicon
|
||||
favicon_path = os.path.join(app.root_path, 'static', 'favicon.ico')
|
||||
if os.path.exists(favicon_path):
|
||||
return send_from_directory(os.path.join(app.root_path, 'static'), 'favicon.ico')
|
||||
return ('', 404)
|
||||
|
||||
if __name__ == '__main__':
|
||||
print("Starting Web WeChat server...")
|
||||
print(f"Access at: http://localhost:5000")
|
||||
socketio.run(app, debug=True, host='::', port=5000)
|
||||
|
||||
|
||||
@app.route('/favicon.ico')
|
||||
def favicon():
|
||||
# 从 static/favicon.ico 返回 favicon
|
||||
favicon_path = os.path.join(app.root_path, 'static', 'favicon.ico')
|
||||
if os.path.exists(favicon_path):
|
||||
return send_from_directory(os.path.join(app.root_path, 'static'), 'favicon.ico')
|
||||
return ('', 404)
|
||||
@@ -0,0 +1,114 @@
|
||||
import hashlib
|
||||
import requests
|
||||
from flask import session, redirect, url_for, request
|
||||
from functools import wraps
|
||||
|
||||
LOGIN_URL = "https://api.infi.cn/board/user/nc/accountLogin"
|
||||
USER_API = "https://api.infi.cn/bsg/user/getMyInfo"
|
||||
|
||||
def infi_login(account, password):
|
||||
"""使用英飞API登录"""
|
||||
try:
|
||||
login_data = {
|
||||
"account": account,
|
||||
"passwd": hashlib.md5(password.encode()).hexdigest(),
|
||||
"loginOriginType": 1
|
||||
}
|
||||
|
||||
login_response = requests.post(
|
||||
LOGIN_URL,
|
||||
json=login_data,
|
||||
headers={"Content-Type": "application/json"},
|
||||
timeout=10
|
||||
)
|
||||
|
||||
print(f"[debug] infi_login: LOGIN_URL status={login_response.status_code}")
|
||||
print(f"[debug] infi_login: LOGIN_URL body={login_response.text[:1000]}")
|
||||
|
||||
if login_response.status_code != 200:
|
||||
return None, f"API请求失败，HTTP {login_response.status_code}"
|
||||
|
||||
try:
|
||||
data = login_response.json()
|
||||
except ValueError:
|
||||
print("[debug] infi_login: 无法解析登录响应为 JSON", login_response.text[:1000])
|
||||
return None, "无法解析登录响应为 JSON"
|
||||
|
||||
# 兼容不同的返回格式：优先从 obj.token 拿 token，其次尝试顶层 token 或 obj 为字符串的情况
|
||||
token = None
|
||||
if isinstance(data, dict):
|
||||
obj = data.get('obj')
|
||||
if isinstance(obj, dict) and obj.get('token'):
|
||||
token = obj.get('token')
|
||||
elif isinstance(obj, str) and obj:
|
||||
token = obj
|
||||
elif data.get('token'):
|
||||
token = data.get('token')
|
||||
|
||||
if not token:
|
||||
# 如果存在 code/msg，把它们返回以便排查
|
||||
code = data.get('code') if isinstance(data, dict) else None
|
||||
msg = data.get('msg') if isinstance(data, dict) else None
|
||||
detail = f" code={code}" if code is not None else ""
|
||||
print(f"[debug] infi_login: 未找到 token，响应 data={data}")
|
||||
if msg:
|
||||
return None, f"登录失败: {msg}{detail}"
|
||||
return None, f"登录失败：未在响应中找到 token。响应: {data}"
|
||||
|
||||
# 获取用户信息
|
||||
user_response = requests.post(
|
||||
USER_API,
|
||||
headers={
|
||||
"access-token": token,
|
||||
"Origin": "https://infi.cn",
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
timeout=10
|
||||
)
|
||||
|
||||
print(f"[debug] infi_login: USER_API status={user_response.status_code}")
|
||||
print(f"[debug] infi_login: USER_API body={user_response.text[:1000]}")
|
||||
|
||||
if user_response.status_code != 200:
|
||||
body = user_response.text[:1000]
|
||||
return None, f"获取用户信息失败，HTTP {user_response.status_code} 响应: {body}"
|
||||
|
||||
try:
|
||||
user_data = user_response.json()
|
||||
except ValueError:
|
||||
print("[debug] infi_login: 无法解析用户信息响应为 JSON", user_response.text[:1000])
|
||||
return None, "无法解析用户信息响应为 JSON"
|
||||
|
||||
# 兼容不同返回格式：服务端有时使用 code==0 表示成功
|
||||
if isinstance(user_data, dict) and user_data.get('code') is not None and user_data.get('code') not in (0, 200):
|
||||
print(f"[debug] infi_login: user_data indicates failure: {user_data}")
|
||||
return None, f"获取用户信息失败: {user_data.get('msg', '')} 响应: {user_data}"
|
||||
|
||||
user_obj = None
|
||||
if isinstance(user_data, dict):
|
||||
user_obj = user_data.get('obj') or user_data
|
||||
|
||||
return {
|
||||
'token': token,
|
||||
'user_info': user_obj
|
||||
}, None
|
||||
|
||||
except Exception as e:
|
||||
# 针对网络/DNS 解析类错误返回更有帮助的提示
|
||||
msg = str(e)
|
||||
if 'NameResolutionError' in msg or 'Failed to resolve' in msg or 'Max retries exceeded' in msg:
|
||||
return None, (
|
||||
"网络错误：无法解析 api.infi.cn（DNS）。请检查网络连接、DNS 或代理设置。"
|
||||
" 可尝试命令：\n 1) `nslookup api.infi.cn`\n 2) `ping api.infi.cn`\n"
|
||||
" 或切换网络/使用 VPN、设置正确的 `HTTP(S)_PROXY` 环境变量。"
|
||||
)
|
||||
return None, f"登录异常: {msg}"
|
||||
|
||||
def login_required(f):
|
||||
"""登录装饰器"""
|
||||
@wraps(f)
|
||||
def decorated_function(*args, **kwargs):
|
||||
if 'user_account' not in session:
|
||||
return redirect(url_for('login'))
|
||||
return f(*args, **kwargs)
|
||||
return decorated_function
|
||||
@@ -0,0 +1,20 @@
|
||||
import os
|
||||
from datetime import timedelta
|
||||
|
||||
class Config:
|
||||
SECRET_KEY = os.environ.get('SECRET_KEY') or 'dev-secret-key-change-in-production'
|
||||
USERS_FILE = 'users.json'
|
||||
UPLOAD_FOLDER = 'static/uploads'
|
||||
MAX_CONTENT_LENGTH = 100 * 1024 * 1024 # 100MB
|
||||
MAX_SIMULTANEOUS_FILES = 5
|
||||
SESSION_PERMANENT = True
|
||||
PERMANENT_SESSION_LIFETIME = timedelta(days=7)
|
||||
|
||||
# WebSocket配置
|
||||
SOCKETIO_ASYNC_MODE = 'eventlet'
|
||||
|
||||
@staticmethod
|
||||
def init_app(app):
|
||||
# 确保上传目录存在
|
||||
if not os.path.exists(Config.UPLOAD_FOLDER):
|
||||
os.makedirs(Config.UPLOAD_FOLDER)
|
||||
+101
@@ -0,0 +1,101 @@
|
||||
import json
|
||||
import os
|
||||
import hashlib
|
||||
from base64 import urlsafe_b64encode
|
||||
from datetime import datetime
|
||||
from cryptography.fernet import Fernet
|
||||
from config import Config
|
||||
|
||||
class UserManager:
|
||||
def __init__(self):
|
||||
# 使用 Config.SECRET_KEY 派生一个可复现的 Fernet key，避免每次运行生成不同 key
|
||||
digest = hashlib.sha256(Config.SECRET_KEY.encode()).digest()
|
||||
self.key = urlsafe_b64encode(digest)
|
||||
self.cipher = Fernet(self.key)
|
||||
self.users_file = Config.USERS_FILE
|
||||
self.load_users()
|
||||
# 如果不存在内测账号，则创建之（账号: admin 密码: 123）
|
||||
if 'admin' not in self.users:
|
||||
try:
|
||||
self.add_user('admin', '123', '', {'name': '内测管理员'})
|
||||
except Exception:
|
||||
pass
|
||||
|
||||
def encrypt(self, data):
|
||||
return self.cipher.encrypt(data.encode()).decode()
|
||||
|
||||
def decrypt(self, encrypted_data):
|
||||
return self.cipher.decrypt(encrypted_data.encode()).decode()
|
||||
|
||||
def load_users(self):
|
||||
if os.path.exists(self.users_file):
|
||||
with open(self.users_file, 'r', encoding='utf-8') as f:
|
||||
self.users = json.load(f)
|
||||
else:
|
||||
self.users = {}
|
||||
self.save_users()
|
||||
|
||||
def save_users(self):
|
||||
with open(self.users_file, 'w', encoding='utf-8') as f:
|
||||
json.dump(self.users, f, ensure_ascii=False, indent=2)
|
||||
|
||||
def add_user(self, account, password, token, user_info):
|
||||
# 确保 user_info 是 dict 且包含必要的字段以防模版渲染错误
|
||||
if not isinstance(user_info, dict):
|
||||
user_info = {}
|
||||
user_info.setdefault('name', account)
|
||||
user_info.setdefault('orgFullList', [])
|
||||
|
||||
self.users[account] = {
|
||||
'password': self.encrypt(password),
|
||||
'token': token,
|
||||
'user_info': user_info,
|
||||
'last_login': datetime.now().isoformat(),
|
||||
'online': False,
|
||||
'socket_id': None
|
||||
}
|
||||
self.save_users()
|
||||
|
||||
def get_user(self, account):
|
||||
return self.users.get(account)
|
||||
|
||||
def update_user_status(self, account, online=False, socket_id=None):
|
||||
if account in self.users:
|
||||
self.users[account]['online'] = online
|
||||
if socket_id:
|
||||
self.users[account]['socket_id'] = socket_id
|
||||
self.save_users()
|
||||
|
||||
def verify_user(self, account, password):
|
||||
user = self.get_user(account)
|
||||
if user:
|
||||
try:
|
||||
decrypted = self.decrypt(user['password'])
|
||||
return decrypted == password
|
||||
except:
|
||||
return False
|
||||
return False
|
||||
|
||||
class ChatManager:
|
||||
def __init__(self):
|
||||
self.active_files = []
|
||||
self.file_lock = False
|
||||
|
||||
def can_upload_file(self):
|
||||
"""检查是否可以上传文件（最多5个）"""
|
||||
# 清理过期的文件（超过1小时）
|
||||
current_time = datetime.now()
|
||||
self.active_files = [
|
||||
file for file in self.active_files
|
||||
if (current_time - file['upload_time']).seconds < 3600
|
||||
]
|
||||
return len(self.active_files) < Config.MAX_SIMULTANEOUS_FILES
|
||||
|
||||
def add_file(self, file_info):
|
||||
self.active_files.append({
|
||||
'filename': file_info['filename'],
|
||||
'size': file_info['size'],
|
||||
'uploader': file_info['uploader'],
|
||||
'upload_time': datetime.now(),
|
||||
'url': file_info['url']
|
||||
})
|
||||
@@ -0,0 +1,44 @@
|
||||
import os
|
||||
import uuid
|
||||
from datetime import datetime
|
||||
from werkzeug.utils import secure_filename
|
||||
from config import Config
|
||||
|
||||
class FileHandler:
|
||||
ALLOWED_EXTENSIONS = {
|
||||
'txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif',
|
||||
'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx',
|
||||
'mp3', 'mp4', 'zip', 'rar'
|
||||
}
|
||||
|
||||
@staticmethod
|
||||
def allowed_file(filename):
|
||||
return '.' in filename and \
|
||||
filename.rsplit('.', 1)[1].lower() in FileHandler.ALLOWED_EXTENSIONS
|
||||
|
||||
@staticmethod
|
||||
def save_file(file, uploader_account):
|
||||
"""保存上传的文件"""
|
||||
if file and FileHandler.allowed_file(file.filename):
|
||||
# 生成唯一文件名
|
||||
filename = secure_filename(file.filename)
|
||||
unique_filename = f"{uuid.uuid4().hex}_{filename}"
|
||||
|
||||
# 保存文件
|
||||
# 确保上传目录存在
|
||||
os.makedirs(Config.UPLOAD_FOLDER, exist_ok=True)
|
||||
|
||||
file_path = os.path.join(Config.UPLOAD_FOLDER, unique_filename)
|
||||
file.save(file_path)
|
||||
|
||||
# 返回文件信息（包含兼容键名）
|
||||
return {
|
||||
'filename': filename,
|
||||
'original_name': filename,
|
||||
'saved_name': unique_filename,
|
||||
'size': os.path.getsize(file_path),
|
||||
'uploader': uploader_account,
|
||||
'upload_time': datetime.now(),
|
||||
'url': f'/static/uploads/{unique_filename}'
|
||||
}
|
||||
return None
|
||||
@@ -0,0 +1,9 @@
|
||||
Flask==3.0.0
|
||||
Flask-SocketIO==5.3.6
|
||||
Flask-CORS==4.0.0
|
||||
requests==2.31.0
|
||||
python-socketio==5.10.0
|
||||
eventlet==0.33.3
|
||||
SQLAlchemy==2.0.25
|
||||
cryptography==42.0.5
|
||||
Pillow==10.2.0
|
||||
@@ -0,0 +1,844 @@
|
||||
/* 苹果风格深色主题 */
|
||||
:root {
|
||||
--bg-primary: #1c1c1e;
|
||||
--bg-secondary: #2c2c2e;
|
||||
--bg-tertiary: #3a3a3c;
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #98989d;
|
||||
--text-tertiary: #6c6c70;
|
||||
--accent-blue: #0a84ff;
|
||||
--accent-green: #30d158;
|
||||
--accent-red: #ff453a;
|
||||
--accent-orange: #ff9f0a;
|
||||
--border-color: #38383a;
|
||||
--shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
--radius-sm: 10px;
|
||||
--radius-md: 14px;
|
||||
--radius-lg: 20px;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
body.dark-theme {
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 侧边栏样式 */
|
||||
.sidebar {
|
||||
width: 320px;
|
||||
background-color: var(--bg-secondary);
|
||||
border-right: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--bg-tertiary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px;
|
||||
font-size: 28px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.user-details h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.user-details p {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.search-box {
|
||||
padding: 16px 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
width: 100%;
|
||||
padding: 10px 40px;
|
||||
background-color: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-primary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search-box i {
|
||||
position: absolute;
|
||||
left: 36px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--text-tertiary);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
display: flex;
|
||||
padding: 0 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
flex: 1;
|
||||
padding: 12px 0;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.nav-btn.active {
|
||||
background-color: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
background-color: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.chat-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.chat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.chat-item:hover {
|
||||
background-color: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.chat-item.active {
|
||||
background-color: rgba(10, 132, 255, 0.1);
|
||||
}
|
||||
|
||||
.chat-item-avatar {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--bg-tertiary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px;
|
||||
font-size: 22px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.chat-item-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.chat-item-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 2px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.chat-item-last-message {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.chat-item-time {
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.chat-item-unread {
|
||||
background-color: var(--accent-blue);
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
/* 主聊天区域 */
|
||||
.main-chat {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--bg-primary);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: var(--bg-secondary);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.chat-partner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.partner-avatar {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--bg-tertiary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px;
|
||||
font-size: 24px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.partner-info h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.partner-info p {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.chat-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--bg-tertiary);
|
||||
border: none;
|
||||
color: var(--text-primary);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background-color: var(--accent-blue);
|
||||
}
|
||||
|
||||
.action-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.message {
|
||||
display: flex;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
.message.received {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.message.sent {
|
||||
align-self: flex-end;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--bg-tertiary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.message.received .message-avatar {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.message.sent .message-avatar {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
background-color: var(--bg-secondary);
|
||||
padding: 12px 16px;
|
||||
border-radius: var(--radius-lg);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.message.sent .message-content {
|
||||
background-color: var(--accent-blue);
|
||||
color: white;
|
||||
border-bottom-right-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.message.received .message-content {
|
||||
border-bottom-left-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.message-text {
|
||||
font-size: 15px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
margin-top: 4px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.message.sent .message-time {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.chat-input-area {
|
||||
padding: 20px 24px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
background-color: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.input-tools {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.tool-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: none;
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-primary);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.tool-btn:hover {
|
||||
background-color: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.message-input-wrapper {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.message-input-wrapper textarea {
|
||||
flex: 1;
|
||||
background-color: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-primary);
|
||||
padding: 12px 16px;
|
||||
font-size: 15px;
|
||||
resize: none;
|
||||
max-height: 120px;
|
||||
min-height: 44px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.message-input-wrapper textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-blue);
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--accent-blue);
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.send-btn:hover {
|
||||
background-color: #007aff;
|
||||
}
|
||||
|
||||
/* 语音通话界面 */
|
||||
.call-interface {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.call-container {
|
||||
text-align: center;
|
||||
max-width: 400px;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.call-avatar {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--bg-tertiary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 24px;
|
||||
font-size: 60px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.call-container h3 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.call-status {
|
||||
font-size: 16px;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.call-timer {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
margin: 24px 0;
|
||||
color: var(--accent-green);
|
||||
}
|
||||
|
||||
.call-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.call-control-btn {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.call-control-btn:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.call-control-btn.decline {
|
||||
background-color: var(--accent-red);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.call-control-btn.accept {
|
||||
background-color: var(--accent-green);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 侧边栏 */
|
||||
.contacts-sidebar,
|
||||
.files-sidebar {
|
||||
width: 320px;
|
||||
background-color: var(--bg-secondary);
|
||||
border-left: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -320px;
|
||||
bottom: 0;
|
||||
transition: right 0.3s;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.contacts-sidebar.active,
|
||||
.files-sidebar.active {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.sidebar-header h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.close-sidebar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-primary);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.close-sidebar:hover {
|
||||
background-color: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.contacts-list,
|
||||
.files-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.contact-item:hover {
|
||||
background-color: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.contact-status {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.contact-status.online {
|
||||
background-color: var(--accent-green);
|
||||
}
|
||||
|
||||
.contact-status.offline {
|
||||
background-color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* 移动端样式：显示顶部的联系人按钮并调整布局 */
|
||||
@media (max-width: 768px) {
|
||||
.sidebar { display: none; }
|
||||
.action-btn#openContactsBtn { display: flex; }
|
||||
.main-chat { padding-top: 0; }
|
||||
.app-container { max-width: 100%; }
|
||||
}
|
||||
|
||||
/* 文件上传模态框 */
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--bg-secondary);
|
||||
border-radius: var(--radius-lg);
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
max-height: 90vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.close-modal {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-primary);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.close-modal:hover {
|
||||
background-color: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 24px;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
border: 2px dashed var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.upload-area:hover {
|
||||
border-color: var(--accent-blue);
|
||||
}
|
||||
|
||||
.upload-area i {
|
||||
font-size: 48px;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.upload-area p {
|
||||
font-size: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.upload-hint {
|
||||
font-size: 14px;
|
||||
color: var(--text-tertiary);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
background-color: var(--accent-blue);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 24px;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.upload-btn:hover {
|
||||
background-color: #007aff;
|
||||
}
|
||||
|
||||
.file-preview {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
background-color: var(--bg-tertiary);
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: var(--accent-blue);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* 欢迎消息 */
|
||||
.welcome-message {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.welcome-message i {
|
||||
font-size: 64px;
|
||||
margin-bottom: 24px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.welcome-message h3 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 12px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.welcome-message p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--text-tertiary);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
bottom: 0;
|
||||
transition: left 0.3s;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.sidebar.active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.contacts-sidebar,
|
||||
.files-sidebar {
|
||||
width: 100%;
|
||||
right: -100%;
|
||||
}
|
||||
|
||||
.contacts-sidebar.active,
|
||||
.files-sidebar.active {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.message {
|
||||
max-width: 85%;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
@@ -0,0 +1,851 @@
|
||||
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();
|
||||
}
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 547 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 547 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
@@ -0,0 +1,2 @@
|
||||
//端口卸载下一行（第二行）
|
||||
8080
|
||||
@@ -0,0 +1,2 @@
|
||||
//端口卸载下一行（第二行）
|
||||
8080
|
||||
@@ -0,0 +1,2 @@
|
||||
//端口卸载下一行（第二行）
|
||||
8080
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
Submodule
+1
Submodule templates added at 34d6f8a3dc
+174
@@ -0,0 +1,174 @@
|
||||
{
|
||||
"15817238733": {
|
||||
"password": "gAAAAABpiBywHugIuIWc38y4w9uXM1Z78ocmFjwcp2Iulms81PCaMz9gTdvUrWij15lfc2OY8BanOswA1YyWSdj42FLPkvs-DA==",
|
||||
"token": "BOARD-66ed8680d46d115558532813-1770527922080-0.665604332710812-1770527922082258054",
|
||||
"user_info": {
|
||||
"isPasswdTag": 1,
|
||||
"registTags": [],
|
||||
"_id": "66ed8680d46d115558532813",
|
||||
"name": "刘浚哲",
|
||||
"mCode": "86",
|
||||
"mobile": "15817238733",
|
||||
"profession": "student",
|
||||
"avatarUrl": "https://file.infi.cn/bsg/head/user/default/2025-03-22_13%3A20%3A21_66ed8680d46d115558532813_default_avatar.png",
|
||||
"isDefaultAvatar": 1,
|
||||
"myId": "66ed8680d46d115558532813",
|
||||
"bindList": [
|
||||
{
|
||||
"type": "mobile",
|
||||
"isBind": 1,
|
||||
"bindData": "15817238733"
|
||||
},
|
||||
{
|
||||
"type": "mail",
|
||||
"isBind": 0
|
||||
},
|
||||
{
|
||||
"type": "passwd",
|
||||
"isBind": 1
|
||||
},
|
||||
{
|
||||
"type": "wx",
|
||||
"isBind": 0
|
||||
}
|
||||
],
|
||||
"action": [],
|
||||
"orgFullList": [
|
||||
{
|
||||
"currentUserRoleName": "orgRestrictedMember",
|
||||
"memberCanInvite": 1,
|
||||
"name": "深圳市云端学校",
|
||||
"orgId": "64fc0f1e821d24bef457bc7f",
|
||||
"avatarUrl": "https://pub.infi.cn/board/head/64fc0f1e821d24bef457bc7f_org_.jpg?t=1701913752011",
|
||||
"logoUrl": "https://pub.infi.cn/board/head/64fc0f1e821d24bef457bc7f_orgLogo_.jpg?t=1702364444661",
|
||||
"userId": "66ed8680d46d115558532813",
|
||||
"packageExpire": 1797350399000,
|
||||
"packageType": 3,
|
||||
"packageSeat": 1000,
|
||||
"lastAccess": 1766815725222,
|
||||
"orgGuideSettingInit": 0
|
||||
}
|
||||
],
|
||||
"preferences": {
|
||||
"boardViewGuidanceTask": 0,
|
||||
"gridType": 1,
|
||||
"showCursors": 0,
|
||||
"colors": [],
|
||||
"toolBar": [
|
||||
"template",
|
||||
"sticker",
|
||||
"text",
|
||||
"shapes",
|
||||
"connect_line",
|
||||
"comment",
|
||||
"pen",
|
||||
"frame",
|
||||
"upload",
|
||||
"mind_map"
|
||||
],
|
||||
"toolBox": [
|
||||
"card",
|
||||
"kanban",
|
||||
"bigdoc",
|
||||
"table",
|
||||
"webpage",
|
||||
"customized_sticker",
|
||||
"timer",
|
||||
"ai_instruction"
|
||||
],
|
||||
"colorPalettes": {},
|
||||
"openState": {},
|
||||
"boardAccessCount": 372,
|
||||
"disableOpenTemplate": 0,
|
||||
"silentAddUser": false,
|
||||
"haveCreatedBoard": 0,
|
||||
"svgIconConfig": {},
|
||||
"presentationHasShownOnce": true
|
||||
}
|
||||
},
|
||||
"last_login": "2026-02-08T13:18:40.201893",
|
||||
"online": false,
|
||||
"socket_id": "9KLqTFd3j5GNjeCoAAAF"
|
||||
},
|
||||
"admin": {
|
||||
"password": "gAAAAABpiBu_0CYFxos5fr5iZaudMVaBA9lFdIXFLYe7u_7aiIlihLQ3BKJiW2rHV6DYbvLuy7YcBPp6Pb5V_mtW6xhNMzz8VA==",
|
||||
"token": "",
|
||||
"user_info": {
|
||||
"name": "内测管理员"
|
||||
},
|
||||
"last_login": "2026-02-08T13:14:39.081841",
|
||||
"online": false,
|
||||
"socket_id": "zpynU_-CgB_gLKT1AAAf"
|
||||
},
|
||||
"13827495788": {
|
||||
"password": "gAAAAABpiECWr-rFHZNtOEgWcyAeXpH5tRt-yYaMgGCXwKkkpPVLX4v-GuetfF4cBgKFYPEglJlCmXmki-rn07DM8hyeEh0coA==",
|
||||
"token": "BOARD-66e57daba386b71dcd5b3ce3-1770537112707-0.513617461315166-1770537112710073811",
|
||||
"user_info": {
|
||||
"isPasswdTag": 1,
|
||||
"registTags": [],
|
||||
"_id": "66e57daba386b71dcd5b3ce3",
|
||||
"name": "臧铭炜",
|
||||
"mCode": "86",
|
||||
"mobile": "13827495788",
|
||||
"profession": "engineer",
|
||||
"avatarUrl": "https://file.infi.cn/bsg/head/user/default/2024-11-09_22%3A50%3A39_66e57daba386b71dcd5b3ce3_default_avatar.png",
|
||||
"isDefaultAvatar": 1,
|
||||
"myId": "66e57daba386b71dcd5b3ce3",
|
||||
"bindList": [
|
||||
{
|
||||
"type": "mobile",
|
||||
"isBind": 1,
|
||||
"bindData": "13827495788"
|
||||
},
|
||||
{
|
||||
"type": "mail",
|
||||
"isBind": 0
|
||||
},
|
||||
{
|
||||
"type": "passwd",
|
||||
"isBind": 1
|
||||
},
|
||||
{
|
||||
"type": "wx",
|
||||
"isBind": 1
|
||||
}
|
||||
],
|
||||
"action": [],
|
||||
"orgFullList": [
|
||||
{
|
||||
"currentUserRoleName": "orgRestrictedMember",
|
||||
"memberCanInvite": 1,
|
||||
"name": "深圳市云端学校",
|
||||
"orgId": "64fc0f1e821d24bef457bc7f",
|
||||
"avatarUrl": "https://pub.infi.cn/board/head/64fc0f1e821d24bef457bc7f_org_.jpg?t=1701913752011",
|
||||
"logoUrl": "https://pub.infi.cn/board/head/64fc0f1e821d24bef457bc7f_orgLogo_.jpg?t=1702364444661",
|
||||
"userId": "66e57daba386b71dcd5b3ce3",
|
||||
"packageExpire": 1797350399000,
|
||||
"packageType": 3,
|
||||
"packageSeat": 1000,
|
||||
"lastAccess": 0,
|
||||
"orgGuideSettingInit": 0
|
||||
}
|
||||
],
|
||||
"preferences": {
|
||||
"boardViewGuidanceTask": 0,
|
||||
"gridType": 1,
|
||||
"showCursors": 0,
|
||||
"colors": [],
|
||||
"toolBar": [],
|
||||
"toolBox": [],
|
||||
"colorPalettes": {},
|
||||
"openState": {},
|
||||
"boardAccessCount": 513,
|
||||
"disableOpenTemplate": 0,
|
||||
"silentAddUser": false,
|
||||
"haveCreatedBoard": 0,
|
||||
"svgIconConfig": {},
|
||||
"presentationHasShownOnce": true
|
||||
}
|
||||
},
|
||||
"last_login": "2026-02-08T15:51:50.750746",
|
||||
"online": false,
|
||||
"socket_id": "k8yao3QqDWm_IV0eAAAd"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
from flask_socketio import emit, join_room, leave_room
|
||||
from flask import request
|
||||
import time
|
||||
import json
|
||||
|
||||
class WebSocketHandler:
|
||||
def __init__(self, socketio, user_manager):
|
||||
self.socketio = socketio
|
||||
self.user_manager = user_manager
|
||||
self.active_calls = {} # 正在进行的语音通话
|
||||
self.setup_handlers()
|
||||
|
||||
def setup_handlers(self):
|
||||
@self.socketio.on('connect')
|
||||
def handle_connect(auth=None):
|
||||
print(f'Client connected: {request.sid}')
|
||||
|
||||
@self.socketio.on('disconnect')
|
||||
def handle_disconnect():
|
||||
account = None
|
||||
# 找到断开连接的用户
|
||||
for acc, user in self.user_manager.users.items():
|
||||
if user.get('socket_id') == request.sid:
|
||||
account = acc
|
||||
break
|
||||
|
||||
if account:
|
||||
self.user_manager.update_user_status(account, online=False)
|
||||
|
||||
# 通知好友用户离线
|
||||
emit('user_status', {
|
||||
'account': account,
|
||||
'online': False
|
||||
}, broadcast=True)
|
||||
|
||||
@self.socketio.on('authenticate')
|
||||
def handle_authenticate(data):
|
||||
account = data.get('account')
|
||||
if account in self.user_manager.users:
|
||||
self.user_manager.update_user_status(
|
||||
account,
|
||||
online=True,
|
||||
socket_id=request.sid
|
||||
)
|
||||
|
||||
# 通知所有用户此用户上线
|
||||
emit('user_status', {
|
||||
'account': account,
|
||||
'online': True
|
||||
}, broadcast=True)
|
||||
|
||||
@self.socketio.on('private_message')
|
||||
def handle_private_message(data):
|
||||
to_account = data.get('to')
|
||||
message = data.get('message')
|
||||
from_account = data.get('from')
|
||||
|
||||
# 获取接收者的socket_id
|
||||
recipient = self.user_manager.get_user(to_account)
|
||||
if recipient and recipient.get('socket_id'):
|
||||
emit('private_message', {
|
||||
'from': from_account,
|
||||
'message': message,
|
||||
'timestamp': time.time()
|
||||
}, room=recipient['socket_id'])
|
||||
|
||||
# 同时发送给自己（用于确认）
|
||||
emit('private_message_sent', {
|
||||
'to': to_account,
|
||||
'message': message,
|
||||
'timestamp': time.time()
|
||||
})
|
||||
|
||||
@self.socketio.on('group_message')
|
||||
def handle_group_message(data):
|
||||
group_id = data.get('group_id')
|
||||
message = data.get('message')
|
||||
from_account = data.get('from')
|
||||
|
||||
emit('group_message', {
|
||||
'group_id': group_id,
|
||||
'from': from_account,
|
||||
'message': message,
|
||||
'timestamp': time.time()
|
||||
}, room=group_id)
|
||||
|
||||
@self.socketio.on('join_group')
|
||||
def handle_join_group(data):
|
||||
group_id = data.get('group_id')
|
||||
join_room(group_id)
|
||||
|
||||
@self.socketio.on('leave_group')
|
||||
def handle_leave_group(data):
|
||||
group_id = data.get('group_id')
|
||||
leave_room(group_id)
|
||||
|
||||
@self.socketio.on('start_call')
|
||||
def handle_start_call(data):
|
||||
"""开始语音通话"""
|
||||
to_account = data.get('to')
|
||||
from_account = data.get('from')
|
||||
call_id = data.get('call_id')
|
||||
|
||||
self.active_calls[call_id] = {
|
||||
'participants': [from_account, to_account],
|
||||
'start_time': time.time()
|
||||
}
|
||||
|
||||
# 通知对方
|
||||
recipient = self.user_manager.get_user(to_account)
|
||||
if recipient and recipient.get('socket_id'):
|
||||
emit('incoming_call', {
|
||||
'from': from_account,
|
||||
'call_id': call_id
|
||||
}, room=recipient['socket_id'])
|
||||
|
||||
@self.socketio.on('answer_call')
|
||||
def handle_answer_call(data):
|
||||
"""接听电话"""
|
||||
call_id = data.get('call_id')
|
||||
if call_id in self.active_calls:
|
||||
emit('call_accepted', {
|
||||
'call_id': call_id
|
||||
}, room=request.sid)
|
||||
|
||||
@self.socketio.on('end_call')
|
||||
def handle_end_call(data):
|
||||
"""结束通话"""
|
||||
call_id = data.get('call_id')
|
||||
if call_id in self.active_calls:
|
||||
# 通知所有参与者
|
||||
for participant in self.active_calls[call_id]['participants']:
|
||||
user = self.user_manager.get_user(participant)
|
||||
if user and user.get('socket_id'):
|
||||
emit('call_ended', {
|
||||
'call_id': call_id
|
||||
}, room=user['socket_id'])
|
||||
|
||||
del self.active_calls[call_id]
|
||||
|
||||
@self.socketio.on('webrtc_signal')
|
||||
def handle_webrtc_signal(data):
|
||||
"""WebRTC信令转发"""
|
||||
to_account = data.get('to')
|
||||
signal = data.get('signal')
|
||||
|
||||
recipient = self.user_manager.get_user(to_account)
|
||||
if recipient and recipient.get('socket_id'):
|
||||
emit('webrtc_signal', signal, room=recipient['socket_id'])
|
||||
|
||||
@self.socketio.on('file_uploaded')
|
||||
def handle_file_uploaded(data):
|
||||
"""文件上传完成通知"""
|
||||
filename = data.get('filename')
|
||||
url = data.get('url')
|
||||
to_account = data.get('to')
|
||||
from_account = data.get('from')
|
||||
|
||||
# 通知接收者
|
||||
recipient = self.user_manager.get_user(to_account)
|
||||
if recipient and recipient.get('socket_id'):
|
||||
emit('file_received', {
|
||||
'from': from_account,
|
||||
'filename': filename,
|
||||
'url': url,
|
||||
'timestamp': time.time()
|
||||
}, room=recipient['socket_id'])
|
||||
Reference in New Issue
Block a user