PHP 即時顯示伺服器時間

需求分析

網頁顯示「即時時間」有兩種架構：

1. 純前端 JS：用戶端 new Date() 取本地時間，setInterval 更新。缺點：受客戶端時鐘誤差、時區設定影響。
2. 伺服器時間 + 前端同步：PHP 輸出伺服器基準時間，JS 在此基準上遞增。優點：全站用戶看到一致時間，適合倒數計時、拍賣、直播場景。

PHP + JS 同步實作

<?php
header('Content-Type: text/html; charset=utf-8');
date_default_timezone_set('Asia/Taipei'); // 設定伺服器時區

// 輸出基準時間變數給 JS
$now = new DateTime();
?>

進階：AJAX 週期性校準

長時間開啟頁面會有 JS 計時誤差（約幾秒/天），建議每 5-10 分鐘請求一次伺服器校準：

async function syncTime() {
    try {
        const res = await fetch('/api/time'); // 回傳 {timestamp: 1700000000}
        const serverTime = new Date(res.timestamp * 1000);
        // 更新 baseTime 變數...
    } catch (e) { console.warn('時間同步失敗', e); }
}
setInterval(syncTime, 5 * 60 * 1000);

API 端點實作

<?php
// /api/time.php
header('Content-Type: application/json');
echo json_encode(['timestamp' => time(), 'timezone' => 'Asia/Taipei']);
?>

現代化替代方案

• WebSocket / SSE：伺服器主動推送時間，零延遲、零輪詢。
• Time API：Time API（實驗階段）提供高精度時間基準。
• 前端框架整合：Vue/React 可封裝為 <ServerClock /> 元件，內部用 ref/useState 管理狀態。

關鍵點總結

採用「伺服器基準 + 前端遞增 + 定期校準」架構，即可實現精準、一致的即時時間顯示。