介绍
在 Web 开发中，实现异步和实时通信是十分重要的，而 Server-Sent Events（SSE）就是一种实现这种通信的方法。SSE 是一种基于 HTTP 的单向通信技术，可以在服务器端向客户端发送事件流，从而实现实时通信。
SSE 的优点在于它简单易用，不需要使用 WebSocket 或者长轮询等复杂的技术。此外，SSE 还支持事件流的自定义，可以根据需要发送不同类型的事件。
实现 SSE
服务器端
在服务器端，实现 SSE 需要发送以下 HTTP 响应头：
Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive
其中 Content-Type 表示响应的内容是事件流，Cache-Control 表示不缓存响应，Connection 表示保持连接。
在发送事件流时，需要使用以下格式：
event: <event-name>\n data: <event-data>\n\n
其中 <event-name> 表示事件的名称，<event-data> 表示事件的数据。\n 表示换行符，最后需要两个换行符表示事件的结束。
以下是一个 Node.js 的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
-- -------- --- ---------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- --- - --- -------
----------------- ---------
---------------- ---------------------------
-- ------
- ---- -
------------------ - --------------- ----------- ---
---------
--------- -----
------
------
---------- ---------------
-------
------
--------------- ------ ------------
---- ----------------
--------
----- ------ - --------------------------------
----- ----------- - --- -----------------------
------------------------------------ ------- -- -
---------------- - -----------
---
---------
-------
-------
---
-
----------------上述代码创建了一个 HTTP 服务器，当访问 /events 时，会向客户端发送一个每秒钟更新一次的时间事件。当访问其他路径时，会返回一个包含 JavaScript 代码的 HTML 页面，该代码会使用 SSE 接收时间事件，并将其显示在页面上。
客户端
在客户端，可以使用 JavaScript 的 EventSource 对象来接收 SSE 事件。以下是一个基本的示例代码：
const eventSource = new EventSource('/events');
eventSource.addEventListener('event-name', (event) => {
const data = JSON.parse(event.data);
// 处理事件数据
});需要注意的是，EventSource 对象只能接收单向的事件流，不能向服务器发送数据。如果需要双向通信，可以考虑使用 WebSocket 或者其他技术。
总结
Server-Sent Events 是一种实现异步和实时通信的简单易用的技术，可以在不使用 WebSocket 等复杂技术的情况下实现实时通信。在使用 SSE 时，需要注意服务器端和客户端之间的通信协议，以及事件流的格式和内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658d200beb4cecbf2d310b79