什么是 Server-sent Events
Server-sent Events 是一种 HTML5 新增的技术，用于实现服务器向客户端推送消息的机制。与传统的轮询方式相比，它具有以下优点：
- 实现了真正的实时交互，可以在服务器端发生变化的时候立即推送消息给客户端，减少了请求和响应之间的延迟时间；
- 支持多种数据类型，如文本、JSON 等；
- 适用于 Web 应用程序和移动应用程序。
使用 Server-sent Events 发送数据
要使用 Server-sent Events 发送数据，需要先在服务器端设置一个事件流，然后通过 JavaScript 客户端来连接这个事件流。服务器端的设置可以使用以下代码：
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('Connection: keep-alive');
$data = [
'message' => 'Hello World',
'time' => date('r')
];
echo 'data: ' . json_encode($data) . "\n\n";
while (true) {
ob_flush();
flush();
sleep(1);
}这段代码会发送一行文本数据到客户端，该数据是一个 JSON 对象，包括一个消息和当前时间戳。然后代码进入一个无限循环，在每个循环中睡眠 1 秒钟，以保持连接处于活动状态。这个事件流还用 no-cache 和 keep-alive 选项来确保浏览器不会缓存数据，而且连接会一直保持开放状态。
使用 Server-sent Events 接收数据
要使用 Server-sent Events 接收数据，需要在 JavaScript 客户端中创建一个 EventSource 对象，并指定事件流的 URL。在接收到数据时，这个对象会触发 onmessage 事件，你可以在事件处理函数中获取到数据并显示在页面上：
const eventSource = new EventSource('/my-event-stream');
eventSource.onmessage = function(event) {
const data = JSON.parse(event.data);
console.log(data);
const message = document.createElement('p');
message.innerText = data.message + ' (' + data.time + ')';
document.body.appendChild(message);
};这段代码首先创建了一个 EventSource 对象，连接到 /my-event-stream URL 上，然后在 onmessage 事件处理函数中将接收到的 JSON 数据打印到控制台，另外还在页面上创建了一个新的段落元素，显示了消息和时间戳。
建立长连接
Server-sent Events 的一个重要特点是它可以与服务器建立长连接，不会像传统的轮询方式那样频繁发起请求和接收响应。这是非常有价值的，因为可以减少网络带宽的使用，提高 Web 应用程序的性能和用户体验。
结束连接
要结束 Server-sent Events 连接，可以通过在 JavaScript 中调用 EventSource 对象的 close 方法来实现：
eventSource.close();
总结
本文中，我们介绍了 Server-sent Events 技术的基本原理和用法，通过一个简单的示例演示了如何在 JavaScript 中使用 Server-sent Events 发送和接收数据。这项技术具有很大的潜力和实际应用价值，可以实现服务器向客户端实时推送消息，减少网络带宽的使用，提高 Web 应用程序的性能和用户体验，是前端开发人员必须掌握的一项技能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658fac88eb4cecbf2d5472a3