HTML5 _ H5 SSE

H5 SSE

SSE是Server-Sent Events的简称，用汉语来说就是“服务器发送事件”，但是下文会尽量采用英文原文“Server-Sent Events”，即SSE的全称。

SSE可以让服务器推送数据给web页面。其实Websocket也有这个功能。

SSE vs Websocket

SSE（Server-Sent Events） 和 Websocket 都能让服务器推送数据给web页面。但是二者特性与应用场景有所不同，因此并非是相互竞争性的技术。

Websocket连接可以使浏览器和服务器之间双向连接，相互发送、接收数据；Websocket最好的应用场景就是做网页聊天应用。

SSE连接是单向的，只能是服务器向浏览器推送数据。SSE最典型的应用场景有实时股价变化、twitter更新时间线列表、用户消息提示等。

在实践中，似乎只要是SSE能做的事情，Websocket都能搞定；而且Websocket的浏览器兼容性更高，同时SSE有最大连接数的限制，而Websocket则没有；这也就是为什么Websocket比SSE更流行、更被各浏览器支持。如果一个人学了Websocket可以解决一切此类问题，那他为什么还要去学SSE呢。是的，是可以不学SSE只学Websocket，但是在此还是建议对SSE进行了解一下，因为SSE与Websocket的应用场景并非一样，有一些场景，使用SSE会更轻便。（不过从不同的价值角度，优劣的取舍自然不同；贫僧推荐大家对SSE做到了解、对Websocket做到熟练使用。）

SSE的优势

SSE相对Websocket还是有一些优势的：

SSE是基于现有的HTTP/HTTPS协议上运作的，服务器端不需要像针对Websocket那样进行特殊的配置；
SSE是文本协议（通常基于UTF-8编码），Websocket是二进制协议；
SSE最大优势就是用起来简洁，前端和后端都不需要太复杂的配置，这是Websocket所无法做到的；
如果想测试SSE的接口直接命令行使用curl命令即可。

总之一句话，SSE最大的优势就是简便。否则这个术语早就从地球上消亡了。

浏览器兼容性

下表是每种浏览器支持SSE（Server-Sent Events）的最低版本：

API
SSE	6.0	不支持	6.0	5.0	11.5

检查浏览器是否支持SSE

如下所示，为了更好的用户体验，使用SSE前，可以提前检测一下用户浏览器是否支持SSE：

if(typeof(EventSource) !== "undefined") {
    // 浏览器支持SSE，下面就可以干正事了
} else {
    // 小贼，你的浏览器太落后了，竟然不支持SSE
}

接收SSE的推送数据

如下所示，EventSource类创建的对象就是用来接收指定服务器来源的推送数据。

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

服务器端代码

服务器端代码比较简单，不管用哪种语言哪种web服务器框架，基本上都可以实现，但需要注意如下：

要把response头文件中的“Content-Type”设置成“text/event-stream”；
尽量把response的头文件将“Cache-Control”设置成“no-cache”；
通常来说，推送的数据内容请使用“data:”来开头，具体数据内容放在“data:”后面；
大多类型的服务器程序中，不仅仅要求推送的数据用“data:”开头，还会要求用“\n\n”结束。

SSE完整的示例

<!DOCTYPE html>
<html>
<body>

<h1>收到服务器方的数据：</h1>
<div id="result"></div>

<script>
if(typeof(EventSource) !== "undefined") {
    var source = new EventSource("/sse_test");
    source.onmessage = function(event) {
        document.getElementById("result").innerHTML += event.data + "<br>";
    };
} else {
    document.getElementById("result").innerHTML = "小贼，你的浏览器太落后了，竟然不支持SSE";
}
</script>

</body>
</html>

运行一下

EventSource对象

事件	说明
onopen	当与服务器的连接被创建时而触发
onmessage	当接收到服务器推送过来的数据而触发的事件
onerror	发生错误时触发

H5 SSE

推广