【m】消息接收发送

WebApp/client/public/onebyone/chatmessage.js

@@ -76,9 +76,9 @@ export function handleChatMessage(data) {
     const messageType = isImage ? 'file' : 'text';
 
     // 显示通知
-    if (!message.isSelf) {
-        const content = isImage ? '[图片]' : message.content;
-        showNotification(`${message.senderName}: ${content.substring(0, 20)}${content.length > 20 ? '...' : ''}`);
+    if (!data.isSelf) {
+        const content = isImage ? '[图片]' : data.content;
+        showNotification(`${data.senderName}: ${content.substring(0, 20)}${content.length > 20 ? '...' : ''}`);
     }
 }
 

WebApp/client/public/onebyone/renderer.js

@@ -234,10 +234,20 @@ class UIRenderer {
             }
 
             if (this.elements.remoteStatus) {
-                this.elements.remoteStatus.textContent = this.getStatusText(remoteUser.status);
+                // 显示与黄框中一致的状态
+                if (!remoteUser.mediaState.audio) {
+                    this.elements.remoteStatus.textContent = '静音中';
+                } else if (!remoteUser.mediaState.video) {
+                    this.elements.remoteStatus.textContent = '视频关闭';
+                } else {
+                    this.elements.remoteStatus.textContent = this.getStatusText(remoteUser.status);
+                }
             }
         }
 
+        // 同步更新侧边栏用户列表
+        this.renderUserList(this.stateManager.getState().session.localUser, remoteUser);
+
         // 当远程视频关闭时显示占位符
         if (this.elements.remoteVideoPlaceholder) {
             const shouldShowPlaceholder = !remoteUser.mediaState.video;
@@ -479,14 +489,15 @@ class UIRenderer {
 
         // 计算通话成员总数
         let userCount = 1; // 至少有本地用户
-   if (remoteUser.status === 'online' || remoteUser.status === 'connecting') {
-        userCount++; // 只有当远程用户在线或连接中时，增加计数
-    }
+        if (remoteUser.status !== 'offline') {
+            userCount++; // 如果远程用户在线，增加计数
+        }
 
         // 更新通话成员总数显示
-     if (this.elements.userCountDisplay) {
-        this.elements.userCountDisplay.textContent = `通话成员 (${userCount})`;
-    }
+        const userCountElement = this.elements.userList.closest('div').querySelector('h3.text-sm.font-medium.text-gray-400');
+        if (userCountElement) {
+            userCountElement.textContent = `通话成员 (${userCount})`;
+        }
 
         // 渲染本地用户
         const localUserElement = this.elements.userList.querySelector('[data-user-id="local"]');

WebApp/client/public/onebyone/store.js

@@ -336,6 +336,13 @@ class CallStateManager {
             this.state.session.status = 'ongoing';
             this.notify({ type: 'CALL_STATUS_CHANGE', status: 'ongoing' });
 
+            // 连接建立后发送本地用户信息
+            this.sendMessage('user-info', {
+                id: this.state.session.localUser.id,
+                name: this.state.session.localUser.name,
+                avatar: this.state.session.localUser.avatar
+            });
+
             if (this.state.localStream) {
                 const tracks = this.state.localStream.getTracks(); // 获取本地媒体轨道
                 for (const track of tracks) {
@@ -383,6 +390,12 @@ class CallStateManager {
                     this.updateRemoteUserStatus('online');
                     // 更新远程用户网络质量为好
                     this.updateRemoteUserNetworkQuality('good');
+
+                    this.sendMessage('user-info', {
+                        id: this.state.session.localUser.id,
+                        name: this.state.session.localUser.name,
+                        avatar: this.state.session.localUser.avatar
+                    });
                     // 启动通话时长计时器
                     this.durationInterval = setInterval(() => {
                         this.state.session.duration++;
@@ -406,17 +419,39 @@ class CallStateManager {
             if (data.type === 'chat-message') {
                 // 处理聊天
                 // 添加到列表并更新UI
-
                 chatMessage.handleChatMessage(data.message);
+                // 从消息中提取用户信息并更新remoteUser
+                if (data.message && data.message.senderId !== this.state.session.localUser.id) {
+                    this.state.session.remoteUser = {
+                        ...this.state.session.remoteUser,
+                        id: data.message.senderId,
+                        name: data.message.senderName,
+                        avatar: data.message.senderAvatar
+                    };
+                    this.notify({ type: 'REMOTE_MEDIA_CHANGE', mediaState: this.state.session.remoteUser.mediaState });
+                }
             } else if (data.type === 'media-state-changed') {
                 // 处理媒体状态变化
                 console.log('收到媒体状态变化:', data.data);
                 // 更新远程用户的媒体状态
                 this.updateRemoteMedia(data.data);
-            } else if (data.type === 'on-message') {
+            } else if (data.type === 'user-info') {
+                // 处理用户信息更新
+                console.log('收到用户信息:', data.data);
+                if (data.data) {
+                    this.state.session.remoteUser = {
+                        ...this.state.session.remoteUser,
+                        id: data.data.id || this.state.session.remoteUser.id,
+                        name: data.data.name || this.state.session.remoteUser.name,
+                        avatar: data.data.avatar || this.state.session.remoteUser.avatar
+                    };
+                    this.notify({ type: 'REMOTE_MEDIA_CHANGE', mediaState: this.state.session.remoteUser.mediaState });
+                }
             }
 
         };
+
+
         // 启动WebRTC连接
         await this.renderstreaming.start();
         await this.renderstreaming.createConnection(connectionId);
@@ -466,6 +501,21 @@ class CallStateManager {
         this.state.session.status = 'ended';
         this.notify({ type: 'CALL_ENDED' });
     }
+
+    /**
+     * 发送消息
+     * @param {string} type - 消息类型
+     * @param {Object} data - 消息数据
+     */
+    sendMessage(type, data) {
+        if (this.renderstreaming) {
+            this.renderstreaming.sendMessage({
+                type: type,
+                data: data
+            });
+        }
+    }
+
     /**
      * 设置编解码器偏好
      */