如何每 n 分钟用数据更新 Web 应用程序答案

【问题标题】：How to update web application with data every n minutes如何每 n 分钟用数据更新 Web 应用程序
【发布时间】：2013-09-29 06:24:08
【问题描述】：

我想创建一个显示来自公共 api 的数据的 Web 应用程序。我将使用 d3（一个 javascript 数据可视化库）。我想每十分钟从 api 检索一次数据，并更新我的页面（比如流量，或者其他什么）。我没有构建很多 Web 应用程序，如何获取更新？

客户端的 js 是否应该使用计时器从我的应用程序的服务器端请求更新（也许应用程序是用 Rails 或 node.js 编写的）。服务器然后进行 api 调用并异步发送响应？这叫插座吗？我读过 HTML5 提供了套接字。

或者，也许是 AJAX 请求？

或者，我的应用程序的服务器端是否创建一个计时器，进行 api 调用，然后将更新“推送”到视图。这对我来说似乎是错误的，这个应用程序中可能有其他视图，服务器不应该跟踪哪个视图处于活动状态。

这种类型的网络应用程序有标准模式吗？非常感谢任何示例或教程。

【问题讨论】：

【解决方案1】：

AJAX 请求 (XMLHttpRequest) 可能是要走的路。

我在这里有一个非常简单的 XMLHttpRequest 示例（使用 Java 作为后端）：https://stackoverflow.com/a/18028943/1468130

您可以重新创建一个后端以接收任何其他服务器端语言的 HTTP GET 请求。只需回显您检索到的任何数据，xmlhttp.onload() 就会捕获它。

根据您的数据的复杂程度，您可能希望为您选择的服务器端语言找到一个 JSON 库，并将您的数据序列化为 JSON，然后再将其回显到您的 JS。然后你可以使用 JavaScript 的JSON.parse() 方法将你的服务器数据转换成一个可以被客户端脚本轻松使用的对象。

如果你使用 jQuery，它可以非常流畅地处理 AJAX，使用 $.ajax() 可能会比普通的 XMLHttpRequest 更容易。

http://api.jquery.com/jQuery.ajax/ （整个页面都有示例，大部分集中在底部。）

这么多 AJAX 教程的复杂程度让我很恼火。至少使用 jQuery，这很容易。

基本上，你只需要向脚本请求一些东西（发起请求，发送 url 参数），然后等待脚本给你一些东西（触发你的 onload() 或 jqxhr.done() 函数，为这些函数提供data 参数）。

关于您的其他问题：

使用 JavaScript 的 setTimeout() 或 setInterval() 每 600000 毫秒发起一次 AJAX 请求。在请求的 onload 回调中，处理您的数据并适当地更新页面。
响应将是异步的。
这不是套接字。
在这种情况下，“推”可能不是要走的路。

【讨论】：

【解决方案2】：

如果我理解正确并且这个 API 是外部的，那么你的问题可以分为两个独立的子问题：

1) 在服务器上更新数据。服务器应每 N 分钟下载一次数据。因此，它不应连接到客户的 AJAX 调用。如果两个客户同时访问网站，你的服务器会进行两次 API 调用，这是不正确的。

实际上，您应该在服务器上创建一个 CRON 作业，该作业将调用 API 并将其结果存储在服务器上。在这种情况下，您的服务器将始终一次调用一个并缓存相当新的信息。

2) 更新客户数据。如果在不刷新页面的情况下更新客户浏览器中的数据，那么您应该使用某种 Ajax。它可以每 X 分钟向您的服务器发出一次请求以获取新数据或使用所谓的长轮询。

【讨论】：

【解决方案3】：

我认为实现实时 Web 应用程序最有效的方法是使用 Web 套接字从服务器推送更改，而不是从客户端轮询。这样，一旦服务器通知有新数据可用，用户就可以立即看到更改。您可以在the similar post 上阅读更多信息。

我尝试使用名为socket.io 的nodejs 包来制作实时虚拟教室。对我来说效果很好。

【讨论】：