什么是 Server-Sent Events
Server-Sent Events（SSE）是一种服务器向浏览器推送数据的技术，它基于 HTTP 协议，使用简单的文本格式传输数据，可以实现浏览器端的实时更新和推送。相比于 WebSocket，SSE 更加轻量级，适用于一些简单的实时通信场景。
SSE 通过在服务器端建立一个长连接，向浏览器发送数据，浏览器通过 EventSource API 接收数据并进行处理。SSE 可以发送任意格式的数据，但通常使用纯文本格式，每个数据包都以一行“data: ”开头，以“\n\n”结束。
实时媒体播放
SSE 可以用于实现浏览器端的实时媒体播放，例如音频或视频。在传统的 Web 应用中，媒体播放通常需要通过轮询或 WebSocket 实现，但轮询会造成频繁的网络请求，WebSocket 需要建立双向连接，对于简单的实时通信场景来说有些过于重量级。
使用 SSE 实现实时媒体播放的流程如下：
- 服务器端将媒体文件分段传输，每个数据包包含一段媒体数据。
- 浏览器端通过 EventSource API 建立 SSE 连接，监听服务器端的数据推送。
- 服务器端每隔一段时间发送一个数据包，浏览器端接收到数据后将其追加到媒体播放器中播放。
- 当媒体文件播放完毕或用户关闭页面时，浏览器端关闭 SSE 连接，结束数据推送。
实现示例
下面是一个简单的实时音频播放示例，使用 Node.js 和 Express 框架实现服务器端，使用 HTML5 的 audio 元素实现媒体播放器，使用 EventSource API 实现 SSE 连接。
服务器端代码
-- -------------------- ---- -------
----- ------- - -------------------
----- -- - --------------
----- --- - ----------
----------------------------------
----------------- ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- ------------
---
----- -------- - ------------
----- -------- - ---------------------------
----- --------- - ---- - -----
--- ------ - --
----- --------- - -- -- -
----- ----- - ------------------------- -
------ -------
---- ------ - --------- - -
---
------ -- ----------
-- ------- -- --------- -
---------------- ---------------
----------
- ---- -
---------------- ---------------
--------------------- ------
-
--
------------
---
---------------- -- -- -
------------------- --------- -- ---- -------
---服务器端使用 Express 框架实现，首先设置响应头，将 Content-Type 设置为 text/event-stream，表示该响应是 SSE 数据流，将 Cache-Control 设置为 no-cache，表示不缓存响应，将 Connection 设置为 keep-alive，表示保持连接。
然后读取媒体文件，分段发送数据，每个数据包包含一段媒体数据，使用 setTimeout 控制发送速度，模拟实时发送。
客户端代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ----- --------------
-------
------
------ ------------ -----------------
--------
----- ----- - --------------------------------
----- ------ - --- ----------------------
---------------------------------- ----- -- -
----- ---- - --- ------------------ - ----- ------------ ---
----- --- - --------------------------
----- ------------ - --- -----------
--------------------------------
--------------------
---
---------
-------
-------客户端使用 HTML5 的 audio 元素实现媒体播放器，将 src 设置为 SSE 连接的 URL，使用 controls 属性显示播放器控件。
然后使用 EventSource API 建立 SSE 连接，监听 message 事件，将接收到的数据转换为 Blob 对象，使用 URL.createObjectURL 方法生成播放地址，创建新的 Audio 元素并追加到播放器中，调用 play 方法播放媒体文件。
总结
本文介绍了 Server-Sent Events 技术，并演示了如何使用 SSE 实现浏览器端的实时媒体播放。相比于传统的轮询和 WebSocket 技术，SSE 更加轻量级，适用于一些简单的实时通信场景。对于需要实现实时媒体播放的 Web 应用来说，SSE 是一种非常有价值的技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c803bcadd4f0e0ff1ea7f9