通訊：數據獲取模式

發佈於2024-11-07

重大公告！
我開始了我日常的前端系統設計學習之旅。我將在部落格中分享每個模組的見解。所以，這就是開始，還有更多精彩！

在本部落格中，我們將探討前端系統設計所必需的不同資料取得機制，包括短輪詢、長輪詢、WebSocket、伺服器發送事件 (SSE) 和 Webhook。每種技術都滿足向客戶端和伺服器傳輸資料以及從客戶端和伺服器傳輸資料的特定需求，理解它們對於設計可擴展的即時 Web 應用程式至關重要。

1. 短輪詢

短輪詢是客戶端定期向伺服器重複發送請求以檢查更新的方法。

Communication: Data Fetching Patterns

setInterval(async () => {
  const response = await fetch('/api/get-posts');
  const data = await response.json();
  // Update UI with new data
}, 5000); // Poll every 5 seconds

簡短的即時交流
資料沒有持久性
資源效用較少
重複請求導致伺服器負載
頻寬使用量增加

例如 - 股市行情、社群媒體動態

2. 長輪詢

長輪詢是對短輪詢的增強，在短輪詢中，客戶端發送請求，伺服器保持連接打開，直到有新資料要返回。

從後端來看，只有在資料更新時才會發送回應，在此之前它將保留請求。如果長時間沒有更新則逾時處理。

Communication: Data Fetching Patterns

客戶端

async function subscribe() {
  let response = await fetch("/subscribe");

  if (response.status == 502) {
    // Status 502 is a connection timeout error, let's reconnect
    await subscribe();
  } else if (response.status != 200) {
    // An error - let's show it
    showMessage(response.statusText);
    // Reconnect in one second
    await new Promise(resolve => setTimeout(resolve, 1000));
    await subscribe();
  } else {
    // Get and show the message
    let message = await response.text();
    showMessage(message);
    // Call subscribe() again to get the next message
    await subscribe();
  }
}

subscribe();

單一長壽命連接
提供即時更新，請求數量少於短輪詢。
在沒有更新時減少不必要的資料傳輸。
連線可以長時間保持開啟狀態，從而增加伺服器負載。

例如-即時客戶支援聊天

3. 網路套接字

WebSockets 允許客戶端和伺服器之間進行全雙工通信，使其成為即時資料傳輸最有效的方法。

客戶端開啟與伺服器的 WebSocket 連接，客戶端和伺服器都可以透過這個連接互相傳送訊息。

Communication: Data Fetching Patterns

webSocket = new WebSocket(url, protocols);

// Send message
webSocket.send("Here's some text that the server is urgently awaiting!");

// Receive message
webSocket.onmessage = (event) => {
  console.log(event.data);
};

持續雙向通訊
多個函式庫來實現它 - ws、socket.io 等
高效率、低開銷的高頻更新
挑戰 - 與 1 台伺服器保持通訊、處理故障和擴展、佔用資源。

例如-即時聊天應用程式、線上多人遊戲

4. 伺服器發送事件（SSE）

SSE 透過 HTTP 連線提供從伺服器到客戶端的單向更新流。

Communication: Data Fetching Patterns

const evtSource = new EventSource("ssedemo.php");

evtSource.onmessage = (event) => {
  const newElement = document.createElement("li");
  const eventList = document.getElementById("list");

  newElement.textContent = `message: ${event.data}`;
  eventList.appendChild(newElement);
};