CrossBridge 跨域通信插件架构设计

基于你的需求分析，我设计了一个分层的通信架构来解决复杂的跨域通信场景：

🏗️ 核心架构设计

graph TB
    subgraph "CrossBridge 架构"
        API[CrossBridge API Layer]
        Core[Core Communication Engine]
        Queue[Message Queue System]
        Storage[Storage Manager]

        subgraph "Adapters"
            SW[SharedWorker Adapter]
            PM[PostMessage Adapter]
            BC[BroadcastChannel Adapter]
            WR[WebSocket Relay Adapter]
            IB[Iframe Bridge Adapter]
        end

        subgraph "Management"
            RM[Role Manager]
            LM[Lifecycle Manager]
            EM[Event Manager]
        end
    end

    subgraph "External Integration"
        Mitt[Mitt Event System]
        LocalStorage[localStorage]
        SessionStorage[sessionStorage]
        IndexedDB[IndexedDB]
        Server[WebSocket Server]
    end

    API --> Core
    Core --> Queue
    Core --> Storage
    Core --> SW
    Core --> PM
    Core --> BC
    Core --> WR
    Core --> IB
    Core --> RM
    Core --> LM
    Core --> EM

    Storage --> LocalStorage
    Storage --> SessionStorage
    Storage --> IndexedDB
    EM --> Mitt
    WR --> Server

📋 详细需求分析

1. 通信场景分析

• 独立 Tab 通信: 同域名下不同标签页间通信
• iframe 通信: 主页面与内嵌 iframe 间通信
• 完全跨域通信: 不同一级域名下的页面通信
• 混合角色页面: 页面可同时作为父页面、子页面、独立页面

2. 技术挑战

• 消息队列: 子页面未加载时的消息缓存（已解决）
• 性能优化: 频繁数据传输的性能考虑
• 生命周期管理: 页面加载、卸载状态管理
• 跨域限制: 浏览器的同源策略限制

🎯 核心设计方案

1. 分层架构设计

graph LR
    subgraph "应用层"
        A1[主页面应用]
        A2[iframe 应用]
        A3[独立 Tab 应用]
    end

    subgraph "API 层"
        B1[CrossBridge API]
        B2[Event Emitter]
        B3[Role Manager]
    end

    subgraph "核心层"
        C1[Communication Engine]
        C2[Message Router]
        C3[Queue Manager]
        C4[Storage Manager]
    end

    subgraph "适配器层"
        D1[SharedWorker]
        D2[PostMessage]
        D3[BroadcastChannel]
        D4[WebSocketRelay]
        D5[IframeBridge]
    end

    subgraph "存储层"
        E1[Memory Cache]
        E2[SessionStorage]
        E3[LocalStorage]
        E4[IndexedDB]
    end

    A1 --> B1
    A2 --> B1
    A3 --> B1
    B1 --> C1
    C1 --> D1
    C1 --> D2
    C1 --> D3
    C1 --> D4
    C1 --> D5
    C1 --> C3
    C1 --> C4
    C4 --> E1
    C4 --> E2
    C4 --> E3
    C4 --> E4

2. 页面角色系统

每个页面可以有三种角色：

• 独立页面 (Standalone): 独立的浏览器标签页
• 父页面 (Parent): 包含 iframe 的主页面
• 子页面 (Child): 被嵌入的 iframe 页面

3. 通信适配器策略

flowchart TD
    Start[开始通信] --> Check{检查通信场景}

    Check -->|同域独立Tab| SharedWorker[SharedWorker / BroadcastChannel]
    Check -->|iframe通信| PostMessage[PostMessage]
    Check -->|完全跨域| CrossDomain[WebSocket Relay / Iframe Bridge]

    SharedWorker --> Queue[消息队列处理]
    PostMessage --> Queue
    CrossDomain --> Queue

    Queue --> Storage{需要持久化?}
    Storage -->|是| Persist[存储到本地]
    Storage -->|否| Memory[内存缓存]

    Persist --> Deliver[消息投递]
    Memory --> Deliver

    Deliver --> End[完成]

📦 项目结构设计

packages/cross-bridge/
├── src/
│   ├── core/
│   │   ├── cross-bridge.ts       # 核心主类 (集成队列与存储)
│   │   ├── message-queue.ts      # 消息队列管理器
│   │   └── storage-manager.ts    # 存储管理器
│   ├── adapters/
│   │   ├── base.ts               # 适配器基类
│   │   ├── shared-worker.ts      # SharedWorker 适配器
│   │   ├── post-message.ts       # PostMessage 适配器
│   │   ├── broadcast-channel.ts  # BroadcastChannel 适配器
│   │   ├── websocket-relay.ts    # WebSocket 中继适配器
│   │   └── iframe-bridge.ts      # iframe 桥接适配器
│   ├── workers/
│   │   └── cross-bridge-worker.ts # SharedWorker 脚本
│   ├── types/                    # 类型定义
│   └── utils/                    # 工具函数
├── server/
│   ├── relay-server.ts           # WebSocket 服务端参考实现
│   └── bridge.html               # 静态桥接页面
└── .docs/                        # 文档目录