前端扫雷之SSE

SSE是什么

SSE（sever-sent events）服务器端推送事件，是指服务器推送数据给客户端，而不是传统的请求响应模式。简单的说，就是浏览器向服务器发送一个HTTP请求，然后服务器不断单向地向浏览器推送“信息”。

Server-sent Events 规范是 HTML5 规范的一个组成部分。该规范比较简单，主要由两个部分组成：第一个部分是服务器端与浏览器端之间的通讯协议，第二部分则是在浏览器端可供JavaScript 使用的 EventSource对象。

注：IE不支持

SSE和websocket

SSE和websocket最大的区别就是前者是单工的而后者是全双工的。

这里正好可以把短轮询、长轮询、websocket和SSE梳理一下：
短轮询：请求—响应 —-请求—响应 —-请求—响应
长轮询：请求—阻塞保持—有内容或超过时间才响应
websocket：请求—连接—交互
SSE：请求—连接—服务器端推送

几种数据交互对比

SSE实现

浏览器端

浏览器端SSE的实现基于EventSource对象，由于IE的兼容性问题，需要进行兼容性检测。

if(typeof(EventSource)!=="undefined"){ //if(EventSource)不支持会直接报错 not defined
    //新建sse对象 和"index.php"建立sse连接
    var sse=new EventSource("index.php");
    sse.onmessage=function(event){
        console.log(event.data);
    }
}else{
    console.log("不支持SSE");
}

响应

SSE通讯协议是基于纯文本的简单协议。服务器端的响应的内容类型是“text/event-stream”。响应文本的内容可以看成是一个事件流，由不同的事件所组成。每个事件由类型和数据两部分组成，同时每个事件可以有一个可选的标识符。不同事件的内容之间通过仅包含回车符和换行符的空行（“\r\n”）来分隔。每个事件的数据可能由多行组成。

格式

每个事件之间通过空行来分隔。对于每一行来说，冒号（“:”）前面表示的是该行的类型，冒号后面则是对应的值。可能的类型包括：
类型为空白，表示该行是注释，会在处理时被忽略。
类型为 data，表示该行包含的是数据。以 data 开头的行可以出现多次。所有这些行都是该事件的数据。
类型为 event，表示该行用来声明事件的类型。浏览器在收到数据时，会产生对应类型的事件。
类型为 id，表示该行用来声明事件的标识符。
类型为 retry，表示该行用来声明浏览器在连接断开之后进行再次连接之前的等待时间。

默认event类型为message

data: This is the first message.

data: This is the second message
data: it has two lines.

data: This is the third message.

可以自定义事件类型如“add”、“remove”等：

event: add
data: 73857293

event: remove
data: 2153

event: add
data: 113411

我们可以通过addEventListener方法来监听这些事件：

sse.addEventListener('add', addHandler, false);
sse.addEventListener('remove', removeHandler, false);

EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget上，当该对象触发指定的事件时，指定的回调函数就会被执行。事件目标可以是一个文档上的元素 Document 本身，或者任何其他支持事件的对象 (比如 XMLHttpRequest)。

IE上的兼容性问题

参见SSE技术详解

SSE是什么

SSE和websocket

SSE实现

浏览器端

响应

IE上的兼容性问题

猜你喜欢