Server Sent Events (SSE) 是指一种实现服务器向客户端推送数据的技术。它们起源于 HTML5 标准，用于在客户端和服务器之间建立实时通信的连接。在前端开发中，SSE 有着广泛的应用，例如游戏、聊天应用、数据可视化等等。
SSE 工作原理
SSE 是基于 HTTP/1.1 协议的，使用了类似长轮询的机制。当浏览器与服务器建立 SSE 连接后，服务器会保持这个连接处于打开状态（不断发送），直到有数据传回给浏览器或者连接超时，浏览器才关闭连接。连接关闭后，浏览器会自动重新建立新的 SSE 连接。
在传统的 HTTP 请求中，请求发送一次只能返回一个响应。而在 SSE 中，服务器可以不断向客户端发送消息，因此 SSE 是一种单向通信机制。
SSE 与 WebSocket 的区别
SSE 和 WebSocket 都是实现实时通信的技术，但是它们有一些区别：
- SSE 建立的连接是基于 HTTP/1.1，而 WebSocket 则是一个全双工通信的协议。
- WebSocket 可以在客户端和服务器之间进行双向通信，而 SSE 则是一种单向通信机制，只能由服务器向客户端推送数据。
- SSE 的优点是实现上比较简单，对网络协议做了一个轻量化的封装，常常被应用于轻量级的应用程序。
如何使用 SSE
在浏览器端，使用 SSE 的方法很简单，只需要创建一个 EventSource 对象，在创建时指定服务器的 URL 即可:
var source = new EventSource('/api/sse');在服务器端使用 SSE 也比较简单，只需在响应头中指定 MIME 类型为 text/event-stream，并发送一些数据即可。例如，在 Node.js 中可以使用以下代码实现 SSE：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
-------------- -- -
---------------- ----- --------------
-- ------
---
------------------- -- -- -
---------------- ------ ------- -- ---- -------
---在服务器端，需要注意以下几点：
- 响应头的 Content-Type 必须设置为 text/event-stream，否则浏览器不能正确解析数据。
- 响应头的 Cache-Control 必须设置为 no-cache，意思是不缓存数据。
- 响应头的 Connection 必须设置为 keep-alive，保持连接处于打开状态。
- 发送的数据必须符合 SSE 的格式，也就是每个消息以 "data:" 开头，以 "\n\n" 结尾。
SSE 的应用场景
SSE 适用于一些轻量级的应用场景，例如展示实时数据、在线聊天、数据可视化等等。下面是一个实时展示服务器 CPU 使用率的示例：
-- -------------------- ---- ------- -- ---- -- ---- --------------------- -- ---------- -- --- ------ - --- ---------------------------- ---------------------------------- ----------- - -------------------- ---------------------------------------------- - ------- ---
-- -------------------- ---- -------
-- ------- ---
----- -- - --------------
----- ------- - -------------------
----- --- - ----------
-- --- --
----------------------- ----- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
-------------- -- -
----- ---- - ----------------
-----------------------------------------
-- ------
---
---------------- -- -- -
---------------- ------ ------- -- ---- -------
---总结
SSE 是一种轻量级的实现服务器向客户端推送数据的技术，与 WebSocket 相比，SSE 的实现更简单，适用于一些简单的场景。我们可以使用 SSE 实现实时数据的展示、在线聊天、数据可视化等等。同时，在使用 SSE 时也需要注意一些细节，例如响应头的设置和数据格式的要求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6480448248841e9894fc1a97