在 React.js 中自动刷新页面

Question

我需要不断更新/刷新我的页面以确保它与我的服务器同步。 目前，我正在使用 setInterval，但我读到 serviceWorkers 可能会以更好的方式解决我的问题。 是否推荐使用 serviceWorkers？ （ 后台同步似乎是一个很好的起点。）

或者还有其他选择吗？

Answer 1

经过一些研究，WebSockets 似乎是在网站上进行实时刷新的最佳选择。 Websockets 有助于在网站和服务器之间保持开放的双向连接，这样只要服务器上有更新，服务器就可以将更改推送到网站。

Answer 2

这假设必须更改 SPA 和 API 中的许多逻辑，但您可以使用 WebSocket 协议而不是 HTTP/HTTPS。

只需使用 wss 向您的 React 应用程序发送通知，以便以您的经典方式在异步 http/https 中获取数据，您可以使用 Redux/Flux 存储数据，它会自动刷新组件。

Answer 3

不，setInterval 是要走的路。

ServiceWorker 用于缓存应用程序的内容以供离线使用（浏览器将下载在 serviceworker 中定义的站点，并且您可以离线使用某些功能）。 但是，您无法联系您的服务器，因为这需要互联网访问。

游戏中出现了背景同步。 让我们假设您有一个类似聊天应用程序（基于 Web）的东西。 您第一次查看应用程序并在后台下载所有文件。 之后，您可以离线查看页面并阅读您已经收到的消息。 首先，您不能发送消息，因为这需要与服务器联系。 但是使用后台同步，您可以安排它在用户下次在线时发送 - 所以只写您的消息并点击发送，它会被保存并在您下次连接到互联网时被推送到服务器。

我认为您正在通过 API 访问服务器的数据，因此服务工作者和后台同步都没有用于这些任务。

只需向您的服务器发送请求并更新 react 应用程序中的数据，就像您现在使用 setInterval 一样。

Answer 4

我有类似的挑战，我计划尝试https://www.npmjs.com/package/react-refetch 。 我的应用程序不够复杂，不需要 redux，所以我宁愿避免这种情况。