什么是 SSE？
SSE（Server-Sent Events）是一种在 Web 上实现推送的技术，它可以在不使用 AJAX 轮询的情况下，允许服务器向客户端发送事件流。相对于传统的轮询方式，SSE 具有以下的优势：
- 响应更快：SSE 可以减少服务器和客户端之间的网络请求次数，从而实现更快的响应速度；
- 降低资源消耗：SSE 与轮询方式相比，可以大大减少网络带宽的消耗；
- 实时性更强：SSE 支持服务器向客户端推送事件，这意味着可以实现实时更新数据的效果。
SSE 的工作原理
在使用 SSE 技术时，客户端会向服务器发起一个 HTTP 请求。如果服务器允许 SSE，它会返回一个特殊的 MIME 类型 text/event-stream，随后客户端便开始接收事件流。可以通过设置事件的类型（event）、数据（data）和标识符（id）等属性，实现更加复杂的交互行为。
以下是一个简单的 SSE 示例：
-- -------------------- ---- -------
-- -----
----- ------ - --- -----------------------
---------------- - ------- -- -
------------------------
-
-- ------
------------------ ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- ------------
---
--- - - --
-------------- -- -
---------------- -----------
----
-- ------
---在上面的代码中，客户端向服务器发起了一个名为 /events 的 SSE 请求，随后服务器会每秒钟向客户端发送一个数字，这些数字会在客户端的控制台上显示出来。
SSE 和永久链接的优化
在实际使用中，由于网络不稳定等原因，SSE 有时候会出现“断流”的情况。为了解决这个问题，一种常见的做法是使用永久链接（Long Polling）方式。与轮询方式不同，永久链接会让客户端一直保持连接状态，直到服务器有数据更新时才会从服务器获取数据。
以下是一个使用永久链接优化 SSE 的示例：
-- -------------------- ---- -------
-- -----
--- ------ - --- -----------------------
-------------- - -- -- -
---------------
------ - --- -----------------------
-
---------------- - ------ -- -
------------------------
--
-- ------
--- ------- - ---
------------------ ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- ------------
---
------------------
--------------- -- -- -
------- - ----------------------- -- ------ --- -----
----------
---
---
-------------- -- -
------------------------ -- -
------------------- --------------------
---
-- ------在上面的代码中，客户端向服务器发起了一个 SSE 请求，并使用了一个全局的 clients 数组保存了所有连接的客户端。在服务器收到新数据时，会遍历 clients 数组并发送数据。如果客户端断流了，服务器会在 onclose 事件中将客户端从 clients 数组中过滤掉。
总结
SSE 技术可以实现在不使用 AJAX 轮询的情况下，实现服务器向客户端发送实时事件流的效果。使用 SSE 需要注意网络稳定性问题，并可以通过使用永久链接方式进一步优化用户体验。在实际的开发中，如果需要实现实时更新数据的功能，不妨考虑使用 SSE 技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/665819bbd3423812e4de31d3