前言
在现代化的 Web 开发中，前后端分离已经成为越来越普遍的架构设计。前后端分离后，前端需要与后端建立起实时通信的机制，以实现与服务器之间的实时数据传输和交互。而 Server-Sent Events (SSE)，即服务器推送事件，则是一种实现实时通信的技术方案，它可以让服务器主动向客户端推送数据，而无需客户端发起请求，从而实现实时通知和数据更新。
SSE 的工作原理
SSE 是一种基于 HTTP 协议的实时通信技术，它的工作原理类似于长连接（长轮询）技术，但它比长连接更加稳定和可靠。SSE 主要基于以下三个 HTTP 特性实现：
HTTP 的请求和响应机制：客户端通过 HTTP 协议向服务器发起一个 SSE 连接请求，并等待服务器响应。
HTTP 的 Chunked 编码：SSE 通信采用 Chunked 编码，即服务器将数据以块的形式发送给客户端，每个块以
\r\n结尾，客户端接收数据直到遇到一个空行为止。服务器的事件流：服务器通过 SSE 发送一个事件流（Event Stream），事件流是一组由服务器定义的事件和相关的数据，每个事件以一些协议规定的字段开头，包括事件标识符 event、数据标识符 data 和注释标识符 comment，数据以 UTF-8 编码发送。
实现 SSE
首先，在前端，我们需要使用 JavaScript 通过 EventSource 对象来创建 SSE 连接。下面是一个简单的实现 SSE 连接的示例代码：
-- -------------------- ---- ------- ----- ----------- - --- ------------------------------------ ------------------ - -------- ------- - ---------------- ---------- --- ---- --------------- -- --------------------- - -------- ------- - --------------------- ---- ---- --------- ------------ -- ------------------- - -------- ------- - ------------------ ---------- -------- ------- --
在后端，我们需要创建一个 SSE 处理程序来处理 SSE 连接请求，并向客户端发送事件流。下面是一个简单的 SSE 处理程序的示例代码：
-- -------------------- ---- -------
------------------------------- ------------- ---- -
----------------------- ---------------------
------------------------ ------------
--------------------- --------------
---------------------- - -- ----------- - ------------
----------------- -----------------
---------------- - - ---------- - -------- -- --------
-- ------
---在上面的示例代码中，我们使用 Express.js 框架创建一个 SSE 处理程序，根据 SSE 的规范，我们需要为响应设置 Content-Type 为 text/event-stream，设置 Cache-Control 为 no-cache，其作用是禁止客户端缓存 SSE 响应，否则客户端无法获得最新的数据，并设置 Connection：keep-alive 以保持连接。在事件流中，我们首先使用 event 属性指定事件的类型为 custom-event，在这里，你可以定义你的事件名和相关的数据，数据使用 data 属性进行发送，每个事件和数据以两个换行符结尾，以告诉客户端事件已经完成，并且可以开始接收下一个事件。
总结
通过使用 SSE，我们可以在前后端分离的 Web 应用程序中实现实时通信，以更快速、更高效地传输数据和实现实时交互。上述示例代码仅为简化版，SSE 实现有更多细节和复杂性需要考虑，如 SSE 的重连机制、异常处理等，但相信你已经掌握了 SSE 的基本使用方法。在实际开发中，你可以使用 SSE 继续探索更多有趣、实用的 Web 应用场景，加强 Web 应用的可扩展性和用户交互性。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f773ecf6b2d6eab3fda087