root/webRtc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【m】聊天相关逻辑迁移

Browse Source
This commit is contained in:
zhangzheng
2026-03-12 14:41:00 +08:00
parent 873ce3d940
commit 80ff58ba15
5 changed files with 296 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
WebApp/client/public/onebyone/main.js
View File

@@ -5,118 +5,18 @@
import store from './store.js';
import UIRenderer from './renderer.js';
import apiClient from './api.js';
// import wsManager from './websocket.js';
import { mockCallSession } from './models.js';
import { showNotification, generateId } from './utils.js';
import { showNotification } from './utils.js';
import chatMessage from './chatmessage.js';
// 全局变量
let renderer = null;
let connectionId = "";
/**
* 初始化应用
*/
// function initApp() {
// // 初始化渲染器
// renderer = new UIRenderer(store);
// // 初始化WebSocket连接
// wsManager.connect();
// // 绑定WebSocket事件
// bindWebSocketEvents();
// // 绑定DOM事件
// bindDomEvents();
// // 初始化WebRTC (如果需要)
// // initWebRTC();
// console.log('App initialized');
// }
/**
* 绑定WebSocket事件
*/
function bindWebSocketEvents() {
// wsManager.on('connect', () => {
// console.log('WebSocket connected');
// showNotification('已连接到服务器');
// });
// wsManager.on('disconnect', () => {
// console.log('WebSocket disconnected');
// showNotification('与服务器的连接已断开', 5000);
// });
// wsManager.on('message-received', (data) => {
// console.log('Message received:', data);
// store.addMessage(data.message);
// });
// wsManager.on('user-joined', (data) => {
// console.log('User joined:', data);
// showNotification(`${data.userId} 加入了通话`);
// });
// wsManager.on('user-left', (data) => {
// console.log('User left:', data);
// showNotification(`${data.userId} 离开了通话`);
// });
// wsManager.on('media-state-changed', (data) => {
// console.log('Media state changed:', data);
// // 更新远端媒体状态
// if (data.userId !== store.getLocalUser().id) {
// store.updateRemoteMedia(data);
// }
// });
// wsManager.on('network-quality', (data) => {
// console.log('Network quality changed:', data);
// // 更新网络质量
// const state = store.getState();
// if (data.userId === state.session.remoteUser.id) {
// state.session.remoteUser.networkQuality = data.quality;
// store.notify({ type: 'NETWORK_CHANGE', quality: data.quality });
// }
// });
// wsManager.on('call-ended', (data) => {
// console.log('Call ended:', data);
// store.endCall();
// showNotification('通话已结束', 3000);
// });
// wsManager.on('call-request', (data) => {
// console.log('Call request received:', data);
// // 显示通话请求弹窗
// if (window.showCallRequest) {
// const caller = {
// name: mockCallSession.remoteUser.name,
// avatar: mockCallSession.remoteUser.avatar
// };
// window.showCallRequest(caller);
// connectionId = data.connectionId;
// }
// });
// //处理发送消息响应
// wsManager.on('chat-message', (data) => {
// console.log('chat-message:', data);
// // 显示消息
// store.addMessage({
// data: data.message,
// });
// });
}
/**
* 绑定DOM事件
*/
function bindDomEvents() {
// 切换侧边栏
window.toggleSidebar = function () {
store.toggleSidebar();
chatMessage.toggleSidebar();
};
// 切换麦克风
@@ -209,107 +109,8 @@ function bindDomEvents() {
store.setUp(connectionId);
};
// 发送消息
window.sendMessage = function () {
const chatInput = document.getElementById('chatInput');
const content = chatInput.value.trim();
if (content) {
const state = store.getState();
const message = {
id: state.id,
senderId: state.session.localUser.id,
senderName: state.session.localUser.name,
senderAvatar: state.session.localUser.avatar,
content: content,
type: 'text',
timestamp: new Date().toISOString(),
isSelf: true
};
store.addMessage(message);
const newMessage = {
id: state.id,
senderId: state.session.remoteUser.id,
senderName: state.session.remoteUser.name,
senderAvatar: state.session.remoteUser.avatar,
content: content,
type: 'text',
timestamp: new Date().toISOString(),
isSelf: false
};
chatInput.value = '';
// 发送消息到服务器
store.sendChatMessage(newMessage);
//wsManager.send('chat-message', message);
}
};
// 处理聊天输入回车
window.handleChatSubmit = function (event) {
if (event.key === 'Enter') {
window.sendMessage();
}
};
// 打开图片选择器
window.openImagePicker = function () {
document.getElementById('imageInput').click();
};
// 处理图片上传
window.handleImageUpload = function (event) {
const file = event.target.files[0];
if (file) {
// 检查文件类型
if (!file.type.startsWith('image/')) {
showNotification('请选择图片文件', 3000);
return;
}
// 检查文件大小（限制为5MB）
if (file.size > 5 * 1024 * 1024) {
showNotification('图片文件不能超过5MB', 3000);
return;
}
// 读取图片文件
const reader = new FileReader();
reader.onload = function (e) {
const imageUrl = e.target.result;
sendImageMessage(imageUrl, file.name);
};
reader.readAsDataURL(file);
// 重置文件输入
event.target.value = '';
}
};
// 发送图片消息
function sendImageMessage(imageUrl, fileName) {
const state = store.getState();
const newMessage = {
id: generateId(),
senderId: state.session.localUser.id,
senderName: state.session.localUser.name,
senderAvatar: state.session.localUser.avatar,
content: imageUrl,
fileName: fileName,
type: 'file',
timestamp: new Date().toISOString(),
isSelf: true
};
store.addMessage(newMessage);
// 发送消息到服务器
// wsManager.send('send-message', newMessage);
}
// 绑定消息相关事件
chatMessage.bindMessageEvents();
// 键盘快捷键
document.addEventListener('keydown', (event) => {
@@ -367,9 +168,6 @@ window.addEventListener('DOMContentLoaded', async () => {
// 绑定DOM事件
bindDomEvents();
// 绑定WebSocket事件
bindWebSocketEvents();
console.log('Video call app initialized successfully');
} catch (error) {
console.error('Error initializing app:', error);
@@ -378,4 +176,4 @@ window.addEventListener('DOMContentLoaded', async () => {
});
// 导出全局变量
export { store, renderer, apiClient };
export { store, apiClient };