SpringBoot+Vue3+SSE实现实时消息语音播报

在现代 Web 应用中，实现实时消息的推送与处理是一个重要的需求，尤其是在即时通讯、在线协作等场景中。本文将探讨如何使用 Spring Boot 和 Vue 3 以及服务器发送事件（SSE）来实现实时消息的语音播报功能。

一、项目架构

我们将构建一个简单的项目架构，包含以下几个组件：

1. Spring Boot 作为后端服务，负责推送消息。
2. Vue 3 作为前端框架，展示消息并实现语音播报。
3. SSE（Server-Sent Events） 用于实现服务器到客户端的单向实时通信。

二、后端实现（Spring Boot）

首先，创建一个 Spring Boot 项目。可以使用 Spring Initializr 生成项目，选择以下依赖：

• Spring Web
• Spring Boot DevTools

1. 创建 SSE Controller

在项目中创建一个 SSE 控制器，负责发送消息。

import org.springframework.web.bind.annotation.*;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;

import java.util.concurrent.CopyOnWriteArrayList;

@RestController
@RequestMapping("/sse")
public class SseController {
    private final CopyOnWriteArrayList<SseEmitter> emitters = new CopyOnWriteArrayList<>();

    @GetMapping(value = "/messages", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    public SseEmitter streamMessages() {
        SseEmitter emitter = new SseEmitter();
        emitters.add(emitter);

        emitter.onCompletion(() -> emitters.remove(emitter));
        emitter.onTimeout(() -> emitters.remove(emitter));

        return emitter;
    }

    public void sendMessage(String message) {
        for (SseEmitter emitter : emitters) {
            try {
                emitter.send(message);
            } catch (Exception e) {
                emitters.remove(emitter);
            }
        }
    }
}

2. 模拟发送消息

可以在某个事件发生时调用 sendMessage 方法，例如使用 REST API 来接收消息并推送。

import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/api")
public class MessageController {
    private final SseController sseController;

    public MessageController(SseController sseController) {
        this.sseController = sseController;
    }

    @PostMapping("/send")
    public ResponseEntity<String> send(@RequestBody String message) {
        sseController.sendMessage(message);
        return ResponseEntity.ok("Message sent");
    }
}

三、前端实现（Vue 3）

接下来，使用 Vue 3 创建一个简单的前端界面，展示接收到的消息并进行语音播报。

1. 创建 Vue 项目

可以使用 Vue CLI 创建一个新项目：

vue create realtime-sse

2. 实现 SSE 客户端

安装 Axios 用于进行 HTTP 请求，代码如以下所示：

npm install axios

在 src 目录下，修改 App.vue 文件。

<template>
  <div id="app">
    <h1>实时消息通知</h1>
    <ul>
      <li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: []
    }
  },
  mounted() {
    this.initSSE();
  },
  methods: {
    initSSE() {
      const eventSource = new EventSource('http://localhost:8080/sse/messages');
      eventSource.onmessage = (event) => {
        const message = event.data;
        this.messages.push(message);
        this.speakMessage(message);
      };
    },
    speakMessage(message) {
      const utterance = new SpeechSynthesisUtterance(message);
      window.speechSynthesis.speak(utterance);
    }
  }
}
</script>

<style>
/* 在这里添加样式 */
</style>

3. 测试应用

确保后端服务运行在 localhost:8080，然后启动 Vue 前端。现在，您可以通过调用 Postman 或其他工具向 http://localhost:8080/api/send 发送消息，前端会实时接收到消息并进行语音播报。

四、总结

通过本项目，我们实现了一个简单的实时消息推送和语音播报功能。借助 Spring Boot 的强大后端能力和 Vue 3 现代化的前端特性，结合 SSE，我们能够轻松构建实时通讯应用。未来，您可以在此基础上扩展更多功能，比如用户身份验证、消息存储等。