使用 Server-sent Events(SSE) 轻松打造实时音频播放应用

在今天的 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 来实现。

服务端实现

我们需要实现三个接口：

1. /audio/start：开始播放音频
2. /audio/stop：停止播放音频
3. /audio/stream：用 SSE 推送音频数据

下面是服务端代码示例：

from flask import Flask, Response
import time

app = Flask(__name__)

@app.route('/audio/start')
def start():
    return ''

@app.route('/audio/stop')
def stop():
    return ''

@app.route('/audio/stream')
def stream():
    def stream_response():
        with open('audio.mp3', 'rb') as f:
            while True:
                data = f.read(1024)
                if not data:
                    break
                yield 'data: %s\n\n' % (data)

                time.sleep(0.1)
    return Response(stream_response(), mimetype="text/event-stream")

在上述代码中，我们使用了 Python 的生成器来实现 SSE 推送音频流数据。在 /audio/stream 接口中，我们先打开音频文件，然后不断读取数据，通过生成器实时推送到客户端。

客户端实现

下面是客户端代码示例：

<template>
  <div class="audio-player">
    <button v-if="!playing" @click="start">开始播放</button>
    <button v-else @click="stop">停止播放</button>
  </div>
</template>

<script>
const Aduio = new Audio()

export default {
  name: 'AudioPlayer',

  data() {
    return {
      playing: false,
      source: new EventSource('/audio/stream'),
    }
  },

  created() {
    this.source.onmessage = (event) => {
      const { data } = event
      Aduio.src = URL.createObjectURL(new Blob([ data ], { type: 'audio/mp3' }))
      Aduio.play()
    }
  },

  methods: {
    start() {
      fetch('/audio/start')
      this.playing = true
    },
    stop() {
      fetch('/audio/stop')
      this.playing = false
    },
  },
}
</script>

在上述代码中，我们给 “开始播放” 按钮绑定 start 方法，给 “停止播放” 按钮绑定 stop 方法。同时，我们使用 SSE 从服务端获取流数据，并将其设置到 Audio 对象中进行播放。

总结

使用 SSE 实现实时音频播放应用相比 WebSocket 更加简单，同时也更加轻量级。该文介绍了如何使用 SSE 实现一个简单的实时音频播放应用，并提供了详细的代码示例，希望对大家有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659e363eadd4f0e0ff74163e