前端Server-Sent Events、EventSource接口相关知识点总结
前端Server-Sent Events、EventSource接口相关知识点总结
转自：http://www.ruanyifeng.com/blog/2017/05/server-sent_events.html
严格地说，HTTP 协议无法做到服务器主动推送信息。但是，有一种变通方法，就是服务器向客户端声明，接下来要发送的是流信息（streaming）。
也就是说，发送的不是一次性的数据包，而是一个数据流，会连续不断地发送过来。这时，客户端不会关闭连接，会一直等着服务器发过来的新的数据流，视频播放就是这样的例子。本质上，这种通信就是以流信息的方式，完成一次用时很长的下载。
SSE 就是利用这种机制，使用流信息向浏览器推送信息。
EventSource
1.介绍
EventSource 是服务器推送的一个网络事件接口。一个 EventSource 实例会对 HTTP 服务开启一个持久化的连接，以text/event-stream 格式发送事件，会一直保持开启直到被要求关闭。
一旦连接开启，来自服务端传入的消息会以事件的形式分发至你代码中。如果接收消息中有一个事件字段，触发的事件与事件字段的值相同。如果没有事件字段存在，则将触发通用事件。
与 WebSockets,不同的是，服务端推送是单向的。数据信息被单向从服务端到客户端分发。当不需要以消息形式将数据从客户端发送到服务器时，这使它们成为绝佳的选择。例如，对于处理社交媒体状态更新，新闻提要或将数据传递到客户端存储机制（如 IndexedDB 或 Web 存储）之类的，EventSource 无疑是一个有效方案。
// SSE的API在EventSource对象上
// 可以使用 if('EventSource' in window) 判断浏览器是否支持SSE
// 建立SSE连接，直接如下创建EventSource实例，支持跨越
var source = new EventSource("http://127.0.0.1:9988/createSse",{withCredentials: true});
// EventSource.readyState代表连接状态，有以下三种情况
// 0 —> 连接还未建立，或者正在断线重连
// 1 -> 连接已建立，可以接受数据
// 2 -> 连接已关闭或请求错误
var div = document.getElementById("page");
// 连接创建成功的回调事件
source.onopen = function (event) {
div.innerHTML += "<p>Connection open ...</p>";
};
// 连接创建失败的回调事件
source.onerror = function (event) {
div.innerHTML += "<p>Connection close.</p>";
};
// 自定义事件，服务端返回时设置event字段为自定义事件名称
source.addEventListener("connecttime",
function (event) {
div.innerHTML += "<p>Start time: " + event.data + "</p>";
},
false
);
// 接受到数据的回调事件，event未特殊设置时，默认是message
source.onmessage = function (event) {
div.innerHTML += "<p>message event: " + event.data + "</p>";
};
// 关闭连接 source.close();相关文档：https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource
2.服务端
服务端返回响应头必须包含以下header ：
Content-Type: text/event-steam // 第一行的Content-Type必须指定为text/event-steam
Cache-Control: no-cache
Connection: keep-alive服务器返回的数据是由若干个的message组成，每个message用nn分割（因为是传输的数据格式必须是文本型）。 每个message内容是[field]：valuen
field有四种情况id、event(type)、data、retry
- id 为每个返回数据的唯一标识，浏览器用lastEventId读取id，一旦连接断开，浏览器会从新发送http请求，带有特殊请求头Last-Event-Id，代表断开时的id，用于建立重新连接，属于一种重连的同步机制。
- data 数据内容一般放于data字段。
- event(type)：消息类型，一般默认为message，服务端可以自定义，前端用addEventListener()监听。
- retry：代表服务器重新发送请求的间隔时间。
PHP服务端实现
实际业务场景中，需要对PHP脚本执行时间或者TCP连接时间，进行相关的配置
<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: text/event-stream");
header("X-Accel-Buffering: no");
echo ....; //设置好响应头，持续输出即可拓展
curl的CURLOPT_WRITEFUNCTION选项用于从stream流中读取数据