javascript数据推送 - Comet:基于HTTP长连接的服务器推送技术

最新推荐文章于 2025-08-04 23:06:54 发布

UIEngineer

最新推荐文章于 2025-08-04 23:06:54 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript高级 es5/es6

本文链接：https://blog.youkuaiyun.com/zjsfdx/article/details/79274476

javascript高级 es5/es6 专栏收录该内容

43 篇文章

订阅专栏

本文介绍了三种服务器推送技术：Comet、WebSocket 和 SSE(Server-Send Events)。Comet 技术通过 HTTP 长连接实现服务器数据推送，展示了具体的前端 JavaScript 和后端 PHP 实现案例。WebSocket 是一种全双工通讯协议，在单一 TCP 连接上提供双向数据传输，适用于实时交互应用。SSE 则是一种简单高效的方法，允许服务器向浏览器推送更新。

一、Comet:基于HTTP长连接的服务器推送技术
方法1：// 前端隔一段时间发一次ajax，但是请求很昂贵，所以应该交给服务器来做
方法2：
index.html

<meta charset="utf-8"/>   <!-- 防止乱码 --> 
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<h1>测试</h1>
<script>
    // function conn(){
    //     $.ajax({
    //         url:'data.php',
    //         dataType:"json",    //  请求类型
    //         success:function(data){
    //             console.log(data);
    //         }
    //     });
    // }
    // conn();




     var getXmlHttpRequest = function(){
         if(window.XMLHttpRequest){
            //  主流浏览器提供了XMLHttpRequest对象
            return new XMLHttpRequest();
         }else if(window.ActiveXObject){
            // 低版本的IE浏览器没有提供XMLHttpRequest对象
            // 所以必须使用IE浏览器的特定实现ActiveXObject
            return new ActiveXObject("Microsoft.XMLHTTP");
         }
     };
     var xhr = getXmlHttpRequest();
     xhr.onreadystatechange = function(){
         if(xhr.readyState === 3 && xhr.status === 200){
            // 获取成功后执行操作
            // 数据在xhr.responseText
            console.log(xhr.responseText);
         }
     };
     xhr.open("get","data.php",true);
     xhr.send("");
</script>

data.php

<?php 
    // header("Content-type:application/json;charset=utf-8");
    header("Cache-Control:max-age=0");  //  后端输出没有缓存
    $i = 0;
    while($i < 9){
        $i++;
        // $res = array('success' => "ok","text" => "我是测试的文本");
        sleep(1);
        $random = rand(1,999);
        echo $random;
        echo "<br />";
        ob_flush();     //  输出缓冲区内容，不送给浏览器
        flush();        //  刷新输出缓冲，送向浏览器
    }


?>

这里写图片描述

方法3：
index.html

<meta charset="utf-8"/>   <!-- 防止乱码 --> 
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<h1>测试</h1>
<script>
    function conn(){
        $.ajax({
            url:'data.php',
            dataType:"json",    //  请求类型
            success:function(data){
                console.log(data);
                conn();
            }
        });
    }
    conn();

</script>

data.php

<?php 
    header("Content-type:application/json;charset=utf-8");
    header("Cache-Control:max-age=0");  //  后端输出没有缓存
    $res = array('success' => "ok","text" => "我是测试的文本");
    echo json_encode($res);
    ob_flush();     //  输出缓冲区内容，不送给浏览器
    flush();        //  刷新输出缓冲，送向浏览器



?>

这里写图片描述

方法3：
index.html

<meta charset="utf-8"/>   <!-- 防止乱码 --> 
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<h1>测试</h1>
<script>
    function conn(){
        $.ajax({
            url:'data.php',
            dataType:"json",    //  请求类型
            success:function(data){
                console.log(data);
                conn();
            }
        });
    }
    conn();

</script>

data.php

<?php 
    header("Content-type:application/json;charset=utf-8");
    header("Cache-Control:max-age=0");  //  后端输出没有缓存
    while(true){
        $res = array('success' => "ok","text" => "我是测试的文本");
        echo json_encode($res);
        exit();
    }




?>