在React.js中自动刷新页面

时间:2018-01-03 07:43:09

标签: javascript reactjs service-worker background-sync

我需要不断更新/刷新我的页面,以确保它与我的服务器同步。目前,我正在使用setInterval,但我读到serviceWorkers可能会以更好的方式解决我的问题。是否建议使用serviceWorkers? (background-sync似乎是一个很好的起点。)

或者还有其他选择吗?

4 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

没有。 setInterval是要走的路。

ServiceWorker用于缓存应用程序的内容以供脱机使用(浏览器将按照在serviceworker中定义的方式下载站点,您可以脱机使用某些功能)。但是,您无法联系您的服务器,因为这需要访问Internet。

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

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

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

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

我遇到了类似的挑战,我打算尝试https://www.npmjs.com/package/react-refetch。我的应用程序不够复杂,不需要redux,所以我宁愿避免使用它。