zoukankan      html  css  js  c++  java
  • HTML 5 服务器发送事件 server-sent event

    1.简介

    Server-Sent 事件指的是网页自动获取来自服务器的更新。 Internet Explorer不支持

    2.demo.php文件

    <?php
    header('Content-Type:text/event-stream');//服务器端事件流
    header('Cache-Control:no-cache');//规定不对页面进行缓存
    
    $time=date('r');
    echo "data:The server time is :{$time}
    
    ";// 输出发送日期(始终以 "data: " 开头)
    flush();// 向网页刷新输出数
    ?>

    3.html文件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id='res'> hhhh</div>
        <script>
            var source=new EventSource("demo.php");//创建一个新的 EventSource 对象,然后规定发送更新的页面的 URL(本例中是 "demo_sse.php"),每接收到一次更新,就会发生 onmessage 事件
            source.onmessage=function(event){
                document.getElementById("res").innerHTML=event.data;
               // alert(89);
            };
        </script>
    </body>
    </html>

    4.

    EventSource 对象

    在上面的例子中,我们使用 onmessage 事件来获取消息。不过还可以使用其他事件:

    事件描述
    onopen 当通往服务器的连接被打开
    onmessage 当接收到消息
    onerror 当错误发生
    由于无法解释的神圣旨意,我们徒然地到处找你;你就是孤独,你就是神秘,比恒河或者日落还要遥远。。。。。。
  • 相关阅读:
    vue后台模板推荐
    Webstorm的一些常用快捷键
    dataTables 插件学习整理
    js阻止事件冒泡
    vscode常用快捷键
    VScode插件以及配置
    今日笔记2
    ES6中的import()函数
    ES6之class 中 constructor 方法 和 super 的作用
    JS设计模式一:单例模式
  • 原文地址:https://www.cnblogs.com/momoli/p/13524946.html
Copyright © 2011-2022 走看看