介绍
在前端开发中，有时候需要从服务器实时获取数据并更新页面。传统的方式是使用轮询或者 WebSocket。但是，这些方法都有一些缺点，比如轮询会浪费带宽和服务器资源，而 WebSocket 需要双向通信，增加了复杂性。
而 Server-Sent Events（SSE）则是一种轻量级、简单易用的技术，可以在服务器上 Push 消息到客户端。SSE 只需要单向通信，可以减少服务器和客户端的负担，同时也可以减少网络流量。
SSE 的工作原理
SSE 的工作原理非常简单。客户端通过 HTTP 连接服务器，并发送一个特殊的请求头 Accept: text/event-stream。服务器收到请求后，会不断向客户端发送数据，每个数据包都有一个特殊的格式，如下所示：
event: message
data: Hello, world!
event: custom
data: {"name": "John", "age": 30}每个数据包由两个部分组成：
event：事件类型，可以是任意字符串，用于标识不同的事件。data：数据部分，可以是任意格式的数据，比如字符串、JSON 等。
客户端收到数据后，可以通过 JavaScript 代码进行处理，比如更新页面内容、播放音频等。
SSE 的优点
相比于传统的轮询和 WebSocket，SSE 有以下优点：
- 简单易用：SSE 只需要单向通信，不需要双向通信，减少了复杂性。
- 轻量级：SSE 只需要使用 HTTP 协议，不需要额外的握手和协议，可以减少网络流量。
- 实时性：SSE 可以实现实时更新数据，比轮询更及时，比 WebSocket 更简单。
- 兼容性：SSE 可以在所有现代浏览器中使用，不需要额外的库或插件。
示例代码
下面是一个使用 SSE 的示例代码。
服务器端代码
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
-- -------- --- ---------- -
------------------ -
--------------- --------------------
---------------- -----------
---
-------------- -- -
----------------- ------------
---------------- ----- ----------------------------
-- ------
- ---- -
------------------ - --------------- ----------- ---
---------
------
------
------------------ ------ ------------
-------
------
--------------- ------ ---------
-- -----------------
--------
----- ----------- - --- -----------------------
--------------------------------------- ------- -- -
---------------------------------------------- - -----------
---
---------
-------
-------
---
-
---
------------------- -- -- -
------------------- ------- -- ------------------------
---以上代码演示了一个简单的 SSE 服务器，每秒钟向客户端发送当前时间。当客户端访问根路径时，会返回一个 HTML 页面，页面中通过 JavaScript 代码创建了一个 EventSource 对象，监听服务器发送的 message 事件，当事件触发时，更新页面上的消息内容。
客户端代码
-- -------------------- ---- -------
--------- -----
------
------
------------------ ------ ------------
-------
------
--------------- ------ ---------
-- -----------------
--------
----- ----------- - --- -----------------------
--------------------------------------- ------- -- -
---------------------------------------------- - -----------
---
---------
-------
-------以上代码演示了一个简单的 SSE 客户端，通过创建一个 EventSource 对象，监听服务器发送的 message 事件，当事件触发时，更新页面上的消息内容。
总结
本文介绍了 Server-Sent Events 技术，包括工作原理、优点和示例代码。SSE 是一种轻量级、简单易用的技术，可以在服务器上 Push 消息到客户端，实现实时更新数据，减少网络流量和服务器负担。SSE 可以在所有现代浏览器中使用，是一种值得掌握的前端技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6567ddedd2f5e1655d0af712