Server-Sent Events（SSE）是一项 HTML5 技术，提供了一种向前端实时推送数据的方式。它比传统的 AJAX 定时轮询技术更加高效，因为它建立了一个持久连接，而不是每次都重新建立连接。
在本文中，我们将学习如何在 Node.js 中使用 SSE，以实现实时通信和推送数据给前端。我们将探讨 SSE 的工作原理、如何实现 SSE 服务器和客户端，并提供示例代码和指导意义。
SSE 的工作原理
在 SSE 中，客户端通过 HTTP 连接到服务器，并请求一个 SSE 流。服务器在建立连接后，将发送一个 HTTP 响应并保持连接打开。SSE 流是一个连续的文本流，服务器可以随时通过该流向客户端发送事件和数据。
客户端使用一个新的事件源对象（EventSource），通过该对象将 SSE 流连接到客户端。事件源对象监听服务器发送的事件，一旦接收到事件，客户端就会触发相应的处理函数。这样，服务器就可以向客户端推送实时更新的数据。
实现 SSE 服务器
在 Node.js 中，我们可以使用一个 HTTP 服务器库（例如 http 或 express）来实现 SSE 服务器。以下是实现 SSE 服务器的简单示例代码：
----- ---- - ----------------
-- -- ---- ---
----- ------ - ----------------------- ---- -- -
-- -----
------------------ -
--------------- -------------------- -- ---------- --- -
---------------- ----------- -- ------- --- -
---
-- ------ --- -----
----------------- -------------
---------------- ---- -- -- ------------- -- ---------------
-- -------- --- -----
-------------- -- -
----------------- -------------
---------------- ------- ----- --- ----------------
-- ------
---
-- -- ---- ---
------------------- -- -- -
---------------- ------ -- ------- -- ------------------------
---在上面的示例代码中，我们首先创建一个 HTTP 服务器，然后设置响应头，告知客户端连接上的是 SSE 流，并禁止客户端缓存 SSE 流。
接着，我们向客户端发送 SSE 事件和数据。使用 "event: my_event" 定义事件名，然后使用 "data: " 发送数据，注意每个事件后面需要添加两个换行符。这是因为 SSE 流必须使用 text/event-stream MIME 类型和换行符来分割事件和数据。
最后，我们使用 setInterval() 方法定时向客户端发送 SSE 事件和数据，以展示 SSE 流的持久连接特性。在实际应用中，我们可以根据需求向客户端推送不同的事件和数据。
实现 SSE 客户端
在客户端中，我们可以使用 EventSource 对象连接到 SSE 流，并监听服务器发送的事件。以下是实现 SSE 客户端的简单示例代码：
----- ----------- - --- ------------------------------------- -- ------------- ---------------------------------------- ----- -- - ------------------------ ---
在上面的示例代码中，我们首先创建一个事件源对象，并将其连接到 SSE 流。在连接成功后，我们可以使用 addEventListener() 方法监听服务器发送的事件，一旦接收到事件，就会触发相应的处理函数，从而实现实时通信和推送数据给前端。
总结
在本文中，我们学习了如何在 Node.js 中使用 SSE，以实现实时通信和推送数据给前端。我们探讨了 SSE 的工作原理、如何实现 SSE 服务器和客户端，并提供了简单且易于理解的示例代码和指导意义。
SSE 是一项强大的技术，能够有效减少服务器和客户端之间的通信量，并实现实时更新和数据推送。在实际应用中，我们可以根据需求优化 SSE 流、自定义事件和数据，并与其他技术（如 WebSockets 和长轮询）结合使用，以实现更加灵活和高效的通信方案。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6467617e968c7c53b07c54fc