在前端开发中，实时数据推送是一项非常重要的技术。传统的实时数据推送方法包括轮询和长轮询，但这些方法都有一些缺点，比如轮询会造成网络流量浪费，而长轮询则会增加服务器负担。
为了解决这些问题，HTML5 提供了一种新的技术：Server-sent Events。它可以在浏览器和服务器之间建立一个持久的连接，使得服务器可以主动向浏览器推送实时数据，而不需要浏览器不断地发送请求。
实现方法
- 在服务器端，首先需要开启 SSE 支持。在 Node.js 中，可以使用
express框架来实现：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----------------------------------
--------------- ----- ---- -- -
---------
---------------- -----------
--------------- --------------------
------------- ------------
---
-------------- -- -
---------------- ----- ----------------------------
-- ------
---以上代码中，我们定义了一个 /sse 路由，它返回了一个 text/event-stream 类型的响应。在响应头中，我们设置了 Cache-Control 为 no-cache，这样浏览器就不会缓存这个响应。同时，我们也设置了 Connection 为 keep-alive，这样可以保持连接不断开。
在响应体中，我们使用了 setInterval 函数来每隔一秒钟向客户端推送一条数据。每条数据都以 data: 开头，并且以两个 \n 结尾，这是 SSE 的标准格式。
- 在客户端，我们可以使用 JavaScript 来建立 SSE 连接，并且接收服务器推送的数据：
const eventSource = new EventSource('/sse');
eventSource.addEventListener('message', event => {
console.log(event.data);
});以上代码中，我们使用 EventSource 类来建立 SSE 连接，并且指定了服务器端的 /sse 路由。当服务器端推送数据时，message 事件会被触发，我们可以在事件处理函数中处理数据。
示例代码
以下是一个完整的示例代码，可以直接运行在 Node.js 环境中：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----------------------------------
--------------- ----- ---- -- -
---------
---------------- -----------
--------------- --------------------
------------- ------------
---
-------------- -- -
---------------- ----- ----------------------------
-- ------
---
---------------- -- -- -
------------------- ------- -- ---- -------
---
----- ----------- - --- --------------------
--------------------------------------- ----- -- -
------------------------
---当我们运行这个代码后，可以在控制台中看到每隔一秒钟输出一条数据。
指导意义
使用 Server-sent Events 技术可以极大地提高实时数据推送的效率，同时也可以减少网络流量和服务器负担。但是，需要注意的是，SSE 并不是所有浏览器都支持的，比如 Internet Explorer 和 Edge 都不支持 SSE。因此，在使用 SSE 技术时，需要考虑到浏览器的兼容性问题，并且提供备选方案。
另外，需要注意的是，SSE 的连接是单向的，即只能从服务器向客户端推送数据，客户端无法向服务器发送数据。如果需要双向通信，可以考虑使用 WebSocket 技术。
总之，Server-sent Events 技术是一项非常有用的技术，它可以帮助我们实现更高效的实时数据推送。在实际开发中，需要根据具体情况来选择合适的技术，以达到最佳的效果。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d385aca941bf71346b526b