JSP 頁面實現資料庫即時同步的解決方案

當用戶在 A 地點向資料庫插入資料時，B 地點的頁面能即時看到變更，這屬於典型的「伺服器推送」或「即時同步」場景。傳統 JSP 基於請求-回應模型，無法主動推送更新，需引入額外機制。

主流實現方案對比

推薦方案：Spring + WebSocket（STOMP）

若專案已使用 Spring 框架，整合 WebSocket 最為順暢：

1. 加入依賴

<dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-websocket</artifactId>
</dependency>
<dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-messaging</artifactId>
</dependency>

2. 配置 WebSocket

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/sync").withSockJS(); // 支援 SockJS 降級
    }
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic");
        registry.setApplicationDestinationPrefixes("/app");
    }
}

3. 控制器廣播變更

@Controller
public class DataSyncController {
    @Autowired private SimpMessagingTemplate messagingTemplate;

    @PostMapping("/insert")
    public ResponseEntity<Void> insertData(@RequestBody DataDTO dto) {
        dataService.save(dto);
        messagingTemplate.convertAndSend("/topic/dataUpdate", dto); // 推送給所有訂閱者
        return ResponseEntity.ok().build();
    }
}

4. JSP 前端訂閱

<script src="https://cdn.jsdelivr.net/npm/sockjs-client/dist/sockjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/stompjs/lib/stomp.min.js"></script>
<script>
  const socket = new SockJS('/sync');
  const stompClient = Stomp.over(socket);
  stompClient.connect({}, () => {
    stompClient.subscribe('/topic/dataUpdate', (message) => {
      const newData = JSON.parse(message.body);
      appendToTable(newData); // 更新頁面 DOM
    });
  });
</script>

替代方案：Spring Task 定時任務 + AJAX 輪詢

若不想引入 WebSocket，可用 Spring 的 @Scheduled 定時檢查資料庫變更，配合前端 setInterval 輪詢：

@Component
public class DataChangeDetector {
    private Long lastMaxId = 0L;

    @Scheduled(fixedRate = 3000) // 每 3 秒檢查一次
    public void checkChanges() {
        Long currentMaxId = dataRepository.findMaxId();
        if (currentMaxId > lastMaxId) {
            lastMaxId = currentMaxId;
            // 可結合 ApplicationEvent 發布事件，或直接更新快取
        }
    }
}

前端每隔幾秒請求 /api/latest 取得增量資料並追加渲染。

注意事項

• 並發控制：多用戶同時寫入時，資料庫需加樂觀鎖或唯一約束。
• 連線管理：WebSocket 需處理心跳、重連、用戶離線清理。
• 安全性：訂閱端點需驗證身份，防止未授權獲取資料。
• 效能調優：大量客戶端時，考慮引入 Redis Pub/Sub 或 Kafka 做訊息代理。

綜上，WebSocket 方案最適合「即時、雙向、高頻」的同步需求；若頻率較低、單向推送，SSE 或輪詢即可滿足。