这比我最初的想法简单。基本上你有一个什么都不做的页面，直到你想要发送的数据可用（比如，新消息到达）。
这是一个非常基本的例子，它在 2-10 秒后发送一个简单的字符串。三分之一的机会返回错误 404（在即将到来的 Javascript 示例中显示错误处理）
msgsrv.php
<?php
if(rand(1,3) == 1){
/* Fake an error */
header("HTTP/1.0 404 Not Found");
die();
}
/* Send a string after a random number of seconds (2-10) */
sleep(rand(2,10));
echo("Hi! Have a random number: " . rand(1,10));
?>注意：对于一个真实的站点，在像 Apache 这样的常规 Web 服务器上运行它会快速占用所有 “工作线程” 并使其无法响应其他请求.. 有很多方法可以解决这个问题，但建议写一下像 Python 一样扭曲的 “长轮询服务器”，它不依赖于每个请求的一个线程。 cometD是一种流行的（有多种语言版本可供选择），而Tornado是一个专门为这些任务而设计的新框架（它是为 FriendFeed 的长轮询代码而构建的）...... 但作为一个简单的例子，Apache 绰绰有余！这个脚本很容易用任何语言编写（我选择了 Apache / PHP，因为它们非常常见，我碰巧在本地运行它们）
然后，在 Javascript 中，您请求上述文件（ msg_srv.php ），并等待响应。当你得到一个，你就会对数据采取行动。然后你请求文件并再次等待，对数据采取行动（并重复）
以下是这样一个页面的示例.. 当页面加载时，它发送msgsrv.php文件的初始请求。如果成功，我们将消息附加到#messages div，然后在 1 秒后我们调用再次使用 waitForMsg 函数，触发等待。
1 秒的setTimeout()是一个非常基本的速率限制器，如果没有这个，它可以正常工作，但是如果msgsrv.php 总是立即返回（例如语法错误） - 你会淹没浏览器并且它可以快速冻结。最好检查文件是否包含有效的 JSON 响应，和 / 或保持每分钟 / 秒的运行总计请求，并适当地暂停。
如果页面错误，它会将错误附加到#messages div，等待 15 秒然后再次尝试（与每条消息后等待 1 秒的方式相同）
这种方法的好处是它非常有弹性。如果客户端互联网连接中断，它将超时，然后尝试重新连接 - 这是轮询工作多长时间所固有的，不需要复杂的错误处理
无论如何，使用 jQuery 框架的long_poller.htm代码：
<html>
<head>
<title>BargePoller</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
body{ background:#000;color:#fff;font-size:.9em; }
.msg{ background:#aaa;padding:.2em; border-bottom:1px #000 solid}
.old{ background-color:#246499;}
.new{ background-color:#3B9957;}
.error{ background-color:#992E36;}
</style>
<script type="text/javascript" charset="utf-8">
function addmsg(type, msg){
/* Simple helper to add a div.
type is the name of a CSS class (old/new/error).
msg is the contents of the div */
$("#messages").append(
"<div class='msg "+ type +"'>"+ msg +"</div>"
);
}
function waitForMsg(){
/* This requests the url "msgsrv.php"
When it complete (or errors)*/
$.ajax({
type: "GET",
url: "msgsrv.php",
async: true, /* If set to non-async, browser shows page as "Loading.."*/
cache: false,
timeout:50000, /* Timeout in ms */
success: function(data){ /* called when request to barge.php completes */
addmsg("new", data); /* Add response to a .msg div (with the "new" class)*/
setTimeout(
waitForMsg, /* Request next message */
1000 /* ..after 1 seconds */
);
},
error: function(XMLHttpRequest, textStatus, errorThrown){
addmsg("error", textStatus + " (" + errorThrown + ")");
setTimeout(
waitForMsg, /* Try again after.. */
15000); /* milliseconds (15seconds) */
}
});
};
$(document).ready(function(){
waitForMsg(); /* Start the inital request */
});
</script>
</head>
<body>
<div id="messages">
<div class="msg old">
BargePoll message requester!
</div>
</div>
</body>
</html>作为晃动的一部分，我有一个非常简单的聊天示例。
编辑 :(因为每个人都在这里粘贴他们的代码）
这是使用长轮询和晃动的完整的基于 JSON 的多用户聊天。这是如何进行调用的演示 ，因此请忽略 XSS 问题。没有人首先要对它进行消毒，就不应该进行部署。
请注意，客户端始终与服务器建立连接，并且只要有人发送消息，每个人都应该立即看到它。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Copyright (c) 2008 Dustin Sallings <[email protected]> -->
<html lang="en">
<head>
<title>slosh chat</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<link title="Default" rel="stylesheet" media="screen" href="style.css" />
</head>
<body>
<h1>Welcome to Slosh Chat</h1>
<div id="messages">
<div>
<span class="from">First!:</span>
<span class="msg">Welcome to chat. Please don't hurt each other.</span>
</div>
</div>
<form method="post" action="#">
<div>Nick: <input id='from' type="text" name="from"/></div>
<div>Message:</div>
<div><textarea id='msg' name="msg"></textarea></div>
<div><input type="submit" value="Say it" id="submit"/></div>
</form>
<script type="text/javascript">
function gotData(json, st) {
var msgs=$('#messages');
$.each(json.res, function(idx, p) {
var from = p.from[0]
var msg = p.msg[0]
msgs.append("<div><span class='from'>" + from + ":</span>" +
" <span class='msg'>" + msg + "</span></div>");
});
// The jQuery wrapped msgs above does not work here.
var msgs=document.getElementById("messages");
msgs.scrollTop = msgs.scrollHeight;
}
function getNewComments() {
$.getJSON('/topics/chat.json', gotData);
}
$(document).ready(function() {
$(document).ajaxStop(getNewComments);
$("form").submit(function() {
$.post('/topics/chat', $('form').serialize());
return false;
});
getNewComments();
});
</script>
</body>
</html>