在今天的 Web 应用中，实时性已经成为了一个必要的功能。要实现实时音频播放应用，可以使用 Websocket 或 SSE。但是相比于 Websocket，SSE 的实现成本更低，更加轻量级。该文将介绍如何使用 SSE 实现实时音频播放应用。
Server-sent Events
SSE 是一种服务端主动推送新数据到客户端的技术。SSE 使用基于 HTTP/2 的长连接，将服务端生成的事件实时的推送到客户端。SSE 的好处是不需要客户端每次 poll，减少了不必要的网络流量，同时保持了一个长连接，能够实现实时的通信。
SSE 的 API 比较简单，只需要创建一个 EventSource 对象，然后指定事件源的 URL 即可。创建后客户端就会自动接收服务端发来的数据。服务端需要发送带有特定格式的消息，每个消息都由一个或多个字段组成，其最重要的字段是 data 字段，表示实际要发送的数据。
下面是一个基本的 SSE 的示例代码：
const eventSource = new EventSource('/events')
eventSource.onmessage = (event) => {
const data = JSON.parse(event.data)
console.log(data.message)
}在上面的示例代码中，我们创建了一个 EventSource 对象链接到 /events URL。服务端需要在 /events 上发送这样的消息：
data: {"message": "Hello SSE!"}这样 SSE 就会接收到这条消息，并在控制台输出 "Hello SSE!"。
实现实时音频播放应用
现在我们开始使用 SSE 来实现实时音频播放应用。我们将使用 flask 来实现服务端，同时前端用 Vue3 来实现。
服务端实现
我们需要实现三个接口：
- /audio/start：开始播放音频
- /audio/stop：停止播放音频
- /audio/stream：用 SSE 推送音频数据
下面是服务端代码示例：
-- -------------------- ---- -------
---- ----- ------ ------ --------
------ ----
--- - ---------------
--------------------------
--- --------
------ --
-------------------------
--- -------
------ --
---------------------------
--- ---------
--- ------------------
---- ----------------- ----- -- --
----- -----
---- - ------------
-- --- -----
-----
----- ------ ------- - ------
---------------
------ --------------------------- -----------------------------在上述代码中，我们使用了 Python 的生成器来实现 SSE 推送音频流数据。在 /audio/stream 接口中，我们先打开音频文件，然后不断读取数据，通过生成器实时推送到客户端。
客户端实现
下面是客户端代码示例：
-- -------------------- ---- -------
----------
---- ---------------------
------- --------------- ----------------------------
------- ------ ---------------------------
------
-----------
--------
----- ----- - --- -------
------ ------- -
----- --------------
------ -
------ -
-------- ------
------- --- -----------------------------
-
--
--------- -
--------------------- - ------- -- -
----- - ---- - - -----
--------- - ----------------------- ------ ---- -- - ----- ----------- ---
------------
-
--
-------- -
------- -
---------------------
------------ - ----
--
------ -
--------------------
------------ - -----
--
--
-
---------在上述代码中，我们给 “开始播放” 按钮绑定 start 方法，给 “停止播放” 按钮绑定 stop 方法。同时，我们使用 SSE 从服务端获取流数据，并将其设置到 Audio 对象中进行播放。
总结
使用 SSE 实现实时音频播放应用相比 WebSocket 更加简单，同时也更加轻量级。该文介绍了如何使用 SSE 实现一个简单的实时音频播放应用，并提供了详细的代码示例，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659e363eadd4f0e0ff74163e