前端Server-Sent Events、EventSource接口相关知识点总结，什么是EventSource？

转自：http://www.ruanyifeng.com/blog/2017/05/server-sent_events.html

严格地说，HTTP 协议无法做到服务器主动推送信息。但是，有一种变通方法，就是服务器向客户端声明，接下来要发送的是流信息（streaming）。

也就是说，发送的不是一次性的数据包，而是一个数据流，会连续不断地发送过来。这时，客户端不会关闭连接，会一直等着服务器发过来的新的数据流，视频播放就是这样的例子。本质上，这种通信就是以流信息的方式，完成一次用时很长的下载。

SSE (Server-sent Events) 就是利用这种机制，使用流信息向浏览器推送信息。

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 += "
Connection open ...
";
};

// 连接创建失败的回调事件
source.onerror = function (event) {div.innerHTML += "
Connection close.
";
};

// 自定义事件，服务端返回时设置 event 字段为自定义事件名称
source.addEventListener("connecttime",
    function (event) {div.innerHTML += "
Start time:" + event.data + "
";
    },
    false
);

// 接受到数据的回调事件，event 未特殊设置时，默认是 message
source.onmessage = function (event) {div.innerHTML += "
message event:" + event.data + "
";
};

// 关闭连接  source.close();

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 连接时间，进行相关的配置