持续刷新 HTML 表格 (SPA) 的最佳选择

Question

我们正在寻找一种简单的方法来持续更新 HTML 表 (SPA)以显示收到的“订单”。目前，我们每次想要查看新订单时都必须刷​​新页面。以我有限的前端知识，我可以想到3种方法来做到这一点。我将不胜感激关于最佳方法的建议：

1- 定期（每 10 秒？）发出 AJAX 请求，然后让 JS 框架（Vue 或 React）更新表。

2- 使用 WebSocket（而不是 HTTP）使服务器能够在收到此类新订单时推送数据。

3- 使用通知服务：后端向客户端浏览器订阅的主题发送通知。这会触发前端框架中的一些代码从服务器请求新订单。那可行吗？

同样，我对前端框架（VueJS、React）可以或不能做什么的了解非常有限。我不希望这成为一个完整的项目。我们只是在为（希望如此！）非常常见的用例寻找一个简单的解决方案。谢谢你。

Answer 1

正如您提到的，主要有两种方法。我见过的大多数应用程序如果你使用react js（因为我对vue没有任何想法），它渲染数据的速度很快（更新dom - 它适合你的情况）。

因此，对于我们的一个应用程序，我们也使用了 15 秒的轮询，并且性能良好。在这种情况下，您基本上可以做的是，如果选项卡未处于活动状态，那么您可以通过检查来关闭轮询visibiltyState（chrome 和 firefox 效果很好），并且当选项卡未处于活动状态时，您可以使用此功能暂停轮询，这要归功于@oriol这非常有效。

正如所讨论的，另一个好方法是套接字。您需要一个像nodejs或golang这样的后端，您将在其中有需要发出数据的房间，并且将使用一些名为socket-io的库在前端监听它

我听说过使用appollo graphql，但从未尝试过，你也可以检查一下。

我认为这会让我们更好地理解这个问题。

所以我认为，如果您能负担得起数据量和时间的基础，那么很容易使用setInterval其他大多数人都建议的套接字来实现轮询。

因此，我认为对于更好的解决方案，套接字会很好，但易于实施，并且易于setInterval从客户端负担得起。