HTML5 发展如火如荼,随着各大浏览器对 HTML5 技术支持的不断完善以及 HTML5 技术的不断成熟,未来 HTML5 必将改变我们创建 Web 应用程序的方式。今天这篇文章向大家推荐10款优秀的HTML5开发工具,帮助你更高效的编写…
March 1, 2016
HTML5中的服务器发送事件Server-sent events
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(); ?>
运行效果截图

根据运行效果,发现是每三秒更新一次
赶紧用谷歌开发工具看了一下网络连接
结果发现每隔三秒有一个网络请求连接

虽然效果能实现,但感觉这跟Ajax没啥区别
感觉还不如WebSocket更有研究价值!
原文:http://www.qttc.net/20120674.html
实例:http://www.w3school.com.cn/tiy/t.asp?f=html5_sse
更多:http://www.w3school.com.cn/html5/html_5_serversentevents.asp
本文:HTML5中的服务器发送事件Server-sent events