使用JavaScript和jQuery的简单长轮询示例

Question

我正在尝试创建一个实时的网站分析仪表板，使用jQuery/JavaScript异步地创建一个开放的HTTP连接来轮询服务器上的数据更新。开始可以使用XMLHttpRequest对象或jQuery的$.ajax方法异步地向服务器发送GET或POST请求以请求一些数据。但是，除了使用setInterval方法每30秒发送一次请求之外，我不确定如何使与服务器的连接持久。基本上，我只想发送一个http请求并确保与服务器的连接保持打开状态以进行轮询！我的示例代码使用setInterval如下：

<div id="analytics"></div>
<script>
var analytics = document.getElementById('analytics');
setInterval(function(){
    $.ajax({ url: "http://server.com/", success: function(data){
        analytics.innerHTML = data;
    }, dataType: "json"});
}, 30000);
</script>

- technojas

---

你需要仅发送一个HTTP请求的原因是什么？如果您想要一个持久连接，可以考虑使用WebSockets。 - kennypu

HTTP不是那样工作的。 - charlietfl

@technojas，就像charlietfl所说的那样，HTTP不像TCP连接等，它不是那样工作的。如果你必须要有一个真正的连接，请使用WebSockets。另一方面，我认为频繁发送Ajax请求没有任何问题，特别是每30秒一次。 - kennypu

@jermel - 我只是想向您展示我的当前代码。我不想使用setInterval，我正在寻找一种创建持久性的替代方法。WebSockets听起来不错 - 有例子吗？ - technojas

如果您正在进行长轮询，您需要在服务器端特别小心（非阻塞I/O），请查看socket.io，或者研究comet项目以用于您的服务器。 - jermel

Answer 1

在网上搜索后，我找到了这个答案，它不使用sockets.io或WebSockets，但使用jQuery通过利用其complete方法创建一个人工循环：

<div id="analytics"></div>
<script>
var analytics = document.getElementById('analytics');
(function poll(){
    $.ajax({ url: "server", success: function(data){
        analytics.innerHTML = data;
    }, dataType: "json", complete: poll, timeout: 30000 });
})();
</script>

这篇文章的来源是Technoctave网站的Tian Davis：http://techoctave.com/c7/posts/60-simple-long-polling-example-with-javascript-and-jquery

- technojas

---

根据上述代码，如果超时发生，我认为您会发现投票循环将永久失败。您可能不希望出现这种情况，因此需要采取措施确保它继续运行，例如使用某种自定义超时机制而不是内置的 timeout:30000 方法。 - Beetroot-Beetroot

此外，每当收到一个HTTP响应时，poll将立即被调用 - 没有延迟 - 因此该代码肯定不符合你的非抖动要求。 - Beetroot-Beetroot

@Beetroot-Beetroot 在超时（错误）之后，完整的调用仍将发生，你必须考虑成功。 - Renaud

@Reno，我总是想着成功。这是乐观主义者所做的事情！ - Beetroot-Beetroot

这段代码似乎忽略了超时时间，会疯狂调用循环函数。 - user520655