在 Web 开发中，实现实时数据交互一直是一项重要的任务。传统的轮询（polling）技术会大量占用服务器资源，而 WebSocket 技术虽然功能强大，但需要 Server 和 Client 均实现 WebSocket 协议，有一定的限制和复杂性。而 Server-sent Events（通常简称为 SSE）提供了一种轻量级、简单易用的实时通信方案，可以满足绝大部分的实时数据交互需求。
Server-sent Events 简介
Server-sent Events 是一种基于 HTTP 的实时通信技术，可以让服务器像浏览器推送连续的消息流，而浏览器端可以接收这些消息流并对其进行处理。与 WebSocket 不同，SSE 不需要客户端实现复杂的协议，而是利用浏览器内置的 EventSource API 进行消息接收与处理。
SSE 的消息格式非常简单，每条消息都是一个以 data: 开头的文本消息，表示该消息的内容。例如：
data: hello world!
SSE 还支持给每条消息添加一个可选的 id 属性和一个可选的 event 字段，用于标识和分类不同类型的消息。例如：
id: 12345 event: message data: hello world!
如何使用 Server-sent Events
使用 SSE 的流程一般如下：
- 服务器端开启 SSE 服务，向客户端推送实时消息。
- 客户端建立 SSE 连接，接收服务器端推送的实时消息。
- 客户端处理并渲染收到的消息。
以下是一个基于 Node.js 的 SSE 服务示例：
-- -------------------- ---- -------
----- ---- - ---------------
----------------------- ---- -- -
------------------ -
--------------- -------------------- -- ------- -----------------
---------------- ----------- -- ----
------------- ------------ -- ----
--
-------------- -- -
----- --- - ------ - - --- --------------------------- - ------
-------------- -- ----
-- -----
---------------这个服务会每秒钟推送一个实时消息，其中数据格式为：
data: 当前时间
接下来，我们可以在客户端建立 SSE 连接并接收消息流：
const eventSource = new EventSource('/stream')
eventSource.onmessage = evt => {
console.log(evt.data) // 打印接收到的消息
}这里，我们使用浏览器内置的 EventSource API 建立 SSE 连接，并绑定 OnMessage 事件处理函数，对消息流进行接收和处理。
与其他实时通信技术的比较
如前所述，与传统的轮询比较，SSE 的优势在于能够避免不必要的网络开销和服务器资源浪费。与 WebSocket 相比，SSE 运行的环境更广泛，各大主流浏览器均支持 SSE，不需要客户端实现 WebSocket 协议。同时，SSE 可以通过使用不同的事件名称来区分不同的消息类型，更加灵活。
当然，SSE 也有其劣势。SSE 不像 WebSocket 那样可以进行双向通信，只能从服务器端向客户端推送消息，不能向服务器端发送数据。同时，SSE 的消息传输仍然需要经过 HTTP 协议，无法避免 HTTP 协议带来的一些限制和缺陷。
总结
Server-sent Events 是一种非常方便的实时通信技术，在满足一些实时通信需求的同时，也能避免不必要的资源浪费和复杂性。在开发流应用、实时更新等场景下，使用 SSE 可以大幅提高应用性能和用户体验。
另外，如果想进一步掌握 SSE 的技术细节和应用方法，可以参考 MDN 的文档和其他相关的教程和资料，从而更好地运用 SSE 技术进行实时数据交互。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664e67a6d3423812e4e9fa95