HTML5服务器推送事件SSE

2016-05-06

字数统计: 483字 | 阅读时长≈ 2分

今天论文总算初步告一段落，心情大好啊。想到这个快遗忘的博客，技术之路又要开启了。
一个月余的高压状态，虽然身体很累很累，但总算有所收获吧。

今天看了一下HTML5，记录此篇，也算是回归之作。
路漫漫，加把劲。

使用 SSE 可以不停的将 DOM事件推送到用户的浏览器中。这个事件流方法会打开一个到服务器的持久连接，新消息可用时发送数据到客户端，从而不再需要持续的轮询。

HTML中需要包括一个<eventsource>元素，其src指向一个url后台程序链接，提供一个HTTP持久连接用于发送包含事件的数据流。可能是PHP、PERL或Python。

1
2
3

<div id="sse">
  <eventsource src="/cgi-bin/ticker.cgi" />
</div>

如下一段Perl：

#!/usr/bin/perl
print "Content-Type: text/event-stream\n\n";
while(true){
  print "Event: server-time\n";
  $time = localtime();
  print "Data: $time\n";
  sleep(5);

w3c的一段php代码：

header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
$time = date('r');  //参数r规定了时间格式，还有c等可用，具体看php官网date。
echo "data: the server time is: {$time}\n\n";
flush();
 sleep(5);//隔5s发送一次，但是默认好像是3s，5s时结果是8s一次，这是个疑惑。

处理服务器推送事件

var source = new EventSource(./sse.php);
source.onmessage = function(event){   //另外还有onerror、onopen、readyState和url这几个事件。
  document.getElementById("sseId").innerHTML += event.data+"<br/>";
};

运行结果

后台是php的情况下遇到错误：
EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection
网上资料显示是echo "data: the server time is: {$time}\n\n";这里必须加上\n\n才行，之后也是这样调试通过的。

参考：MDN

本文作者： Linking
本文链接： https://linking.fun/2016/05/06/HTML5服务器推送事件SSE/