【m】状态同步

2026-03-12 17:53:34 +08:00
parent 7b92f69d6a
commit 4ce99ae140
5 changed files with 93 additions and 23 deletions
--- a/WebApp/client/public/onebyone/index.html
+++ b/WebApp/client/public/onebyone/index.html
@@ -112,7 +112,7 @@
                    与 Sarah 的通话
                </h1>
                <div class="flex items-center gap-3 text-xs text-gray-400">
-                    <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
+                    <span id="remoteNetworkIndicator" class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
                    <span id="remoteNetworkQuality" class="flex items-center gap-1">
                        <i class="fas fa-signal"></i>
                        <span>优秀</span>
--- a/WebApp/client/public/onebyone/models.js
+++ b/WebApp/client/public/onebyone/models.js
@@ -83,8 +83,8 @@ const mockCallSession = {
        id: "user-remote-002",
        name: "Unity",
        avatar: "/images/p2.png",
-        status: "online", // online | offline | connecting
-        networkQuality: "excellent", // excellent | good | fair | poor
+        status: "offline", // online | offline | connecting
+        networkQuality: "no_signal", // excellent | good | fair | poor | no_signal
        mediaState: {
            audio: true,
            video: true,
--- a/WebApp/client/public/onebyone/renderer.js
+++ b/WebApp/client/public/onebyone/renderer.js
@@ -20,6 +20,8 @@ class UIRenderer {
            callDuration: document.getElementById('callDuration'),
            encryptionBadge: document.getElementById('encryptionBadge'),
            unreadBadge: document.getElementById('unreadBadge'),
+            remoteNetworkIndicator: document.getElementById('remoteNetworkIndicator'),
+            remoteNetworkQuality: document.getElementById('remoteNetworkQuality'),

            // 远端视频
            remoteVideo: document.getElementById('remoteVideo'),
@@ -255,10 +257,9 @@ class UIRenderer {

    // 渲染header中的网络状态
    renderHeaderNetworkStatus(networkQuality) {
-        const networkQualityElement = document.getElementById('remoteNetworkQuality');
-        if (networkQualityElement) {
-            const textElement = networkQualityElement.querySelector('span');
-            const iconElement = networkQualityElement.querySelector('i');
+        if (this.elements.remoteNetworkQuality) {
+            const textElement = this.elements.remoteNetworkQuality.querySelector('span');
+            const iconElement = this.elements.remoteNetworkQuality.querySelector('i');

            if (textElement && iconElement) {
                let qualityText = '未知';
@@ -350,10 +351,7 @@ class UIRenderer {
                    this.elements.disconnectedOverlay.classList.add('hidden');
                }

-                // 隐藏占位背景
-                if (this.elements.remoteVideoPlaceholder) {
-                    this.elements.remoteVideoPlaceholder.classList.add('hidden');
-                }
+

                // 获取视频轨道并处理分辨率
                const videoTracks = stream.getVideoTracks();
@@ -380,6 +378,15 @@ class UIRenderer {
                            this.adjustVideoSize(this.elements.remoteVideo, newResolution);
                        });
                    }
+                    // 隐藏连接中提示
+                    if (this.elements.connectingOverlay) {
+                        this.elements.connectingOverlay.classList.add('hidden');
+                    }
+
+                    // 隐藏占位背景
+                    if (this.elements.remoteVideoPlaceholder) {
+                        this.elements.remoteVideoPlaceholder.classList.add('hidden');
+                    }
                } else {
                    console.log('No valid video tracks in remote stream');
                    // 清空视频元素的源
@@ -507,8 +514,14 @@ class UIRenderer {
            const remoteStatusIndicator = remoteUserElement.querySelector('.absolute.-bottom-1.-right-1.w-3.h-3');
            if (remoteStatusIndicator) {
                if (remoteUser.status === 'online') {
-                    remoteStatusIndicator.classList.remove('hidden');
-                    remoteStatusIndicator.className = 'absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-slate-900';
+                    // 根据网络质量设置状态指示器颜色
+                    if (remoteUser.networkQuality === 'no_signal') {
+                        remoteStatusIndicator.classList.remove('hidden');
+                        remoteStatusIndicator.className = 'absolute -bottom-1 -right-1 w-3 h-3 bg-gray-500 rounded-full border-2 border-slate-900';
+                    } else {
+                        remoteStatusIndicator.classList.remove('hidden');
+                        remoteStatusIndicator.className = 'absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-slate-900';
+                    }
                } else {
                    remoteStatusIndicator.classList.add('hidden');
                }
@@ -726,6 +739,11 @@ class UIRenderer {
                    networkStatusText.textContent = this.getNetworkQualityText(quality);
                    networkStatusText.className = 'text-red-500';
                    break;
+                case 'no_signal':
+                    icon.className = 'fas fa-times-circle text-gray-500';
+                    networkStatusText.textContent = this.getNetworkQualityText(quality);
+                    networkStatusText.className = 'text-gray-500';
+                    break;
                default:
                    icon.className = 'fas fa-question-circle text-gray-400';
                    networkStatusText.textContent = '未知';
@@ -754,6 +772,9 @@ class UIRenderer {
                case 'poor':
                    statusClass = 'text-red-500';
                    break;
+                case 'no_signal':
+                    statusClass = 'text-gray-500';
+                    break;
                default:
                    statusClass = 'text-gray-400';
            }
@@ -762,8 +783,26 @@ class UIRenderer {
            this.elements.connectionQuality.textContent = `连接质量: ${qualityText}`;
            this.elements.connectionQuality.className = `text-xs ${statusClass}`;
        }
+
+        // 同步更新头部网络指示器
+        this.updateHeaderNetworkIndicator(quality);
    }

+    // 更新头部网络指示器
+    updateHeaderNetworkIndicator(networkQuality) {
+        if (!this.elements.remoteNetworkIndicator) return;
+
+        // 根据网络质量设置指示器颜色
+        if (networkQuality === 'no_signal') {
+            // 无信号时显示灰色点，取消动画
+            this.elements.remoteNetworkIndicator.className = 'w-2 h-2 bg-gray-500 rounded-full';
+        } else {
+            // 有信号时显示绿色点，保持动画
+            this.elements.remoteNetworkIndicator.className = 'w-2 h-2 bg-green-500 rounded-full animate-pulse';
+        }
+    }
+
+
    // 渲染通话结束
    renderCallEnded() {
        console.log('Call ended');
@@ -787,7 +826,8 @@ class UIRenderer {
            'excellent': '优秀',
            'good': '良好',
            'fair': '一般',
-            'poor': '较差'
+            'poor': '较差',
+            'no_signal': '无信号'
        };
        return qualityMap[quality] || quality;
    }
--- a/WebApp/client/public/onebyone/store.js
+++ b/WebApp/client/public/onebyone/store.js
@@ -47,11 +47,6 @@ class CallStateManager {

    // 初始化
    async init() {
-        // 启动通话时长计时器
-        this.durationInterval = setInterval(() => {
-            this.state.session.duration++;
-            this.notify({ type: 'DURATION_UPDATE', duration: this.state.session.duration });
-        }, 1000);
        // 初始化配置
        await this.setupConfig();
        // 获取本地摄像头视频流
@@ -356,7 +351,17 @@ class CallStateManager {
                // 通知UI远程流已更新
                this.notify({ type: 'REMOTE_STREAM_OBTAINED', stream: this.state.remoteStream });
                console.log('Notified UI about remote stream update');
-
+                // 只有当收到远程流时才更新远程用户状态为在线
+                if (this.state.session.remoteUser.status !== 'online') {
+                    this.updateRemoteUserStatus('online');
+                    // 更新远程用户网络质量为好
+                    this.updateRemoteUserNetworkQuality('good');
+                    // 启动通话时长计时器
+                    this.durationInterval = setInterval(() => {
+                        this.state.session.duration++;
+                        this.notify({ type: 'DURATION_UPDATE', duration: this.state.session.duration });
+                    }, 1000);
+                }
                // 如果是音频轨道，启动远程音频活动检测
                if (data.track.kind === 'audio') {
                    this.startRemoteActivityDetection();
@@ -389,6 +394,7 @@ class CallStateManager {
        await this.renderstreaming.start();
        await this.renderstreaming.createConnection(connectionId);

+
        // 启动网络质量检测
        this.startNetworkQualityDetection();

@@ -408,6 +414,11 @@ class CallStateManager {
    async hangUp() {
        this.clearStatsMessage(); // 清除统计信息
        this.stopNetworkQualityDetection(); // 停止网络质量检测
+        // 停止通话时长计时器
+        if (this.durationInterval) {
+            clearInterval(this.durationInterval);
+            this.durationInterval = null;
+        }
        console.log(`Disconnect peer on ${this.connectionId}.`);

        // 删除连接并停止WebRTC
@@ -421,6 +432,9 @@ class CallStateManager {
            this.renderstreaming = null;
        }

+        // 更新远程用户状态为离线
+        this.updateRemoteUserStatus('offline');
+        this.updateRemoteUserNetworkQuality('no_signal');
        this.connectionId = null;
        this.state.session.status = 'ended';
        this.notify({ type: 'CALL_ENDED' });
@@ -466,9 +480,22 @@ class CallStateManager {
        // 通知UI更新用户列表
        this.notify({ type: 'USER_LIST_UPDATE', localUser: this.state.session.localUser, remoteUser: this.state.session.remoteUser });
    }
+
+    // 更新远端用户状态
+    updateRemoteUserStatus(status) {
+        this.state.session.remoteUser.status = status;
+        this.notify({ type: 'REMOTE_MEDIA_CHANGE', localUser: this.state.session.localUser, remoteUser: this.state.session.remoteUser });
+    }
+    updateRemoteUserNetworkQuality(networkQuality) {
+        this.state.session.remoteUser.networkQuality = networkQuality;
+        this.notify({ type: 'REMOTE_MEDIA_CHANGE', localUser: this.state.session.localUser, remoteUser: this.state.session.remoteUser });
+    }
    // 结束通话
    endCall() {
-        clearInterval(this.durationInterval);
+        if (this.durationInterval) {
+            clearInterval(this.durationInterval);
+            this.durationInterval = null;
+        }
        this.state.session.status = 'ended';
        this.notify({ type: 'CALL_ENDED' });

@@ -512,7 +539,7 @@ class CallStateManager {
    simulateNetworkChange() {
        // 模拟网络质量变化

-        const qualities = ['good', 'fair', 'excellent', 'poor'];
+        const qualities = ['good', 'fair', 'excellent', 'poor', 'no_signal'];
        setInterval(() => {
            if (Math.random() > 0.8) {
                const quality = qualities[Math.floor(Math.random() * qualities.length)];
@@ -585,6 +612,9 @@ class CallStateManager {
                } else {
                    quality = 'excellent';
                }
+            } else {
+                // 没有收到任何RTP包，设置为无信号状态
+                quality = 'no_signal';
            }

            // 更新网络质量状态
--- a/WebApp/src/class/websockethandler.ts
+++ b/WebApp/src/class/websockethandler.ts
@@ -336,7 +336,7 @@ function onCandidate(ws: WebSocket, message: any): void {
          onDisconnect(ws, connectionId);
        } else {
          // 发送ping消息
-          ws.send(JSON.stringify({ type: "ping" }));
+          ws.send(JSON.stringify({ from: connectionId, to: "", type: "on-message", data: { type: "ping"} }));
          console.log('WebSocket connection heartbeat, lastActivity: ', (ws as any).lastActivity);
        }
      }, 3000);