zoukankan      html  css  js  c++  java
  • HTML5服务器推送事件

    目前客户端(浏览器)和服务端交互大致有以下几种方式:

    1)form表单提交方式,适合访问量不大,对用户体验要求不高的web系统开发,或者页面整体刷新无伤大雅的场合,通信方向是客户端提交给服务端,是客户端主动发起;

    2)Ajax方式,特点是用户体验好,无需页面整体刷新,对服务器压力也小,有利于客户端和服务端的解耦,也是目前广为使用的一种客户端服务端交互方式,它也是通过客户端发起请求,服务端接受处理,通信方向和form表单相同;

    3)server-sent-event,它是服务端主动向客户端(浏览器)发送数据,客户端监听并接受,然后处理,通信方向也是单向的,但是和上面两种相反,是服务端发起,客户端接受,但是其应用层协议还是基于http的。

    4)web socket,这是将以前服务端通信的套接字原理实现在了浏览器上,使得浏览器和服务端可以相互发送消息,通信方向是双向的,只要连接一建立,双方都可以向对方发送数据,无需哪一方先来后来,应用层协议基于WS协议。

    上面第3第4由于是HTML5中新添加的功能,所以在很多老版的浏览器中(如IE6-IE8)还不支持,因此应用还不够广泛.

    这里主要实现的是第三种方式,即服务端推送事件,直接上代码

    客户端代码

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <script>
        (function()
        {
            var source;
            if (!!window.EventSource) {
                 source = new EventSource('http://localhost/server.php');
            }
           source.onmessage=function(e)
           {
            var oSpan=document.createElement('span');
               oSpan.innerHTML=e.data+"<br>";
    
            var oDiv=document.querySelector("#div1");
               oDiv.appendChild(oSpan);
           }
    
    
        })();
    </script>
    <div id="div1"></div>
    </body>
    </html>
    

     以上代码构造一个eventSource对象,指向一个服务端后台PHP文件,这个对象是HTML5中的服务端推送事件API封装对象,然后添加onmessage事件,用来监听服务端发送过来的消息,服务端一有消息发送,就会执行这个事件的回调函数,这里让它接收到数据之后将其包裹在span中并将这个span插入到div中。

    服务端代码server.PHP

    <?php
    header('Content-Type: text/event-stream');
    header('Cache-Control: no-cache');
    
    function sendMsg($id, $msg) {
    echo "id: $id" . PHP_EOL;
    echo "data: $msg" . PHP_EOL;
    echo PHP_EOL;
    ob_flush();
    flush();
    }
    
    for($i=0;$i<=1000;$i++)
    {
    $serverTime = time();
    sendMsg($serverTime, 'server time: ' . date("h:i:s", time()));
    sleep(2);
    
    }
    

      首先要设定其发送给客户端http报文中的首部

    header('Content-Type: text/event-stream');这是服务端推送事件特定的MIME类型,
    header('Cache-Control: no-cache');表示不让浏览器进行缓存
    然后每隔两秒向客户端发送一个时间戳,客户端接收到之后,显示到div中,效果如下:

    有了这种通信方式,我们制裁采用的Ajax长轮询的方式来模拟服务器端推送事件就可以不用了,如果服务端收到一些需要通知客户端的信息,那么可以直接发送给客户端,而不必等待其发送请求。



  • 相关阅读:
    word-流程图
    redis介绍
    Linux----硬盘分区
    Vue+restfulframework示例
    Django后端项目---- rest framework(4)
    前端框架VUE----导入Bootstrap以及jQuery的两种方式
    前端框架VUE----补充
    前端框架VUE----表单输入绑定
    前端框架VUE----cli脚手架(框架)
    前端框架VUE----计算属性和侦听器
  • 原文地址:https://www.cnblogs.com/myzhibie/p/4131723.html
Copyright © 2011-2022 走看看