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

Posted 2023-02-22

【中文标题】持续刷新 HTML 表格 (SPA) 的最佳选择

【英文标题】：Best option for continuously refreshing an HTML table (SPA)

【发布时间】：2020-04-10 01:33:15

【问题描述】：

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

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

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

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

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

【问题讨论】：

进行 AJAX 请求。没有比这更容易的了。

您要求最好的解决方案 - 最好使用 websockets，因为它们对服务器来说不太重要，而且只有在发送某些更改请求时。所以你不会杀死服务器，而 1000 个用户会一遍又一遍地发送 ajax 请求。

第一个选项称为轮询。因流量过大而阻止服务器的最佳机会。我会选择websockets。但这与前端开发无关。这是一个后端问题。前端将只处理表示层

还有第四种选择，基本上是从 javascript 触发页面刷新，而不是浏览器中的用户操作。它会产生与您现在所做的相同的影响，只是它会比手动触发更频繁......这是您的第一个提议的非 ajax 版本。

这能回答你的问题吗？ In what situations would AJAX long/short polling be preferred over html5 WebSockets?

【参考方案1】：

这完全取决于您希望在任何给定时间运行多少 Web 客户端实例。

即使在没有更改的情况下轮询数据更改，并且同时从多个 Web 客户端执行此操作可能会导致对您自己的基础架构的 DoS 攻击。

WebSockets 甚至Server-sent-events 应该是更可靠的解决方案。

实现客户端是微不足道的，但在后端进行实际的更改检测需要对您的数据进行某种版本控制。数据库行级别的散列应该可以解决问题。还有更复杂的解决方案。

您能否进一步详细说明您的用例？

【讨论】：

不必涉及散列；例如，只要在服务器上调用 OrderManager.addNew 方法，您就可以简单地推送新数据。

【参考方案2】：

编辑答案

正如 cmets 中提到的，如果您计划有许多并发请求，Websocket 确实是提高性能的方法。 Lelio Faieta 在 cmets 中链接了一篇关于长轮询性能的有趣帖子：In what situations would AJAX long/short polling be preferred over HTML5 WebSockets?

老答案

如果您必须每 10 秒刷新一次数据，如上面的 cmets 中所述，ajax 调用很好。正如您提到的，这将很容易使用 jQuery 或更高级的框架来实现。 例如，请在下面找到一个真正的短代码 sn-p 每 10 秒调用一次 API 并更新表格的第一行。

window.setInterval(function() 
  $.getJSON("https://reqres.in/api/users?page=2", function( data ) 
    let length = data.data.length;
    let index = Math.floor(Math.random() * length);
    $("#myTable td:eq(1)").html(data.data[index].first_name);
  )
, 10000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
  <tr>
    <td>Name</td>
    <td>Value</td>
  </tr>
</table>

如您所见，除了您自己的数据逻辑需求之外，这很容易实现。

但是，您可能有动机使用 Websocket 而不是 Ajax 查询。这些已经在这篇文章中讨论过Why use AJAX when WebSockets is available?

【讨论】：

每 10 秒调用一次 ajax 将是服务器性能的噩梦。投票根本不是一个好主意。

我相信，当使用 http/2 时，将利用来自并发请求的相同连接，来自 Google 开发人员文档“HTTP/2 通过引入标头字段可以更有效地使用网络资源并减少对延迟的感知压缩并允许在同一连接上进行多个并发交换”。但是我完全同意 Websocket 会更好

看看this。轮询不是要走的路

感谢您提供这个非常有趣的链接。我相应地编辑了我的答案:)

感谢所有输入的家伙。我应该提到我们正在部署无服务器架构。所以轮询可能不是一场噩梦，因为不会有服务器瓶颈......就AWS API网关而言，我们需要弄清楚的是：做一个websockets端点之间的成本差异（我们收取“连接费用”的费用）分钟”）或仅进行 10 秒轮询。感谢所有输入的家伙。非常感谢。

【参考方案3】：

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

因此，对于我们的一个应用程序，我们也使用了 15 秒的轮询，它表现良好。在这种情况下，您基本上可以做的是，如果选项卡未处于活动状态，那么您可以通过检查 visibiltyState 来关闭轮询（chrome 和 firefox 可以完美运行），并且您可以在选项卡未处于活动状态时使用 @987654321 暂停轮询@感谢@oriol，这很好用。

如前所述，另一种好方法是套接字。您需要一个像 nodejs 或 golang 这样的后端，在那里您将拥有需要发出数据的房间，并且将使用一些名为 socket-io 的库在前端进行监听

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

我认为这样可以更好地理解问题。

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

所以我认为对于一个更好的解决方案，socket 会很好，但易于实现，易于负担，然后来自客户端的setInterval。