数据更改时如何更新 UI？

Posted 2023-02-24

【中文标题】数据更改时如何更新 UI？

【英文标题】：How to update UI when data has changed?

【发布时间】：2012-03-18 19:38:46

【问题描述】：

我有一系列可由用户检索、编辑和保存的 XML 文件。我的意图是允许多个用户同时编辑这些文件。这些 XML 文件的许多部分都与浏览器 UI 中显示的内容相关，例如显示了 <name>My title</name> 节点并且可以对其进行编辑。

我使用的技术是 javascript、php 和一个包含对其他 XML 文件的引用的主 XML 文件（主文件和引用文件都可以在 UI 中编辑）。服务器启用了WebDAV，通过YUI3的io模块使用WebDAV方法来处理检索、保存、集合移动等。

如何根据已编辑和保存的 XML 文件的内容更新正在使用这些资源的 UI？

我知道我可能可以运行 setTimeouts 之类的来检查更新，但让 UI 仅在数据更改时做出响应似乎更直观。

干杯！

【参考方案1】：

您所描述的功能类似于称为服务器推送的技术。您要求做的事情对于 Web 应用程序来说是一件非常棘手的事情（尤其是对于 PHP，它是围绕获得服务的请求和脚本终止的想法而构建的）。

html5 正在引入诸如 websockets 等技术来维护与服务器的持久连接，您可以将 websockets 视为一种解决方案，但它是一项全新的技术，我认为规范还没有最终确定，所以它如果有的话，只会在最新版本的浏览器中实现。

您已经提到了 AJAX 轮询（由 setInterval 驱动），但您也注意到它存在问题。当然，您是对的，本地数据在轮询之间可能会变得陈旧，您将在服务器和任何打开的客户端之间产生大量流量。

另一种方法是所谓的“长轮询”。这个想法是客户端启动与服务器的 AJAX 会话。在服务器上，客户端调用的脚本基本上只是坐在那里等待发生变化。当它发生时，服务器通过发送 JSON/XML/whatever 响应并关闭 AJAX 会话来通知客户端。当客户端收到响应时，它会处理它并启动一个新的 AJAX 连接以等待另一个服务器响应。

这种方法几乎是即时的，因为数据一旦可用就会被推送到客户端。但是，这也意味着与服务器的大量开放连接，这会使服务器承受大量负载。此外，由于语言是围绕请求-响应模型构建的，PHP 脚本并不是真的要长时间运行或休眠。有可能，但可能不建议遵循这种方法。

How do I implement basic "Long Polling"? 有一些长轮询技术的例子。

祝你好运！

【讨论】：

您可能还想查看en.wikipedia.org/wiki/Comet_(programming)，它更笼统地描述了长轮询（又名 COMET）技术

很棒的信息，谢谢 GordonM。我已经阅读了这些链接和一些螺旋式资源 - 我知道我想做的事情必须有一个术语。 “长轮询”和“彗星”将我带到 YUI3 库模块，据称该模块通过带有 IE 回退的 EventSource 处理长轮询。 FWIW，我的项目暂时不需要超过 25 个用户。这种功能是 Node.js 服务器擅长的吗？

无法真正评论 node.js，因为我从未使用过它。但是，鉴于它基于 javascript，因此具有事件模型，我想它会更好地应对。正如我确定您已经从链接中读到的那样，与您必须担心的每个请求相关的也是 Apache 资源。

是的，我还没有完全准备好离开 Apache，但也许有一天 :) 对于不用于大规模生产的基本 Web 服务器是否有一般资源使用“经验法则” ?我应该担心 20 甚至 50 个用户使用长轮询吗？

我怀疑 50 个用户会受到严重伤害。