javascript/php实现comet(ajax长轮询)推送功能
简单描述:
comet是用ajax实现的服务器推送,有两种实现comet的方式,长轮询和流,这里只实现长轮询。
长轮询的过程:页面发起一个服务器请求,然后服务器一直保持连接打开,直到有数据返回。返回数据之后浏览器关闭连接,随即又发起另一个服务器请求。这一过程在页面打开期间一直保持连续不断。
[html] view plaincopy
[code]
<input id="btn" type="button" value="登陆"></input>
<div id="msg"></div>
[/code]
[php] view plaincopy
[code] <?php
if(empty($_POST['time']))exit();
set_time_limit(0);//无限请求超时时间
$i=0;
while (true){
//sleep(1);
usleep(500000);//0.5秒
$i++;
//若得到数据则马上返回数据给客服端,并结束本次请求
$rand=rand(1,999);
if($rand<=900){
$arr=array('success'=>"1",'name'=>'xiaocai','text'=>$rand);
//echo json_encode($arr);
echo $rand ;
exit();
}
//服务器($_POST['time']*0.5)秒后告诉客服端无数据
if($i==$_POST['time']){
$arr=array('success'=>"0",'name'=>'xiaocai','text'=>$rand);
//echo json_encode($arr);
echo "没数据";
exit();
}
}
?>
[/code]
[javascript] view plaincopy
[code] window.onload=function(){
var btn = document.getElementById("btn");
var msg = document.getElementById("msg");
msg.innerHTML = "....";
btn.onclick = function(event){
console.log("click");
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
msg.innerHTML = xhr.responseText;
event.target.click();
}
else{
alert(xhr.status);
}
clearTimeout(id);
}
}
xhr.open("post","data.php", true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var id = setTimeout(function() {
xhr.abort();
alert("timeout");
}, 80000);
xhr.send("time=80");
}
}
[/code]
之所以把代码贴出来是因为自己在学习过程发现基本网上的资料都是使用插件(jquery等)实现的,这里使用了纯js实现,值得收藏。