html5中用来接收server,HTML5中的服务器发送事件Server-sent events

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

客户端a.html页面

服务器推送SSE

$(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+'
';

};

}else {

document.getElementById("content").innerHTML="没有收到服务端Server-Sent数据.";

}

});

服务器端c.php 页面

// 要声明头部

header("Content-Type: text/event-stream");

header("Cache-Control: no-cache");

// 直接打印当前时间

echo "data: ".date('Y-m-d H:i:s').PHP_EOL;

flush();

?>

运行效果截图

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

根据运行效果，发现是每三秒更新一次

赶紧用谷歌开发工具看了一下网络连接

结果发现每隔三秒有一个网络请求连接

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

虽然效果能实现，但感觉这跟Ajax没啥区别

感觉还不如WebSocket更有研究价值！

相关

Related Posts

推荐10款非常优秀的 HTML5 开发工具

HTML5 发展如火如荼，随着各大浏览器对 HTML5 技术支持的不断完善以及 HTML5 技术的不断成熟，未来 HTML5 必将改变我们创建 Web 应用程序的方式。今天这篇文章向大家推荐10款优秀的HTML5开发工具，帮助你更高效的编写…

超链接特效

这里提供了各种各样的超链接特性，有些是借助伪元素，有些是借助svg，有些是借助HTML5动画。用你的鼠标悬停在这些链接上，给你跟传统链接完全不一样的效果感觉。你需要使用现代浏览器，比如谷歌浏览器或火狐浏览器。   Demo：http://www.webhek.com/misc/link-style/

CSS发抖

在一个大型项目里我需要制作出抖动的效果。最初我使用的是普通的CSS。 当开发完成后，我发现了这个很酷的jQuery plugin(由@jackrugile开发)。 于是我就开始思考，我应该做出这个小的CSS project。   CSS发抖 DEMO  …