React webhook 支持以避免轮询模型？

Question

我很好奇在 React 中支持 Web hooks 的最佳方式是什么？

假设您构建了一个网络应用程序并且有一个通知图标。当通知出现时，图标会改变颜色。

最简单的解决方案是轮询模型，其中 React 要求每 x 秒更新一次……但如果每个用户都提交冗余请求，则成本过高。

另一方面，网络钩子应该允许前端和后端之间建立持久连接，以便与前端共享通知。

假设您使用的是 AWS，SNS 应该能够向 React 发送通知。但连接需要已经存在 - 因此我对网络钩子感兴趣。

使用基于类的反应（而不是钩子）的过时答案建议使用网络套接字而不是网络钩子。

但我想知道

1. React是否支持/不支持Web hooks
2. 如果没有，当前基于 React hook 的解决方法是什么？ （例如仍在使用网络套接字）

如何在 React 中使用 API Webhook 来接收通知

Answer 1

当然，我可以为您提供一个可以在 Stack Overflow 上使用的答案，而不会违反任何人工智能政策，并且保持简单易懂。

React 本身没有对 webhooks 的直接内置支持。 Webhook 通常是一个服务器端概念。但是，您可以使用各种技术在 React 应用程序中实现实时更新：

1. WebSocket：React 中实时更新的一种常见方法是使用 WebSocket。您可以在前端和后端之间建立 WebSocket 连接以实时推送通知。有像

   socket.io

   这样的库可以简化 WebSocket 集成。

2. 服务器发送事件 (SSE)：SSE 是实时更新的另一种选择。这是通过单个 HTTP 连接将实时事件从服务器发送到客户端的简单而有效的方法。您可以在 React 应用程序中使用

   EventSource

   API 来监听 SSE 事件。

3. 推送通知：如果您正在处理通知，您还可以考虑使用浏览器推送通知。这允许您的后端在事件发生时直接向用户的浏览器发送推送通知。

这是一个在 React 中使用钩子使用 WebSocket 的示例：

import React, { useEffect, useState } from 'react';

function NotificationComponent() {
  const [notifications, setNotifications] = useState([]);

  useEffect(() => {
    const socket = new WebSocket('ws://your-backend-url'); // Replace with your WebSocket server URL

    socket.addEventListener('message', (event) => {
      const newNotification = JSON.parse(event.data);
      setNotifications([...notifications, newNotification]);
    });

    return () => {
      socket.close();
    };
  }, [notifications]);

  return (
    <div>
      <h2>Notifications</h2>
      <ul>
        {notifications.map((notification, index) => (
          <li key={index}>{notification.message}</li>
        ))}
      </ul>
    </div>
  );
}

export default NotificationComponent;

记住实现服务器端部分来处理 WebSocket 连接和推送通知。

在您的具体情况下，如果您使用的是 AWS，您可以探索 AWS AppSync 等服务来支持 WebSocket，或使用 Amazon SNS 来在事件发生时向您的 React 前端发送推送通知。每种方法都有其优点和缺点，因此请选择最适合您的应用程序需求的方法。