通信：数据获取模式

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

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

1. 短轮询

短轮询是客户端定期向服务器重复发送请求以检查更新的方法。

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. 长轮询

长轮询是短轮询的增强，其中客户端发送请求，服务器保持连接打开，直到有新数据返回。

从后端来看，只有当数据更新时才会发送响应，在此之前它将保留请求。如果长时间没有更新则超时处理。

客户端

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. 网络套接字

WebSocket 允许客户端和服务器之间进行全双工通信，使其成为实时数据传输最有效的方法。

客户端打开与服务器的 WebSocket 连接，客户端和服务器都可以通过这个连接互相发送消息。

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 连接提供从服务器到客户端的单向更新流。

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);
};

• 单向通信万岁
• 单个 HTTP 连接
• 挑战 - 资源利用率、浏览器兼容性和非活动选项卡上的行为

例如 - 源、通知

5. 网络钩子

Webhooks 是一种服务器到服务器的通信机制，当事件发生时，服务器将数据发送到预定义的 URL。客户端不需要不断检查服务器是否有更新。

常用于触发系统之间的操作，例如付款通知、GitHub 事件或第三方服务集成。

结论

选择正确的通信方法取决于您的应用程序的要求。 WebSocket 和 SSE 非常适合实时和流数据，而长轮询则在性能和易用性之间提供了平衡。短轮询是针对不频繁更新的简单解决方案，但可能会占用大量资源，而 Webhooks 是服务器到服务器通知的理想选择。

每种技术都有其自身的优点和局限性。了解这些可以帮助您做出明智的决策，以构建高效、响应迅速的 Web 应用程序。

此博客开放供建议和讨论！

以上是通信：数据获取模式的详细内容。更多信息请关注PHP中文网其他相关文章！