引言
随着 Web 应用越来越复杂，实时数据的需求也变得越来越迫切。不仅如此，数据传输的效率也变得越来越重要。如果不考虑传输效率，数据的推送将会变得非常缓慢，用户体验会受到很大影响。在这方面，SSE 技术就显得尤为重要。SSE（Server-Sent Events）是一种实时推送数据的技术，它可以帮助我们提高数据传输的效率，并且提升用户体验。这篇文章将会介绍 SSE 技术的推送模式以及如何在前端实现它。
SSE 简介
SSE 技术是通过建立持久化的 HTTP 连接，将服务器端的数据推送给客户端，从而实现实时的消息推送。与 WebSocket 技术类似，SSE 也是一种双向通信技术。但是，它不需要使用专门的协议或者 API，而是直接使用 HTML5 规范下的原生技术。
相较于 WebSocket，SSE 更加适合用在服务器向客户端发送流数据的场景下。这是因为 SSE 使用基于 HTTP 的连接，因此可以避免一些被防火墙所阻挡的请求，而且每次响应的内容也比较小，将会更加省电省流量，也能够更快地进行数据推送。
SSE 的推送模式
SSE 技术的推送模式有两种，分别是基于 PHP 和 Node.js 的推送模式。接下来，我们将会分别讲解这两种推送模式。
基于 PHP 的推送模式
服务端
推送数据的服务端脚本需要设置响应头，指定其服务端发送的数据是 SSE 格式的数据。下面是一个简单的 PHP 脚本实现 SSE 的代码：
-- -------------------- ---- ------- ----- --------------------- -------------------- ---------------------- ----------- -------- - ------ -------- ---------- - ----- -- - ---- ---- ------- ---------------- ---- ------ ---------------- -------- --
在这个例子中，我们使用 header() 函数为服务端发送的数据设置两个响应头。第一个是 Content-Type，将数据类型设置为 SSE 格式的数据。第二个是 Cache-Control，用于防止浏览器缓存推送的数据。接下来，我们定义了一个包含消息内容的变量，然后设置了一个重试时间。在最后，我们使用了 echo 语句将数据以 SSE 格式输出。我们在第三行加了retry字段，一般情况下 SSE 连接通道是不会关闭的，如果这个 SSE 通道卡住了，将可能导致客户端无法接收到数据，因此我们设置了一个重试时间，客户端如果接收不到数据，就会在设置的时间后自动重试建立连接。
客户端
接下来是客户端使用 JS 实现 SSE 技术：
const eventSource = new EventSource("sse.php");
eventSource.onmessage = function(event) {
console.log("data: " + event.data);
};我们使用 EventSource 对象为 SSE 的连接建立了客户端的连接。在成功连接到服务端之后，每当服务端推送一条消息，我们将会在 onmessage 函数内接收到消息内容，并将消息内容打印到控制台中。需要注意的是，当客户端连接到服务端之后，会先接收一个消息，这个消息一般是用于触发客户端的 onopen 事件。
基于 Node.js 的推送模式
服务端
Node.js 下的 SSE 推送，可以使用第三方的 npm 包：sse。这个包提供了一个 SSE 服务端的 API，可以很方便地在 Node.js 中使用。下面是一个基于 SSE 的 Node.js 端代码：
-- -------------------- ---- -------
----- --- - ---------------
----- ------ - -------------------------------
--------------------
----- --- - --- ------------
-------------------- ---------------- -
-------------- -- -
----- ---- - --- ---------------------
-------------
----- ----
---
-- ------
---在这个例子中，我们使用 sse 包创建了一个 SSE 服务端的对象，并将其绑定到一个 HTTP 服务器上。随后，我们在 connection 事件中使用 setInterval 函数每隔一秒钟向客户端推送一条正文为时间戳的消息。
客户端
上面的服务端推送代码运行后，就可以使用下面的客户端脚本接收消息：
const eventSource = new EventSource("http://localhost:3000");
eventSource.onmessage = function(event) {
console.log("data: " + event.data);
};在这段代码中，我们使用 EventSource 对象建立了客户端到服务端的连接，并在成功建立连接后监听了 onmessage 事件。当服务端推送消息到客户端时，会触发 onmessage 事件，并在其参数中传递消息的内容。
总结
本篇文章介绍了 SSE 技术的推送模式，并详细讲解了如何在前端中，使用 PHP 和 Node.js 分别实现 SSE 技术推送数据的过程。SSE 技术的推送模式可以帮助我们提高数据传输的效率，减少服务器的压力，同时也可以优化用户体验。非常建议开发者们在需要实时推送数据的 Web 应用中使用 SSE 技术，以提高系统的性能表现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ad1c0748841e9894943240