什么是 Server-Sent Events
Server-Sent Events（SSE）是一种基于 HTTP 的协议，用于服务器向客户端推送数据。与 WebSocket 不同，SSE 是一种单向的通信方式，即只能从服务器向客户端发送数据，而客户端不能向服务器发送数据。SSE 通常用于推送实时数据、通知和事件等。
可缓存的包含指令
在实际应用中，我们可能需要向客户端推送一些包含指令的数据。这些指令可以告诉客户端如何处理数据，比如更新页面的某个区域、添加新的元素等。同时，这些数据可能会被缓存，以便客户端在下一次访问时能够直接使用，而不必再次从服务器获取数据。
为了实现这样的功能，我们可以使用 SSE 的自定义事件。通过在服务器端生成自定义事件，我们可以在客户端监听这些事件，并在接收到事件时进行相应的处理。
如何使用 SSE 处理可缓存的包含指令
在服务器端，我们可以使用以下代码生成自定义事件：
const data = {
command: 'update',
content: 'Hello, world!'
};
const eventData = `event: custom-event\ndata: ${JSON.stringify(data)}\n\n`;
res.write(eventData);这里我们生成了一个名为 custom-event 的自定义事件，并将包含指令的数据放入 data 字段中。最后，我们使用 write 方法将事件数据发送给客户端。
在客户端，我们可以使用以下代码监听自定义事件：
-- -------------------- ---- -------
----- ----------- - --- -----------------------
-------------------------------------------- --------------- -
----- ---- - -----------------------
-------------------- -
---- ---------
----------------------------
------
---- ------
-------------------------
------
--------
------
-
---这里我们使用 EventSource 对象监听服务器端的 /events 路径，同时在 addEventListener 方法中注册自定义事件的处理函数。当接收到自定义事件时，我们可以根据指令的类型进行相应的处理，比如更新页面内容或添加新的元素。
示例代码
下面是一个完整的示例代码，演示如何使用 SSE 处理可缓存的包含指令：
-- -------------------- ---- -------
-- ------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
----- ---- - -
-------- ---------
-------- ------- -------
--
----- --------- - ------- ------------------- -----------------------------
---------------------
------------- -- -
----- ---- - -
-------- ------
-------- --------- --------------
--
----- --------- - ------- ------------------- -----------------------------
---------------------
-- ------
---
------------------- -- -- -
------------------- -- ------- -- ---- -------
---
-- -----
----- ----------- - --- -----------------------
-------------------------------------------- --------------- -
----- ---- - -----------------------
-------------------- -
---- ---------
----------------------------
------
---- ------
-------------------------
------
--------
------
-
---
-------- ---------------------- -
-------------------------------------------- - --------
-
-------- ------------------- -
----- ------- - ------------------------------
----------------- - --------
-----------------------------------
-在这个示例中，我们向客户端推送了两个自定义事件，第一个事件包含 update 指令，用于更新页面内容，第二个事件包含 add 指令，用于添加新的元素。同时，我们在客户端定义了 updateContent 和 addElement 两个函数，用于处理接收到的自定义事件。
结论
使用 SSE 可以方便地向客户端推送实时数据、通知和事件等。通过生成自定义事件，并在客户端监听这些事件，我们可以实现可缓存的包含指令的数据传输。这样的功能在很多实际应用中都非常有用，比如在线聊天、实时监控等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6744154ef3dd653032a266f2