什么是 SSE
SSE（Server-Sent Events）是一种 HTML5 的新特性，它允许服务器向客户端推送数据，而不需要客户端发起请求。这种技术在实时更新数据的场景下非常有用，例如实时聊天、实时通知等。
SSE 的工作原理是，客户端向服务器发送一个 HTTP 请求，并在请求头中加上 Accept: text/event-stream，服务器在接到请求后会保持连接，并不断向客户端发送数据，每个数据包都以 \n\n 结尾，表示一个事件的结束。
SSE 的优势
相比于传统的轮询（Polling）和长轮询（Long Polling）方式，SSE 有以下优势：
- 实时性更高，因为服务器可以直接推送数据给客户端，而不需要客户端不停地发起请求。
- 更省流量，因为不需要客户端不停地发起请求。
- 更节省资源，因为服务器不需要为每个连接创建新的线程或进程，而是可以使用异步 I/O。
实现 SSE
实现 SSE 的方法非常简单，只需要在服务器端发送符合 SSE 规范的数据即可。下面是一个简单的 Node.js 示例：
-- -------------------- ---- -------
----- ---- - ---------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
--
-------------- -- -
---------------- - - --- -------------------- - -------
-- -----
---------------这段代码会创建一个 HTTP 服务器，并在每秒钟向客户端发送一个包含当前时间的事件。在客户端，可以使用 EventSource 对象来接收 SSE 数据：
const source = new EventSource('/sse')
source.addEventListener('message', (event) => {
console.log(event.data)
})这段代码会向 /sse 发起 SSE 请求，并在接收到数据时输出数据到控制台。
实现动态添加或删除后实时更新
使用 SSE 实现动态添加或删除后实时更新，只需要在服务器端根据实际情况发送相应的数据即可。下面是一个基于 Express.js 的示例：
-- -------------------- ---- -------
----- ------- - ------------------
----- ---------- - ----------------------
----- ---- - ---------------
----- --- - ---------
----- ------ - ----------------------
--------------------------
------------------------------- --------- ---- ---
---------------------------------
--------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
--
-------------- -- -
----- ---- - -
----- --- ---------------------
------ ------------------------ - ----
-
---------------- - - -------------------- - -------
-- -----
--
--- ----- - -
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- -
-
----------------- ----- ---- -- -
---------------
--
------------------ ----- ---- -- -
----- ------- - -
--- ------------ - --
----- -------------
-
-------------------
----- ---- - -
------- ------
----- -------
-
------------------- ---------------------
-----------------
--
------------------------ ----- ---- -- -
----- -- - ----------------------- ---
----- ----- - ---------------------- -- ------- --- ---
-- ------ -- -- -
----- ----------- - ------------
------------------- --
----- ---- - -
------- ---------
----- -----------
-
------------------- ---------------------
---------------------
- ---- -
---------------------- ------ ----- --- ------ --
-
--
----------------- ------ -- -
------------------------------- -- -
------------------- - - ---- - -------
--
--
------------------- -- -- -
------------------- ------- -- ---- ------
--这段代码会创建一个 Express.js 应用，提供一个 /items 的 RESTful API，支持 GET、POST、DELETE 方法，同时也提供一个 /sse 的 SSE 接口，用于推送动态添加或删除的数据。
在客户端，可以使用 EventSource 对象来接收 SSE 数据，并根据数据中的 action 属性来更新页面上的数据：
-- -------------------- ---- -------
----- ------ - --- -------------------
---------------------------------- ------- -- -
----- ---- - ----------------------
-- ------------ --- ------ -
----- ---- - ---------
----- -- - ----------------------------
-------------- - ---------
-----------------------------------------------
- ---- -- ------------ --- --------- -
----- ---- - ---------
----- -- - ------------------------------- - --------
-- ---- -
-----------------------------
-
-
--这段代码会向 /sse 发起 SSE 请求，并在接收到数据时根据数据中的 action 属性来更新页面上的数据。
总结
SSE 是一种非常有用的技术，可以用于实时更新数据的场景下。使用 SSE 实现动态添加或删除后实时更新，可以让用户获得更好的体验，同时也可以节省流量和资源。在实际开发中，可以根据具体需求来使用 SSE，从而提高应用的实时性和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66064bc5d10417a22245ad1f