HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。通过官网的介绍可以看出是接收服务器发送数据,千万不能和ajax混淆,网上大片博文的介绍对其解读是错误的,导致让我差点觉得这个事件很鸡肋。
先看通用案例:
html5:
<script type="text/javascript">
if(typeof(EventSource)!=="undefined")
{
//浏览器支持
var api = 'server.php';
var source=new EventSource(api);
source.onmessage=function(event)
{
console.log(event.data)
};
}
else
{
//浏览器不支持
}
</script>php:
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('Y-m-d H:i');
echo "data: The server time is: {$time}\n\n";
flush();上面是根据w3c的代码修改的,通过谷歌调试发现每隔3秒还是会请求1次,天呐,w3c官网是不是搞错了.如果是这样的话我还不如选择ajax,写起来不是更爽？于是继续找,发现网上一堆重复的请求博文很头疼,最后终于在mozilla发现原来可以阻塞,于是有了下面的高效案例。
再看高效案例:
php:
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
while (1)
{
$time = date('Y-m-d H:i:s');
echo "data: The server time is: {$time}\n\n";
ob_flush();
flush();
sleep(1);
}以上代码通过阻塞可以达到约30s请求一次,数据是每隔1秒发送1次,但是考虑一般用户在页面停留时长肯定能达到30s的,于是有了下面的代码
php:
<?php
ini_set('max_execution_time', '0');
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
while (1)
{
$time = date('Y-m-d H:i:s');
echo "data: The server time is: {$time}\n\n";
ob_flush();
flush();
sleep(1);
}以上代码通过限制脚本执行时间,可以达到7分钟请求脚本1次,7分钟自动请求1次,并且这7分钟都是每秒推送,已经非常高效
超时问题延伸:
通常情况下,php设置不超时,但是web服务器本身是不可能等待php那么久的,会直接抛出超时,但是实际上php脚本还是在默默无闻的跑着。
但是为什么上面的脚本不会直接抛出超时,个人猜测或许是apache和nginx对于Content-Type: text/event-stream类型的都不会直接超时。另外再想想文件流的传输过程貌似web服务器也不会说传输中断的问题。
