HTML5基础教程（17）SSE

导语

本篇文章将介绍HTML服务器发送事件，即server–sent event。它允许网页获得来自服务器的更新。

Server-Sent 事件简介

Server-Sent 事件指的是网页自动从服务器端获取更新信息。或许以前也能够通过别的方法做到这一点，但是前提是网页必须询问是否有可用的更新。而现在通过Server-Sent 事件 ，可以完成自动更新。
Server-Sent 事件的例子大致有：邮件通知、网站公告、新的博客文章、赛事实况结果等。

支持的浏览器

除了IE浏览器外，其他的主流浏览器都支持服务器发送事件。

Server-Sent 事件的接收

EventSource 对象的功能是接收服务器发送事件通知，下面是一段代码实例：

var source=new EventSource("zyf_sse.php");
source.onmessage=function(event)
{
    document.getElementById("result").innerHTML+=event.data + "<br&gt;";
};

实例内容解析
1.创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 “zyf_sse.php”）。
2.每接收到一次更新，就会发生 onmessage 事件。
3.当 onmessage 事件发生时，会将已接收的数据推入到 id 为 “result” 的元素中。

Server-Sent 事件支持的检测

在实例中，我们需要一段代码来检测服务器发送事件浏览器是否支持：

if(typeof(EventSource)!=="undefined")
{
    // 如果浏览器支持 Server-Sent运行这段代码
    //代码段
}
else
{
    // 浏览器不支持 Server-Sent运行这段代码
}

服务器端事件流实例

为了使上例能够运行，各位读者需要一个可以发送数据更新的服务器（比如 PHP ）。
服务器端事件流的语法较为简单。把 “Content-Type” 报头设置为 “text/event-stream”。然后各位读者就可以尝试开始发送事件流了。
PHP 中的代码 (zyf_sse.php)：

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}nn";
flush();
?>

实例解析：
1.把报头 “Content-Type” 设置为 “text/event-stream”
2.规定不对页面进行缓存
3.输出发送的日期（注意始终以 “data: ” 开头）
4.向网页刷新输出数据

其他的一些信息传递方式

http：常用的协议，用于单向传递客户端主动向服务端的请求。
ajax：它相当于是http的拓展，相对于http而言，客户端不会刷新。
comet：基于http的协议，长连接的方式将服务器变化的数据传递给客户端，处理完之后再循环长链接。
websocket：HTML5的新标准，基于socket的双向通信，但是需要浏览器支持HTML5。

结语

本文的例子中，我们使用 onmessage 事件来获取消息。但是我们还能够使用其他的事件，例如onopen（打开连接），onerror（发生错误）等。各位读者可以自己去尝试其中的作用。

代码007普通

打赏 收藏 海报 链接