美文网首页我爱编程
HTML5 服务器发送事件(Server-Sent Events

HTML5 服务器发送事件(Server-Sent Events

作者: 龍飝 | 来源:发表于2018-04-09 13:48 被阅读39次

    HTML5 服务器发送事件(Server-Sent Events)允许网页获得来自服务器的更新

    Sever-Sent事件 -单项消息传递
    Sever-Sent事件指的是网页自动获取来自服务器的更新
    以前也可能做得到这一点,前提是网页不得不询问是否有可用的更新,通过服务器发送时间,更新能够自动到达
    例子:FaceBook/Twitter跟新,估价更新,新的博文,赛事结果等

    接受Sever-Sent事件通知
    EventSource对象用于接受服务器发送事件通知:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
    <h1>获取服务端更新数据</h1>
    <div id="result"></div>

    <script>
    if(typeof(EventSource)!=="undefined")
    {
    var source=new EventSource("demo_sse.php");
    source.onmessage=function(event)
    {
    document.getElementById("result").innerHTML+=event.data + "
    ";
    };
    }
    else
    {
    document.getElementById("result").innerHTML="抱歉,你的浏览器不支持 server-sent 事件...";
    }
    </script>

    </body>
    </html>
    实例解析:
    1.创建一个新的EventSource对象,然后规定发送更新的页面URL(本例中是“demo.sse.php”)
    2.没接收到一次更新,就会发生onmessage事件
    3.当onmessage事件发生时,把已接受的数据推入id为“result”的元素中

    检测Server-Sent事件支持
    一下实例,编写了一段额外的代码来检测服务器发送事件的浏览器支持情况
    if (type(EventSource) !== "undefined")
    {
    //浏览器支持 Server-Sent
    //一些代码
    } else {
    //浏览器不支持 Server-Sent
    }

    服务器代码实例
    未来让上面的例子可以运行,还需要能够发送数据更新的服务器(比如PHP 和 ASP)
    服务器端事件流的语法是非常简单的,把"Content-Type"报头设置为"text/event-stream".现在,可以开始发送事件流了
    实例:
    <?php
    header('Content-Type: text/event-stream');
    header('Cache-Control: no-cache');

    $time = date('r');
    echo "data: The server time is: {$time}\n\n";
    flush();
    ?>

    ASP 代码 (VB) (demo_sse.asp):
    <%
    Response.ContentType="text/event-stream"
    Response.Expires=-1
    Response.Write("data: " & now())
    Response.Flush()
    %>

    代码解释:
    1.把报头"Content-Type"设置为"text/event-stream"
    2.规定不对页面进行缓存
    3.输出发送日期(始终以"data:"开头)
    4.向网页刷新输出数据

    EventSource对象
    在上面的例子中,我们使用onmessage时间来获取消息,不过还可以使用其他事件
    事件 描述
    onopen 当通往服务器的连接被打开
    onmessage 当接收到消息
    onerror 当发生错误

    相关文章

      网友评论

        本文标题:HTML5 服务器发送事件(Server-Sent Events

        本文链接:https://www.haomeiwen.com/subject/liqihftx.html