實現雙頁面實時同步：A 頁面輸入，B 頁面即時顯示的技術方案

需求：兩個獨立網頁 A 和 B，用戶在 A 頁面輸入信息，B 頁面無需刷新即可實時展示。這是典型的「實時雙向/單向數據同步」場景，傳統 JSP 單向請求響應模型難以勝任，需引入長連接或輪詢機制。

三種主流實現路徑

1. WebSocket（推薦：真雙工、低延遲、標準化）

• 後端：Java 用 Spring Boot + spring-boot-starter-websocket，或 Node.js ws 库，建立 /ws/sync 端點。
• 前端 A：new WebSocket(url)，onmessage 發送輸入內容。
• 前端 B：同樣連接，onmessage 直接渲染 DOM。
• 優勢：全雙工通信，服務端可主動推送，適合高實時場景。

2. Server-Sent Events (SSE)（適合單向推送：服務端→客戶端）

• 基於 HTTP 長連接，瀏覽器原生 EventSource API。
• 後端設置 Content-Type: text/event-stream 持續輸出數據。
• 單向場景（如股票行情、通知）實現極簡，自動重連。

3. 長輪詢 / 短輪詢（兼容性最好，資源消耗大）

• 客戶端定時 setInterval(fetch('/api/latest')) 請求最新數據。
• 短輪詢間隔 1-3 秒；長輪詢服務端 hold 住請求直到有新數據返回。
• 無需特殊協議支持，老項目快速接入首選。

最小化 Demo 架構（以 WebSocket 為例）

// 後端 Spring Boot 配置類
@Configuration @EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new SyncHandler(), "/ws/sync").setAllowedOrigins("*");
    }
}

// 處理器
public class SyncHandler extends TextWebSocketHandler {
    private static final Set<WebSocketSession> sessions = ConcurrentHashMap.newKeySet();
    @Override public void afterConnectionEstablished(WebSocketSession session) { sessions.add(session); }
    @Override public void handleTextMessage(WebSocketSession session, TextMessage message) {
        sessions.forEach(s -> { try { s.sendMessage(message); } catch (IOException ignored) {} });
    }
    @Override public void afterConnectionClosed(WebSocketSession session, CloseStatus status) { sessions.remove(session); }
}

前端 A/B 只需幾行 JS 即可雙向同步。選型建議：新項目優先 WebSocket；單向廣播可用 SSE；維舊項目或受限環境用輪詢過渡。