在现代 Web 开发发展的过程中，前后端分离的架构模式越来越受欢迎。在这种模式下，前端通过 AJAX 请求来获取数据，而后端则负责提供 API 服务。然而，当数据需要时实更新的时候，传统的 AJAX 请求就无法满足要求，因为这需要频繁地轮询服务端，增加了服务器和网络的负担。在这种情况下，Server-Sent Events（SSE）就成为了一个很好的解决方案。
什么是 Server-Sent Events？
SSE 是一种基于 HTTP 的单向实时数据通信协议。它允许服务器通过 HTTP 连接向前端推送数据，同时保持连接的打开状态，而无需在每次需要更新时都向服务器发起请求。
SSE 通过 text/event-stream 格式的数据流来传输数据。它是一个 MIME 类型，由 text/event-stream 和一个编码为 UTF-8 的文本文件组成，每个文本行表示一个单独的事件。一个 SSE 事件由多个字段组成，其中最重要的是 data 字段，它包含了服务端传输的实际数据。
如何使用 Server-Sent Events？
使用 SSE 需要在客户端 JavaScript 中创建一个 EventSource 对象，通过其 open() 方法连接到一个发送 SSE 事件的服务端 URL。连接建立后，可以监听 message 事件，在回调函数中处理接收到的数据。
下面是一个使用 SSE 的简单示例：
服务端代码
-- -------------------- ---- -------
----- ---- - ---------------
----- ------ - ----------------------- ---- -- -
----------------------------- --------------------
------------------------------ -----------
--------------------------- -------------
-------------- -- -
----- ---- - -
-------- ------- -------
-
---------------- -----------------------------
-- -----
--
-------------------客户端代码
const eventSource = new EventSource('http://localhost:8080')
eventSource.addEventListener('message', (event) => {
const data = JSON.parse(event.data)
console.log(data.message)
})这段代码创建了一个每秒钟向客户端发送一条数据的 SSE 服务端程序，同时在客户端 JavaScript 中创建了一个 EventSource 对象，监听已经打开的 URL，并在接收到数据时打印出消息内容。
SSE 在前端开发中的应用
SSE 可以用于所有需要实时更新数据的场景，比如：
- Dashboard 实时监控
- 股票行情实时更新
- 论坛、社交网络的消息通知
- 实时在线聊天
例如，在一个聊天应用中，SSE 可以用来实现消息推送功能。当用户发送一条消息时，不需要刷新页面或者重新加载，消息就可以直接在聊天窗口中实时展示。
在使用 SSE 实现实时数据通信时，需要注意以下几点：
- SSE 基于 HTTP 协议，因此需要保持服务器连接处于打开状态，否则客户端无法接收到数据。
- SSE 可能会长时间保持连接处于打开状态，如果服务器发送频率较高，可能会导致服务器资源的消耗。
- SSE 通常只适用于实时推送小量数据的场景，对于大量复杂数据，还是需要使用 WebSocket 等更高级的协议。
结论
Server-Sent Events 可以帮助我们在前后端分离的应用中实现实时更新数据的功能，减少 AJAX 轮询的负担，使用 SSE 可以简化代码，提高效率。但是使用 SSE 时也需要注意资源消耗的问题，避免长时间保持连接处于打开状态。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672decdaeedcc8a97c8664e4