什么是 SSE
SSE（Server-Sent Events）是一种新的 Web API，用于服务器端向客户端单向推送数据。相比传统的轮询和长轮询方式，SSE 的优势在于：易于实现、实时性好、传输数据开销小等。
SSE 是基于 HTTP 协议的，使用的是标准的 HTTP 请求和响应，因此非常易于实现和维护。同时，SSE 也支持自定义头部信息、压缩传输、心跳等特性，可以满足各种场景的需求。
实现一个简单的 SSE 示例
下面，我们通过一个例子来展示如何使用 SSE 完成实时数据推送。
客户端代码
首先，我们需要在客户端实现 SSE 的监听。以下是一个简单的 JavaScript 实现：
--- ------ - --- ----------------------- ---------------- - -------- ------- - ------------------------ --
这段代码中，我们首先通过 new EventSource('/server') 创建了一个 SSE 对象，指定了 SSE 服务器的地址。然后在 source.onmessage 事件中监听推送消息，收到服务器端发送的消息时，打印出消息内容。
服务器端代码
接下来，我们需要在服务器端实现数据的推送。以下是一个使用 Node.js 和 Express 框架实现的示例代码：
----- ------- - -------------------
----- --- - ----------
-- ------ ---
------------------ -------- ----- ---- -
---------
--------------- --------------------
---------------- -----------
------------- -------------
---
-------------- -- -
---------------- ----- -----------------------------------
-- ------
---
-- ----
---------------- -------- -- -
------------------- -- ------- -- ---- --------
---在上面的代码中，我们首先定义了一个路由，用于向客户端发送 SSE。在路由处理函数中，我们通过 res.set 方法设置了一些头部信息，如 Content-Type、Cache-Control、Connection，这些头部信息都是 SSE 的标准规范。
然后，我们使用 setInterval 定时向客户端发送数据。这里，我们简单地向客户端发送了当前时间，每秒发送一次。
最后，我们启动了一个监听端口为 3000 的服务器，服务器默认监听 3000 端口，可以在浏览器中访问 http://localhost:3000 进行测试。
运行示例
运行上面的代码后，在浏览器中打开控制台，可以看到每秒钟输出一个时间字符串，这些时间字符串是服务器端实时推送过来的。
至此，一个简单的 SSE 数据推送示例就完成了。这个示例虽然简单，但是道出了 SSE 的精髓：使用 SSE 实现实时数据推送，在性能和易用性上都有很大的改进空间。
总结
通过本文的介绍，我们了解了什么是 SSE，以及如何使用 SSE 实现实时数据推送。SSE 已经成为了现代 Web 开发中的重要一环，它能很好地解决实时数据推送的难题，并为开发者提供了一种易用、高效的解决方案。
在实际的项目中，如需使用 SSE，我们还需注意一些细节问题，如数据格式、跨域请求、不同浏览器的兼容性等。同时，也要避免频繁推送数据造成服务器的压力过大。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6480e59648841e9894062c6f