您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

雙手機屏幕同步互通技術原理：位置廣播與實時渲染

編輯：程式設計綜合問答

兩台手機實現「雙屏互通」：一台操作，另一台實時同步顯示。核心是狀態同步 + 實時通訊。

核心數據模型

// 每次位置變化發送的數據包
{
    "deviceId": "phone_A_001",  // 手機唯一標識
    "x": 320,                   // 螢幕 X 座標
    "y": 568,                   // 螢幕 Y 座標
    "action": "touch_move",     // 事件類型：down/move/up/click
    "timestamp": 1700000000123  // 時間戳，用於去抖/排序
}

技術架構

┌─────────────┐     WebSocket / UDP / WebRTC      ┌─────────────┐
│  Phone A    │ ◄─────────────────────────────────► │  Phone B    │
│ (Controller)│         位置數據廣播                 │  (Viewer)   │
└─────────────┘                                     └─────────────┘
       │                                                   │
       ▼                                                   ▼
  觸摸事件監聽                                        Canvas/View 繪製
  發送座標                                             接收座標渲染

關鍵實現細節

1. 通訊協議選擇

方案	優點	缺點	適用場景
WebSocket	可靠、雙向、穿透 NAT	需服務器中轉、延遲稍高	跨網絡、多設備
UDP Broadcast	無需服務器、極低延遲	僅局域網、丟包無重傳	同一 WiFi 熱點
WebRTC DataChannel	P2P 直連、低延遲、加密	需信令服務器、實現複雜	實時遊戲、遠程桌面
Bluetooth/BLE	無需網絡、功耗低	帶寬極低、距離短	離線近場互動

2. 渲染同步策略

光標同步：接收端繪製一個半透明圓點/十字光標跟隨座標
觸摸軌跡：記錄最近 N 點，繪製平滑曲線（Catmull-Rom 插值）
操作回放：接收端維護事件隊列，按時間戳重放，修正網絡抖動
狀態同步：除座標外，同步縮放級別、滾動位置、當前頁面 ID

3. 性能優化

// 節流發送：每 16ms (60fps) 最多發一次
let lastSent = 0;
function onTouchMove(x, y) {
    const now = Date.now();
    if (now - lastSent < 16) return;
    lastSent = now;
    send({x, y, action: 'move'});
}

// 批量發送：積累 5-10 個點打包發送
const buffer = [];
function bufferSend(point) {
    buffer.push(point);
    if (buffer.length >= 8) {
        sendBatch(buffer.splice(0));
    }
}