引言
Server-Sent Events (SSE) 是一种轻量级的服务器推送技术，它可以允许服务端向浏览器客户端发送单向的数据流。
在前端应用程序中，我们经常需要通过多层数据传递来展示实时数据或实时通知。例如电子商务网站的在线购物，在用户提交订单后，服务端会推送通知给用户，展示订单状态等信息。
SSE 可以很好地解决这类场景下的数据传递问题，本文将介绍如何使用 SSE 实现多层数据传递。
SSE 如何工作
SSE 是一种基于 HTTP/1.1 的协议，可以使用 XMLHttpRequest 或 Fetch API 从服务端获取事件流。
SSE 的核心是事件流，服务端通过设置响应头 Content-Type 为 text/event-stream，将数据分成多个事件，每个事件用一行分隔，然后在每个事件之间设置一个空行。
浏览器通过 EventSource API 使用 SSE，只需要给 EventSource 对象传递服务端地址，就可以自动接收服务器端推送的事件流，并将事件解析为 JavaScript 事件对象。
使用 SSE 实现多层数据传递
在实现多层数据传递的场景下，SSE 可以将数据分为两类：
服务端产生的事件，包含需要传递给前端的数据。
前端产生的事件，用于向服务端发送需要修改的数据。
服务端代码
我们先来看一下服务端实现多层数据传递的示例代码：
----- ---- - ----------------
-------------------------- --------- --------- -
----------------------- -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- --------------
---------------------- ---------
--------------------- ------------------------------------------
-- ---------
------------------ -------- ------ -
----- --------- - -----------------
------ ---------------- -
---- -----------------
-- -----------
----- --------------- - -------------------------------
---------------------- -------------------
--------------------- -----------------------------------------
------
---- --------------
-- ---------
----- ----------- - ----------------------------
---------------------- ----------------
--------------------- -------------------------------------
------
-
---
----------------在服务端代码中，我们首先设置响应头，让浏览器知道我们要发送一个事件流。
然后，在服务端发送初始事件，用于初始化页面。
最后，我们监听浏览器发送的事件，并根据事件的类型处理不同的业务逻辑。当服务端需要给浏览器传递数据时，使用 response.write() 方法发送一个事件。浏览器通过 EventSource API 接收服务端传来的事件。
前端代码
接下来我们看一下前端代码，如何使用 SSE 接收事件，以及如何发送事件：
----- ----------- - --- --------------------
-- ----------
--------------------- - -------- ------- -
----- --------- - -----------------------
------ ---------------- -
---- -------
-- -----
-------------------------
------
---- -----------------
-- -----------
-------------------------------
------
---- --------------
-- ---------
----------------------------
------
-
--
-- --------
-------- --------------- ----- -
----- ----- - - ----- ---- --
----- --- - --- -----------------
---------------- --------
------------------------------------ --------------------
--------------------------------
-在前端代码中，我们通过 EventSource('/sse') 创建了一个 SSE 连接，并监听 onmessage 事件来处理服务端推送的事件。
在 sendEvent() 方法中，我们创建了一个 XMLHttpRequest 对象，向服务端发送了一个事件。在发送事件时，我们需要设置请求方法为 POST，并将事件数据以 JSON 字符串的形式传递。
总结
本文介绍了如何使用 Server-Sent Events 实现多层数据传递。
通过使用 SSE，我们能够实现服务端向浏览器客户端发送单向的数据流，实现实时数据传递或实时通知等功能。
在实际应用中，需要根据业务需求和实际情况来设计数据传递的方式，以及对事件进行分类和处理。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653a39007d4982a6eb41746e