【m】开始尝试接入后端

WebApp/client/public/onebyone/main.js

@@ -6,11 +6,12 @@ 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';
 
 // 全局变量
 let renderer = null;
-
+let connectionId = "";
 /**
  * 初始化应用
  */
@@ -30,6 +31,7 @@ function initApp() {
     // 初始化WebRTC (如果需要)
     // initWebRTC();
 
+
     console.log('App initialized');
 }
 
@@ -85,6 +87,19 @@ function bindWebSocketEvents() {
         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;
+        }
+    });
 }
 
 /**
@@ -92,31 +107,31 @@ function bindWebSocketEvents() {
  */
 function bindDomEvents() {
     // 切换侧边栏
-    window.toggleSidebar = function() {
+    window.toggleSidebar = function () {
         store.toggleSidebar();
     };
 
     // 切换麦克风
-    window.toggleMute = function(button) {
+    window.toggleMute = function (button) {
         const state = store.getState();
         const currentState = state.session.localUser.mediaState.audio;
         store.updateLocalMedia('audio', !currentState);
     };
 
     // 切换视频
-    window.toggleVideo = function(button) {
+    window.toggleVideo = function (button) {
         const state = store.getState();
         const currentState = state.session.localUser.mediaState.video;
         store.updateLocalMedia('video', !currentState);
     };
 
     // 切换本地视频（用于悬停控制）
-    window.toggleLocalVideo = function() {
+    window.toggleLocalVideo = function () {
         window.toggleVideo();
     };
 
     // 切换录屏
-    window.toggleRecording = function(button) {
+    window.toggleRecording = function (button) {
         const state = store.getState();
         const currentState = state.session.localUser.mediaState.recording || false;
         store.updateLocalMedia('recording', !currentState);
@@ -130,25 +145,64 @@ function bindDomEvents() {
     };
 
     // 结束通话
-    window.endCall = function() {
+    window.endCall = function () {
         // 显示确认对话框
         document.getElementById('endCallDialog').classList.remove('hidden');
     };
 
     // 取消结束通话
-    window.cancelEndCall = function() {
+    window.cancelEndCall = function () {
         document.getElementById('endCallDialog').classList.add('hidden');
     };
 
     // 确认结束通话
-    window.confirmEndCall = function() {
+    window.confirmEndCall = function () {
         document.getElementById('endCallDialog').classList.add('hidden');
         store.endCall();
         showNotification('通话已结束');
     };
 
+    // 显示通话请求弹窗
+    window.showCallRequest = function (caller) {
+        const dialog = document.getElementById('callRequestDialog');
+        if (dialog) {
+            // 设置通话请求信息
+            if (document.getElementById('callRequestName')) {
+                document.getElementById('callRequestName').textContent = caller.name;
+            }
+            if (document.getElementById('callRequestAvatar')) {
+                document.getElementById('callRequestAvatar').src = caller.avatar;
+            }
+            // 显示弹窗
+            dialog.classList.remove('hidden');
+        }
+    };
+
+    // 拒绝通话
+    window.rejectCall = function () {
+        const dialog = document.getElementById('callRequestDialog');
+        if (dialog) {
+            dialog.classList.add('hidden');
+        }
+        showNotification('已拒绝通话请求');
+        // 可以在这里添加发送拒绝通话请求到服务器的逻辑
+    };
+
+    // 接受通话
+    window.acceptCall = function () {
+        const dialog = document.getElementById('callRequestDialog');
+        if (dialog) {
+            dialog.classList.add('hidden');
+        }
+        showNotification('已接受通话请求');
+        // 可以在这里添加发送接受通话请求到服务器的逻辑
+        // 然后初始化通话
+        store.initCall();
+        store.setUp(connectionId);
+    };
+
     // 发送消息
-    window.sendMessage = function() {
+    window.sendMessage = function () {
         const chatInput = document.getElementById('chatInput');
         const content = chatInput.value.trim();
 
@@ -174,19 +228,19 @@ function bindDomEvents() {
     };
 
     // 处理聊天输入回车
-    window.handleChatSubmit = function(event) {
+    window.handleChatSubmit = function (event) {
         if (event.key === 'Enter') {
             window.sendMessage();
         }
     };
 
     // 打开图片选择器
-    window.openImagePicker = function() {
+    window.openImagePicker = function () {
         document.getElementById('imageInput').click();
     };
 
     // 处理图片上传
-    window.handleImageUpload = function(event) {
+    window.handleImageUpload = function (event) {
         const file = event.target.files[0];
         if (file) {
             // 检查文件类型
@@ -203,7 +257,7 @@ function bindDomEvents() {
 
             // 读取图片文件
             const reader = new FileReader();
-            reader.onload = function(e) {
+            reader.onload = function (e) {
                 const imageUrl = e.target.result;
                 sendImageMessage(imageUrl, file.name);
             };
@@ -253,6 +307,14 @@ function bindDomEvents() {
     // 绑定对话框事件
     document.getElementById('cancelEndCall').addEventListener('click', window.cancelEndCall);
     document.getElementById('confirmEndCall').addEventListener('click', window.confirmEndCall);
+
+    // 绑定通话请求对话框事件
+    if (document.getElementById('rejectCall')) {
+        document.getElementById('rejectCall').addEventListener('click', window.rejectCall);
+    }
+    if (document.getElementById('acceptCall')) {
+        document.getElementById('acceptCall').addEventListener('click', window.acceptCall);
+    }
 }
 
 /**