SSE（Server-Sent Events）是一种服务器向客户端推送消息的技术，它使用 HTTP 协议实现，可以让服务器持续地向客户端发送消息，而客户端则可以通过 JavaScript 监听这些消息并进行处理。SSE 技术在实时性要求较高的场景下非常实用，比如在线聊天、股票行情等。
SSE 的实现原理
SSE 的实现原理基于 HTTP 长连接和事件流（Event Stream）。
HTTP 长连接是指客户端向服务器发送请求后，服务器不立即返回响应，而是保持连接打开，等待后续的数据传输。这种方式可以避免频繁地建立和断开连接，减少网络传输的开销。
事件流是指服务器向客户端发送一系列的事件，每个事件都包含一个事件类型和一个数据字段。客户端可以通过 JavaScript 监听这些事件，从而实现对服务器端消息的实时处理。
SSE 技术的实现原理就是在 HTTP 长连接的基础上，通过向客户端发送事件流，实现服务器向客户端推送消息的功能。
SSE 的使用方法
SSE 的使用方法非常简单，只需要在客户端使用 JavaScript 创建一个 EventSource 对象，然后指定要监听的事件类型和处理事件的回调函数即可。
下面是一个简单的 SSE 示例代码：
-- -------------------- ---- -------
--- ------ - --- --------------------
---------------------------------- --------------- -
--------------------- -------- - - ------------
-- -------
------------------------------- --------------- -
----------------------- ----------
-- -------
-------------------------------- --------------- -
-- ----------------- -- ------------------- -
----------------------- ----------
- ---- -
------------------ --------- - - -------------------------
-
-- -------这段代码创建了一个 EventSource 对象，指定了要监听的事件类型为 message，然后在回调函数中输出接收到的消息。同时还监听了 open 和 error 事件，用于处理连接的打开和关闭以及错误的情况。
在服务器端，需要使用特定的方式向客户端发送事件流。下面是一个 Node.js 的 SSE 示例代码：
-- -------------------- ---- -------
--- ---- - ----------------
------------------------------- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
---------------------- -
----------------- ------------
---------------- - - ---------- - --------
-- ------
----------------这段代码创建了一个 HTTP 服务器，指定了响应头的 Content-Type 为 text/event-stream，表示返回的是事件流。然后在 setInterval 函数中，每隔一秒向客户端发送一个名为 message 的事件，事件数据为当前时间戳。
SSE 的指导意义
SSE 技术在前端开发中非常实用，可以用于实现实时通信、推送系统、实时监控等功能。相比于 WebSocket 技术，SSE 更加轻量级，可以在不需要双向通信的场景下使用。同时，SSE 还具有良好的兼容性，可以在大部分现代浏览器中使用。
在使用 SSE 技术时，需要注意一些细节问题，比如事件流的格式、连接的保持时间、服务器端的性能等。只有充分理解 SSE 的实现原理和使用方法，才能更好地运用这项技术，为用户提供更好的体验。
总结
SSE 技术是一种实现服务器端推送消息的技术，基于 HTTP 长连接和事件流实现。它具有轻量、兼容等优点，在实时通信、推送系统、实时监控等场景中非常实用。在使用 SSE 技术时需要注意一些细节问题，充分理解 SSE 的实现原理和使用方法，才能更好地运用这项技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65868aabd2f5e1655d0f9b4f