通信：数据获取模式

发布于2024-11-07

重大公告！
我开始了我日常的前端系统设计学习之旅。我将在博客中分享每个模块的见解。所以，这就是开始，还有更多精彩！

在本博客中，我们将探讨前端系统设计所必需的不同数据获取机制，包括短轮询、长轮询、WebSocket、服务器发送事件 (SSE) 和 Webhooks。每种技术都满足向客户端和服务器传输数据以及从客户端和服务器传输数据的特定需求，理解它们对于设计可扩展的实时 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);
};