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

Question

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

考虑一个简单的例子，我正在向某个人请求一些Vide Call(VC(请求，而我从那个人那里收到的数据是JSON格式的，并且具有"vc_status":"accepted"、"vc_status":"rejected"或"vc_status":"reshedule"之类的值，不管是什么。它基于个人的选择，来选择所需的数据。也许他在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相当耗费资源，并在特定时间冻结服务器

方法2：setInterval((

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

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

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

最终，我的意图是在不使用useEffect或setInterval的情况下获得VC状态，并相应地在前端进行反思，尽管它已经使用，但不应该是资源密集型的。我的职责是只管理前端，从服务器获取数据并反映到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根本不是资源密集型的。