如何在不刷新浏览器或在 React 中使用 useEffect 的情况下检测服务器数据更改？

Question

在一个 React 项目中，我正在从特定的 api 获取数据，考虑一些“https://www.api-example.com”（只是一个例子，不是真正的 url），使用方法：get、apiKey、授权和所有这些东西. 现在更具体地说，来自服务器的 json 数据在 React 代码中显示在前端，但是，当 json 数据在每分钟或几秒后或每小时后或没有变化后发生变化时，如何检测变化。

考虑一个简单的例子，我正在向某个人请求一些视频呼叫（VC）请求，我从那个人那里收到的数据是 JSON 格式，并且具有诸如"vc_status":"accepted"或"vc_status":"rejected"的值"vc_status":"rejected"或"vc_status":"reshedule" ，无论如何。 其根据人的选择，给 select 所需的数据。 也许他会在 1 分钟或 30 分钟后接受请求，或者拒绝或重新安排。 我的职责是获取该数据并相应地反映到 UI。

现在要从那个人那里获取数据，以下是我使用的方法： 方法 1：useEffect()

const [newRequest, setNewRequest] = useState("")

const newData = () => {
try {
fetch(`https://www.api-example.com/video/requests`,{
method: get,
headers: {
   ApiKey:'hbhasdgasAsas',
   Authorization: '......'
}
}).then((data) => data.json()).then((data) => setNewRequest(data.vc_request))
}
}

useEffect(() => {
newData()
})

然后在后面的代码中使用 newRequest 数据

不可行：useEffect 占用大量资源并在某个特定时间冻结服务器

方法二：setInterval()

/* 与上面相同的代码，只有少量更改 */

useEffect(() => {
setInterval(() =>{
 newData()
}, 10000)
}, [])

不可行：这里的服务器利用率很高，虽然 10 秒后，但它仍然冻结服务器

最终，我的意图是获得 VC 状态并相应地反映在前端而不使用 useEffect 或 setInterval，即使它已使用但不应该是资源密集型的。 我的职责是只管理前端并从服务器获取数据并反映到 UI

那么从服务器获取“更改的 json 数据”并显示到前面的最佳解决方案是什么。 任何解决方案都受到高度赞赏

Answer 1

做到这一点的唯一好方法是向服务器更改/添加功能，以便它可以告诉客户端信息已更改，而不是客户端必须定期从服务器请求信息。

这可以通过WebSockets （Stack Exchange 用于向用户提供有关收件箱消息、声誉变化等的实时警报的相同技术）来完成。

如果您将服务器设置为具有将数据 (JSON) 发送回客户端的套接字端点：

• 当套接字第一次连接时，并且
• 当服务器上的数据发生变化时

然后你应该能够在前端有类似下面的代码：

useEffect(() => {
  const socket = new WebSocket('wss://some-website.com/socket');
  socket.addEventListener('message', ({ data }) => {
    const parsed = JSON.parse(data);
    setNewRequest(parsed.vc_request);
  });
  return () => socket.close();
}, []);

如果您无法控制服务器，并且服务器不提供类似的东西，那么您就不走运了，您已经提到的重复获取是您唯一的选择。

如果服务器在 10 秒后“冻结”（不确定实际存在什么问题），我想您可以尝试将延迟增加到一两分钟。

useEffect(() => {
  setInterval(() =>{
    newData()
  }, 10000)
}, []);

不可行：useEffect 占用大量资源并在某个特定时间冻结服务器

useEffect根本不是资源密集型的。