前端 Polling 輪詢技術：JavaScript 實作完整教學

// 使用 setInterval 實作短輪詢
const POLL_INTERVAL = 3000; // 每 3 秒輪詢一次

const intervalId = setInterval(async () => {
  try {
    const response = await fetch('/api/order-status?orderId=123');
    const data = await response.json();

    console.log('訂單狀態：', data.status);

    // 如果任務完成，停止輪詢
    if (data.status === 'completed' || data.status === 'failed') {
      clearInterval(intervalId);
      console.log('輪詢結束，最終狀態：', data.status);
    }
  } catch (error) {
    console.error('輪詢請求失敗：', error.message);
  }
}, POLL_INTERVAL);

// 如需手動停止輪詢
// clearInterval(intervalId);

// 使用遞迴 setTimeout 實作短輪詢（推薦）
let isPolling = false;
let timeoutId = null;

async function poll() {
  if (!isPolling) return; // 允許外部控制停止

  try {
    const response = await fetch('/api/task-progress?taskId=456');

    if (!response.ok) {
      throw new Error(`伺服器回應錯誤：${response.status}`);
    }

    const data = await response.json();
    updateProgressBar(data.progress); // 更新 UI

    // 任務未完成，繼續輪詢
    if (data.progress < 100) {
      timeoutId = setTimeout(poll, 3000); // 收到回應後，3 秒後再次輪詢
    } else {
      console.log('任務完成！');
      isPolling = false;
    }
  } catch (error) {
    console.error('輪詢失敗：', error.message);
    // 出錯後，5 秒後重試
    timeoutId = setTimeout(poll, 5000);
  }
}

// 開始輪詢
function startPolling() {
  isPolling = true;
  poll();
}

// 停止輪詢
function stopPolling() {
  isPolling = false;
  if (timeoutId) clearTimeout(timeoutId);
}

// 啟動
startPolling();

// Long Polling 實作
let isLongPolling = false;

async function longPoll() {
  while (isLongPolling) {
    try {
      // 使用 AbortController 設定超時，避免永遠等待
      const controller = new AbortController();
      const timeoutId = setTimeout(() => controller.abort(), 30000); // 30 秒超時

      const response = await fetch('/api/notifications/long-poll', {
        signal: controller.signal,
      });
      clearTimeout(timeoutId);

      if (!response.ok) {
        throw new Error(`伺服器回應錯誤：${response.status}`);
      }

      const data = await response.json();

      if (data.type === 'NEW_MESSAGE') {
        displayNotification(data.message); // 處理新訊息
      }

      // 收到回應後，立刻發起下一次 Long Poll（幾乎沒有間隔）

    } catch (error) {
      if (error.name === 'AbortError') {
        // 請求超時（伺服器 30 秒內沒有新資料），這是正常情況
        console.log('Long Poll 超時，立即重新發起請求...');
      } else {
        // 真正的錯誤，等待一段時間再重試
        console.error('Long Poll 失敗：', error.message);
        await sleep(5000); // 等 5 秒後再重試
      }
    }
  }
}

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// 開始 Long Polling
function startLongPolling() {
  isLongPolling = true;
  longPoll();
}

// 停止 Long Polling
function stopLongPolling() {
  isLongPolling = false;
}

// 帶指數退避的 Polling 實作（完整可執行程式碼）

const POLL_CONFIG = {
  url: '/api/task-status?taskId=789',
  interval: 3000,       // 正常輪詢間隔（毫秒）
  maxRetries: 5,        // 最大重試次數
  baseDelay: 1000,      // 退避基礎延遲（毫秒）
  maxDelay: 30000,      // 最大退避延遲（毫秒）
};

// 計算指數退避延遲（加入 Jitter 隨機性，避免所有客戶端同時重試）
function calculateBackoffDelay(retryCount, baseDelay, maxDelay) {
  const exponentialDelay = baseDelay * Math.pow(2, retryCount);
  // Full Jitter：在 0 到指數延遲之間隨機取一個值
  const jitter = Math.random() * exponentialDelay;
  return Math.min(jitter, maxDelay);
}

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function pollWithBackoff(config) {
  let retryCount = 0;
  let isRunning = true;

  // 回傳停止函式，供外部呼叫
  const stop = () => { isRunning = false; };

  while (isRunning) {
    try {
      const response = await fetch(config.url);

      if (!response.ok) {
        // 5xx 或 429 才退避重試，4xx 通常是客戶端問題不重試
        if (response.status >= 500 || response.status === 429) {
          throw new Error(`伺服器錯誤：${response.status}`);
        }
        console.error(`請求失敗（${response.status}），停止輪詢`);
        break;
      }

      const data = await response.json();
      retryCount = 0; // 成功後重設重試計數

      // 更新 UI
      console.log('取得資料：', data);
      updateUI(data);

      // 任務完成，停止輪詢
      if (data.status === 'done' || data.status === 'error') {
        console.log('任務結束，狀態：', data.status);
        isRunning = false;
        break;
      }

      // 正常輪詢間隔
      await sleep(config.interval);

    } catch (error) {
      retryCount++;
      console.error(`輪詢第 ${retryCount} 次失敗：`, error.message);

      if (retryCount >= config.maxRetries) {
        console.error('已達最大重試次數，停止輪詢');
        isRunning = false;
        break;
      }

      // 計算退避延遲並等待
      const delay = calculateBackoffDelay(
        retryCount,
        config.baseDelay,
        config.maxDelay
      );
      console.log(`將在 ${Math.round(delay / 1000)} 秒後重試...`);
      await sleep(delay);
    }
  }

  return stop;
}

// 更新 UI 的函式（模擬）
function updateUI(data) {
  const progressEl = document.querySelector('#progress');
  if (progressEl) progressEl.textContent = `進度：${data.progress}%`;
}

// 啟動輪詢
pollWithBackoff(POLL_CONFIG);

const MAX_RETRIES = 10;
let retryCount = 0;

async function safePoll() {
  if (retryCount >= MAX_RETRIES) {
    console.error('已達最大重試次數，請手動重整頁面');
    showErrorMessage('連線失敗，請稍後再試');
    return;
  }
  // ... 輪詢邏輯
}

let abortController = null;

async function pollWithAbort() {
  // 取消上一次還未完成的請求
  if (abortController) abortController.abort();
  abortController = new AbortController();

  try {
    const response = await fetch('/api/data', {
      signal: abortController.signal,
    });
    const data = await response.json();
    processData(data);
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('請求已被取消');
      return; // 不繼續重試
    }
    // 其他錯誤才處理
    handleError(error);
  }
}

// 在頁面卸載時清理
window.addEventListener('beforeunload', () => {
  if (abortController) abortController.abort();
});

let pollingTimeoutId = null;

function startPolling() {
  pollingTimeoutId = setTimeout(doPoll, 5000);
}

function stopPolling() {
  if (pollingTimeoutId) {
    clearTimeout(pollingTimeoutId);
    pollingTimeoutId = null;
  }
}

// 監聽頁面可見性變化
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    // 頁面被隱藏（切換頁籤）→ 暫停輪詢
    console.log('頁面隱藏，暫停輪詢');
    stopPolling();
  } else {
    // 頁面重新可見 → 恢復輪詢
    console.log('頁面顯示，恢復輪詢');
    startPolling();
  }
});