什么是 Server-Sent Events？
Server-Sent Events （SSE）是一种 HTML5 新特性，允许浏览器通过单方向的持久连接从服务器接收数据流。
相对于传统的 Ajax 轮询或长轮询，SSE 拓展了浏览器与服务器通信的方式，通过 SSE 可以轻松地创建实时数据流应用程序。
当该技术被广泛采用时，特别适用于实时通知、在线统计数据以及社交网络应用程序等。
数据类型
SSE 的数据通过 text/event-stream MIME 类型格式流式传输。最常见的数据类型是文本，但可以通过多种方式发送。文本编码为 UTF-8。
事件流的格式
SSE 的数据流是由多个事件组成的。以下是一个实现 Server-Sent Events 数据流的示例：
data: 第一条消息\n
id: 1\n
event: myevent\n\n上述示例说明了 Server-Sent Events 数据流的格式：
data行包含用于此事件的消息文本。id行包含此事件的唯一标识符。(可选)
event行包含此事件的名称。名称只是一个字符串，没有特殊含义。空行表示事件流中的事件结束。
###消息事件
最简单的事件是"message"事件。下面是一个用于实现该事件的示例代码：
let source = new EventSource("server.php");
source.onmessage = function(event) {
console.log(event.data);
};在此示例中，我们创建了EventSource对象来处理服务器上的数据。onmessage事件会在接收到服务器端数据时被触发。可以在事件处理程序内部处理接收到的数据。
###设置自定义事件
Server-Sent Events 允许创建自定义事件。有两种方法可以实现自定义事件：
通过在
EventSource对象的参数中发送自定义事件名称，从而在 PHP 服务器端生成具有相应事件名称的数据流，从而创建自定义事件。在服务器端使用
event:键在 SSE 数据流的头部设置自定义事件名称。
以下是一个用于向客户端发送自定义事件的服务器端示例代码：
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "id: $time\n";
echo "event: userlogon\n";
echo 'data: {"message":"New user logged in"}\n\n";以上示例代码将生成一个名为 "userlogon" 的 SSE 事件，其中包括一个 JSON 格式数据表示新用户已登录。
以下是客户端 JavaScript 示例代码：
let source = new EventSource("server.php");
source.addEventListener("userlogon", function(event) {
let data = JSON.parse(event.data);
console.log(data.message);
});在此示例中，我们使用addEventListener方法为 "userlogon" 事件添加了一个事件处理程序。在事件处理程序内部，我们将接收到的 JSON 格式数据打印到控制台上。
结论
通过 Server-Sent Events 技术，可以轻松创建实时数据流应用程序，它通过单向持久连接从服务器端接收数据。本文介绍了 Server-Sent Events 数据流的格式以及如何设置、解析自定义事件。使用 Server-Sent Events 可以很容易地开发实时应用程序，利用它可以解决实时应用程序的许多挑战。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6735a7ff0bc820c5824fb868