美文网首页
【18】server-sent Event服务器发送事件

【18】server-sent Event服务器发送事件

作者: 业余玩家 | 来源:发表于2017-10-29 14:01 被阅读77次
    简介

    server-sent实现的就是服务器向浏览器发送消息,根据这一特性,我们运用在文章更新推送的功能上,它基于HTTP协议,除了微软的ie/edge浏览器不支持之外,其他的浏览器基本都支持。server-sent发送的是数据流,而不是数据包,流信息发送,就会使得客户端不会关闭连接。

    浏览器支持测试
    if(typeof(EventSource)!=="undefined")
      {
      // Some code.....
      }
    else
      {
         alert("您的浏览器不支持server-sent");
      }
    
    2017-10-29_134058.png
    基本用法

    首先创建EventSource对象,用于接收服务器发送过来的消息,对象实例的readystate属性:0表示未连接,1表示已连接,2表示连接断开。它的api:open()连接建立的时候触发,此时你可以写回调函数。message()收到来自服务端的消息时触发。error()连接出错的时候触发。close()用于关闭连接。

    //客户端
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>serversent</title>
    </head>
    <body>
        
    </body>
    <script type='text/javascript'>
        if(typeof(EventSource)!="undefined"){
            //alert("您的浏览器支持server-sent");
            var source=new EventSource("serversent.php");
            source.onmessage=function (event) {
                console.log(event.data);
            }
        }else{
            alert("您的浏览器不支持server-sent");
        }
    </script>
    </html>
    

    服务端采用php实现简单的消息发送。每条消息之间采用\n\n分开。

    //服务端
    <?php 
    //头信息的设置
    header('content-type:text/event-stream');
    header('cache-control:no-cache');
    //retry:设置重新连接的时间间隔
    echo "retry:10000\n\n";
    //data:发送的消息
    echo "data:this is a test\n\n";
    flush();
     ?>
    
    参考资料

    http://www.w3school.com.cn/html5/html_5_serversentevents.asp
    http://www.ruanyifeng.com/blog/2017/05/server-sent_events.html

    相关文章

      网友评论

          本文标题:【18】server-sent Event服务器发送事件

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