feat: 文字图片传输支持,去掉无用交互和接口

2026-03-12 11:07:46 +08:00 · 2025-08-07 14:03:53 +08:00
parent 7cb0d34fb1
commit baf67742f3
9 changed files with 666 additions and 244 deletions
--- a/chuan-next/src/components/TextTransferWrapper.tsx
+++ b/chuan-next/src/components/TextTransferWrapper.tsx
@@ -0,0 +1,192 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { useWebRTCTransfer } from '@/hooks/useWebRTCTransfer';
+import TextTransfer from './TextTransfer';
+
+export default function TextTransferWrapper() {
+  const webrtc = useWebRTCTransfer();
+  const [currentRole, setCurrentRole] = useState<'sender' | 'receiver' | undefined>();
+  const [pickupCode, setPickupCode] = useState<string>();
+
+  // 创建房间并建立连接
+  const handleCreateWebSocket = useCallback(async (code: string, role: 'sender' | 'receiver') => {
+    console.log('=== TextTransferWrapper: 开始建立WebRTC连接 ===');
+    console.log('房间码:', code, '角色:', role);
+    
+    setCurrentRole(role);
+    setPickupCode(code);
+
+    try {
+      // 建立WebRTC连接
+      await webrtc.text.connect(code, role);
+      console.log('WebRTC连接请求已发送');
+    } catch (error) {
+      console.error('建立WebRTC连接失败:', error);
+    }
+  }, [webrtc.text.connect]);
+
+  // 处理文字消息接收
+  useEffect(() => {
+    if (!webrtc.text.onMessageReceived) {
+      return;
+    }
+
+    const unsubscribeMessage = webrtc.text.onMessageReceived((message) => {
+      console.log('收到文字消息:', message);
+      
+      // 检查是否是图片消息
+      if (message.text && message.text.startsWith('[IMAGE]')) {
+        const imageData = message.text.substring(7); // 移除 '[IMAGE]' 前缀
+        window.dispatchEvent(new CustomEvent('websocket-message', {
+          detail: {
+            type: 'image-send',
+            payload: { imageData }
+          }
+        }));
+      } else {
+        // 普通文字消息
+        window.dispatchEvent(new CustomEvent('websocket-message', {
+          detail: {
+            type: 'text-content',
+            payload: { text: message.text }
+          }
+        }));
+      }
+    });
+
+    return unsubscribeMessage;
+  }, [webrtc.text.onMessageReceived]);
+
+  // 处理实时文本更新接收
+  useEffect(() => {
+    if (!webrtc.text.onRealTimeText) {
+      return;
+    }
+
+    const unsubscribeRealTime = webrtc.text.onRealTimeText((text: string) => {
+      console.log('收到实时文本更新:', text);
+      window.dispatchEvent(new CustomEvent('websocket-message', {
+        detail: {
+          type: 'text-update',
+          payload: { text }
+        }
+      }));
+    });
+
+    return unsubscribeRealTime;
+  }, [webrtc.text.onRealTimeText]);
+
+  // 监听连接状态变化并发送事件
+  useEffect(() => {
+    console.log('WebRTC文字传输状态:', {
+      isConnected: webrtc.text.isConnected,
+      isConnecting: webrtc.text.isConnecting,
+      isWebSocketConnected: webrtc.text.isWebSocketConnected,
+      error: webrtc.text.connectionError
+    });
+
+    // WebSocket信令连接成功时发送事件
+    if (webrtc.text.isWebSocketConnected) {
+      console.log('WebSocket信令连接成功，通知TextTransfer组件');
+      window.dispatchEvent(new CustomEvent('websocket-message', {
+        detail: { 
+          type: 'websocket-signaling-connected',
+          payload: { code: pickupCode, role: currentRole }
+        }
+      }));
+    }
+
+    // WebRTC数据通道连接中
+    if (webrtc.text.isConnecting) {
+      console.log('WebRTC数据通道连接中，通知TextTransfer组件');
+      window.dispatchEvent(new CustomEvent('websocket-message', {
+        detail: { 
+          type: 'webrtc-connecting',
+          payload: { code: pickupCode, role: currentRole }
+        }
+      }));
+    }
+
+    // WebRTC数据通道连接成功
+    if (webrtc.text.isConnected) {
+      console.log('WebRTC数据通道连接成功，通知TextTransfer组件');
+      window.dispatchEvent(new CustomEvent('websocket-message', {
+        detail: { 
+          type: 'webrtc-connected',
+          payload: { code: pickupCode, role: currentRole }
+        }
+      }));
+    }
+
+    if (webrtc.text.connectionError) {
+      console.error('WebRTC连接错误:', webrtc.text.connectionError);
+      window.dispatchEvent(new CustomEvent('websocket-message', {
+        detail: {
+          type: 'webrtc-error',
+          payload: { message: webrtc.text.connectionError }
+        }
+      }));
+    }
+  }, [webrtc.text.isConnected, webrtc.text.isConnecting, webrtc.text.isWebSocketConnected, webrtc.text.connectionError, pickupCode, currentRole]);
+
+  // 模拟WebSocket对象来保持与TextTransfer的兼容性
+  const mockWebSocket = {
+    send: (data: string) => {
+      // 数据必须通过WebRTC数据通道发送，不能通过WebSocket
+      if (!webrtc.text.isConnected) {
+        console.warn('WebRTC数据通道未建立，无法发送数据。当前状态:', {
+          isWebSocketConnected: webrtc.text.isWebSocketConnected,
+          isConnected: webrtc.text.isConnected
+        });
+        return;
+      }
+
+      try {
+        const message = JSON.parse(data);
+        console.log('通过WebRTC数据通道发送消息:', message.type);
+        
+        switch (message.type) {
+          case 'text-update':
+            // 通过WebRTC数据通道发送实时文本更新
+            if (webrtc.text.sendRealTimeText) {
+              webrtc.text.sendRealTimeText(message.payload.text);
+            }
+            break;
+            
+          case 'text-send':
+            // 通过WebRTC数据通道发送完整文字消息
+            webrtc.text.sendMessage(message.payload.text);
+            break;
+            
+          case 'image-send':
+            // 通过WebRTC数据通道发送图片数据
+            const imageMessage = `[IMAGE]${message.payload.imageData}`;
+            webrtc.text.sendMessage(imageMessage);
+            break;
+            
+          default:
+            console.log('未处理的消息类型:', message.type);
+        }
+      } catch (error) {
+        console.error('通过WebRTC发送消息失败:', error);
+      }
+    },
+    
+    readyState: webrtc.text.isConnected ? 1 : 0, // WebSocket.OPEN = 1，但实际是WebRTC状态
+    close: () => {
+      webrtc.text.disconnect();
+    }
+  };
+
+  return (
+    <TextTransfer
+      websocket={mockWebSocket as any}
+      isConnected={webrtc.text.isConnected} // WebRTC连接状态
+      isWebSocketConnected={webrtc.text.isWebSocketConnected} // WebSocket信令状态
+      currentRole={currentRole}
+      pickupCode={pickupCode}
+      onCreateWebSocket={handleCreateWebSocket}
+    />
+  );
+}