zoukankan      html  css  js  c++  java
  • 通过html5 的EventSource来进行数据推送

    以往我们要获取服务器的数据更新,一般通过ajax的定时请求,不过这样效率就低了。我们通过html5的EventSource可以很方便的获取服务器的数据更新,不过IE好像不支持。
     
    例1如下:
    index.html代码如下:
    <!DOCTYPE HTML>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="data"></div>
    </body>
    <script type="text/javascript">
    //创建EventSource对象
    var es = new EventSource("./data.php");
    //接收到消息的回调函数
    es.onmessage = function(e) {
        document.getElementById("data").innerHTML = e.data;
    };
    </script>
    </html>
    
    data.php代码如下:
    <?php
    header('Content-Type: text/event-stream');
    header('Cache-Control: no-cache');
    
    $num = mt_rand(1000, 9999);
    //必须以data:开头,
    
    结尾
    echo "data: {$num}
    
    ";
    //刷新缓存
    ob_flush();
    flush();
    
    我们把代码调整一下:
    <!DOCTYPE HTML>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="data">
            <ul id="data-list">
    
            </ul>
        </div>
    </body>
    <script type="text/javascript">
    //创建EventSource对象
    var es = new EventSource("./data.php");
    //接收到消息的回调函数
    es.onmessage = function(e) {
        var addLi = document.createElement("li");
        addLi.innerHTML = e.data;
        document.getElementById("data-list").appendChild(addLi);
    };
    </script>
    </html>
    
    <?php
    header('Content-Type: text/event-stream');
    header('Cache-Control: no-cache');
    
    $time = date('Y-m-d H:i:s');
    echo "data: {$time}
    
    ";
    ob_flush();
    flush();
    
    通过下面的图可以看到,浏览器(chrome)每隔3秒会自动请求data.php文件获取数据。
    通过html5 的EventSource来进行数据推送 - 怀素真 - 因上努力 果上随缘
     
  • 相关阅读:
    display:table-cell,inline-block 之间的缝隙
    ACM-ICPC 2018 徐州赛区网络预赛 H. Ryuji doesn't want to study(树状数组)
    ACM-ICPC 2018 徐州赛区网络预赛 J Maze Designer(最大生成树+LCA)
    1076 两条不相交的路径
    1107 斜率小于0的连线数量
    1112 KGold
    51nod 1110 距离之和最小V3
    1246 罐子和硬币
    1163 最高的奖励(贪心+优先队列)
    1028C:Rectangles
  • 原文地址:https://www.cnblogs.com/jkko123/p/6294570.html
Copyright © 2011-2022 走看看