html 实时监控发送数据

浏览数：37 / 时间：2015年06月09日

我们都知道ajax可以做异步提交，可以从一个文件里得到返回的数据，如此便能够实时的得到数据，实时刷新页面，如下代码

setInterval(function(){
    $.ajax({
        url:‘demo_sse.php‘,
        type:‘get‘,
        dataType:‘text‘,
        success:function(msg){
            console.log(msg);
        }
    })
}, 3000);

第二种方法：

可以通过html 的一个函数 EventSource来实现这个功能。代码如下：

<div data-role="footer">
        <?php
        /**
         * 登陆名单
         */
        include_once "common/conn.php";       
        ?>
        <h3 style="text-align: center;">已登录<span id="countNum"></span>人</h3>
    </div>
<script>
    //监听人数
    //HTML 服务器发送事件
    if(typeof(EventSource)!=="undefined")
    {
        var source=new EventSource("login.php");
        source.onmessage=function(event)
        {
            console.log($.trim(event.data));
            $("#countNum").text($.trim(event.data));
        };
    }
    else
    {
        console.log("Sorry, your browser does not support server-sent events...");
    }
</script>

以下是login.php的内容

<?php
header(‘Content-Type: text/event-stream‘);
header(‘Cache-Control: no-cache‘);
header("Access-Control-Allow-Origin: *");
//链接数据库
include_once "common/conn.php";
$lastEventId = floatval(isset($_SERVER["HTTP_LAST_EVENT_ID"]) ? $_SERVER["HTTP_LAST_EVENT_ID"] : 0);
if ($lastEventId == 0) {
    $lastEventId = floatval(isset($_GET["lastEventId"]) ? $_GET["lastEventId"] : 0);
}
//得到登陆人数
$query1 = "select count(*) from user where islogin=1";
$result = mysql_query($query1) or die(‘Query failed: ‘ . mysql_error());
$line = mysql_fetch_row($result);

$pa = $line[0];
$time = date(‘r‘);
echo "data: {$pa}\n\n";
ob_flush();
flush();
sleep(1);//sleep() 函数延迟代码执行1秒。
?>