HTML5中的服务器发送事件Server-sent events

最新推荐文章于 2024-06-25 09:04:25 发布

iteye_5904

最新推荐文章于 2024-06-25 09:04:25 发布

阅读量953

点赞数

分类专栏： Div / Css / XML / HTML5 文章标签： php 网络 javascript ViewUI

本文链接：https://blog.csdn.net/iteye_5904/article/details/82648587

版权

Div / Css / XML / HTML5 专栏收录该内容

177 篇文章 1 订阅

订阅专栏

HTML5引入的服务器发送事件(Server-Sent Events)允许服务器主动向客户端推送数据。本文通过代码示例展示了如何在客户端a.html和服务器端c.php中实现这一功能，并分析了其实现的效果和与Ajax的异同，最后指出相较于WebSocket，Server-Sent Events在某些场景下可能的研究价值较低。

摘要由CSDN通过智能技术生成

HTML5加了许多新功能，其中服务器发送事件Server-sent events是一个亮点，以下直接贴上代码示例

客户端a.html页面

<!DOCTYPE html> 
<html> 
    <head>
        <meta charset="utf-8" />
        <title>服务器推送SSE</title>
        <script type="text/javascript"> 
            $(document).ready(function(){ 
                //检查浏览器支持情况
                if(typeof(EventSource)!=="undefined") { 
                    //定义个对象，用于初始化事件源，这里用c.php这个页面实现 
                    var eSource = new EventSource("c.php"); 
                    //detect message receipt 
                    eSource.onmessage = function(event) { 
                        //将收到的数据展示到页面的ID=content元素中 
                        document.getElementById("content").innerHTML += event.data+'<br />'; 
                    }; 
                }else { 
                    document.getElementById("content").innerHTML="没有收到服务端Server-Sent数据."; 
                }
            });
        </script>
    </head>
    <body> 
        <div id="content"></div>
    </body> 
</html>

服务器端c.php 页面

<?php
// 要声明头部
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
// 直接打印当前时间
echo "data: ".date('Y-m-d H:i:s').PHP_EOL; 
flush();
?>

运行效果截图