在看这篇Ajax长轮询之前可以先看看Ajax轮询技术(没有长),有助于理解:

Ajax长轮询属于Ajax轮询的升级版,在客户端和服务端都进行了一些改造,使得消耗更低,速度更快。

"不间断的通过Ajax查询服务端"。

来,小二,先上代码~:

Reception.html //客户端

<html>

<head>

    <title></title>

    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>

</head>

<body>

</body>

<script type="text/javascript">

    //前端Ajax持续调用服务端,称为Ajax轮询技术

    var getting = {

        url:'server.php',

        dataType:'json',

        success:function(res) {

         console.log(res);

         $.ajax(getting); //关键在这里,回调函数内再次请求Ajax

}        
        //当请求时间过长(默认为60秒),就再次调用ajax长轮询
        error:function(res){
        $.ajax($getting);
        }

};

$.ajax(getting);

</script>

</html>

server.php: //服务端

<?php
//这段AJAX请求时间永不过期
set_time_limit(0);

$pdo = new PDO('mysql:dbname=test;host=127.0.0.1','root','root');

$resource = $pdo->query('select * from t1');

$result = $resource->fetchall();

while (true) {

    if ($result) {

        //exits data

        print_r(json_encode(array('success'=>'存在数据,返回')));

        exit(); //输出数据,退出。然后客户端不间断继续发起请求

    }

    //数据不存在,继续循环。

}

?>

看出了玄机了嘛?长轮询的精髓就在于Ajax的回调函数,继续再次调用Ajax请求(不间断的原理就在这里,成功返回后立即再次调用):

$.ajax(getting);

下面是是Ajax 长轮询的图解:

首先请忽略绿色字体的使用限制,然后哪位朋友有可以推荐的画图工具可以推荐给我,我现在用的是忆图图示。

图中有两次请求(本文中的请求默认均为Ajax),第一次很快返回了结果,然后不间断的立即发送第二次请求,但是第二次请求没有获得数据,所以请求迟迟没有返回(被挂在服务器了,但只要有数据就会再次返回),如果第二次的请求返回数据后,第三次请求旋即会立刻发出,这种技术就称为Ajax 长轮询。

用伪代码来表示就是这样:

<?php

//客户端通过Ajax发起请求

if ('客户端发送请求' && '服务端有数据可以返回') {

    echo '返回数据给客户端';

    echo '客户端通过Ajax继续发起请求,然后继续if判断';

}else{

    echo'没有数据可以返回,再次执行一次if判断';

}

?>

最关键的地方在于前一次请求结束后,第二次请求立即不间断的发起,这个就叫做Ajax长轮询

12 条评论
godruoyi · 2016年07月13日

hello gzchen,

关于ajax长轮询, 我有个疑问

 var getting = {

        url:'server.php',

        dataType:'json',

        success:function(res) {

         console.log(res);
           
           //就是这里, 
           $.ajax(getting); //关键在这里,回调函数内再次请求Ajax

        }        
        //当请求时间过长(默认为60秒),就再次调用ajax长轮询
        error:function(res){
        $.ajax($getting);
        }

};

$.ajax(getting);

第一次ajax请求成功后,进入success方法, 继续执行$.ajax(getting), 在这里, 继续执行的下一个ajax请求和第一次执行的请求是共用一个tcp链接吗, 或者说这是两个完全不同的请求吧,

如果是两次不同的请求, 为什么要在脚本开始的时候不限制脚本的执行时间set_time_limit(0);

回复

gzchen 作者 · 2016年07月13日

是两个完全不同的请求,设置set_time_limit(0)的原因是因为:服务端很可能60秒不用就跑延迟了(我记得默认是30秒?)。

最后给个tips,长轮询只供学习思路而已,真实环境中很少用长轮询,消耗依然很大

回复

wuweisen · 2016年10月24日
<?php
//这段AJAX请求时间永不过期
set_time_limit(0);

$pdo = new PDO('mysql:dbname=test;host=127.0.0.1','root','root');

$resource = $pdo->query('select * from t1');

$result = $resource->fetchall();

while (true) {

    if ($result) {

        //exits data

        print_r(json_encode(array('success'=>'存在数据,返回')));

        exit(); //输出数据,退出。然后客户端不间断继续发起请求

    }

    //数据不存在,继续循环。

}

?>

while 里面的 $result 只是上面执行一次的结果吧,并不会每次都去查数据库吧

回复

gzchen 作者 · 2016年10月25日

有数据就查,没数据就继续while true

回复

wuweisen · 2016年10月25日

继续while true 并没有执行查询数据库的操作吧

回复

gzchen 作者 · 2016年10月25日

如果有数据就继续取出

回复

wuweisen · 2016年10月26日

我的意思是,white tue里面并不会执行数据库操作,$result是空的话,就一直是空

回复

gzchen 作者 · 2016年10月26日

是的

回复

zqbinary · 2016年12月23日

发错了,是这篇的图

回复

zqbinary · 2016年12月23日

下面是是Ajax 长轮询的图解://图没有啊

回复

gzchen 作者 · 2016年12月23日

已补上,话说半年来读者都没人提过这事,哎呀

回复

zqbinary · 2016年12月23日

谢谢.

回复

载入中...
gzchen gzchen

4k 声望

发布于专栏

傍晚八点半

请你指出我文章中的错误与不足,谢谢

21 人关注

SegmentFault

一起探索更多未知

下载 App