什么是 SSE
SSE（Server-Sent Events，服务器推送事件）是一种服务器向客户端发送单向事件流的技术。它是一个基于 HTTP 的协议, 可以实现服务器向浏览器端发送流式数据。SSE 的数据是由服务器端主动推送给客户端的，所以与 Ajax 等客户端向服务器端发送数据的技术有所不同。我们可以把它理解成是一个长连接，服务器通过这个长连接不断传递数据到客户端。
下面是一个使用 SSE 实现客户端实时更新的示例代码：
-- -------------------- ---- -------
---- ---------- ---
--------- -----
----- ----------
------
----- ----------------
---------- ---------------
-------
------
---- ------------------
--------
---------------------- --- ------------ -
--- ------ - --- ---------------------------
---------------- - --------------- -
------------------------------------------- -- ---------- - -------
--
- ---- -
------------------------------------------- - ------- ---- ------- ---- --- ------- ----------- -----------
-
---------
-------
--------- -------------------- ---- -------
-- -----------
--------------------- --------------------
---------------------- ----------- -- ----------- -- ------- ------- -- ----- -----
--------------- - -------- ----------
----------- -
-- ----- --- -------
------------------ --- --- --------- -
-------- - ------------- -- --- ------- ---- ---- ---- ------
------------ -
---- ------ ----------------
-----------
--------
--------------- - --- ---------
-
-
---------
-
-------- ------------ -
-- --------- ---- ---- -- --- --- ------ ------- ---- ---- ---- ------
-- -- ----- -- -- --- -------- ------- -----
-上面的代码实现了在客户端显示服务器实时更新的消息，当服务器端有新的消息时，服务器推送消息到客户端，客户端通过 EventSource 接收到该消息并更新到页面上。
SSE 的使用方式和常见场景可以参考文章 使用 Server-Sent Events 。
SSE 与 WebSocket 的比较
WebSocket 和 SSE 都是用于实现在浏览器和服务端之间双向通信的技术，但是它们的实现方式和一些区别是不同的。
下面是 SSE 与 WebSocket 的比较：
- SSE 只支持单向通信，即服务器向浏览器发送消息，而 WebSocket 支持双向通信，浏览器和服务器可以相互发送消息。
- SSE 使用 HTTP ，而 WebSocket 使用专门的协议，可节省数据的大小。
- SSE 不需要特殊的服务器支持，只要是能够处理 HTTP 请求的服务器都可以使用，而 WebSocket 则需要支持 WebSocket 协议的服务器。
- SSE 使用简单，易于实现和维护。
如果你需要实现实时通讯和双向通讯，那么 WebSocket 是更好的选择。如果你需要单向的服务器推送数据，那么 SSE 更适合你。
总结
SSE 是一种简单易用的服务器向客户端推送数据的技术，它适用于那些只需要单向服务器推送数据的场景。通过与 WebSocket 的比较，我们可以更加清楚地了解 SSE 和 WebSocket 的异同及它们的应用场景，从而更好地选择适合的技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646dc359968c7c53b0c64129