• html 实时监控发送数据


    我们都知道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}
    
    ";
    ob_flush();
    flush();
    sleep(1);//sleep() 函数延迟代码执行1秒。
    ?>

    留待以后参考。。。

  • 相关阅读:
    2、消失的路由,源码的解析基础
    1、v1 与 v2的比较
    uwp 之后台音频
    uwp 之多媒体开发
    UWP 动画之路径
    uwp 动画之圆的放大与缩小
    uwp 中的动画
    C# 输入法
    uwp 之资源的访问
    uwp 之吐司 toast
  • 原文地址:https://www.cnblogs.com/xiaoxiao2014/p/4520265.html
Copyright © 2020-2023  润新知