vue3 + ts + websocket + speak-tts 实现推送的告警消息弹框显示在右下角并语音播报出内容

### 集成 WebSocket 和 Toast 提示以及语音播报 为了实现在 Vue3 和 TypeScript 项目中集成 WebSocket 接收告警消息并在页面右下角展示 toast 弹窗，同时利用 `speak-tts` 播报消息文本的功能，可以按照如下方式构建应用。 #### 安装依赖库 首先安装必要的 npm 包： ```bash npm install socket.io-client speak-tts vue-toastification ``` 这些包分别用于 WebSocket 的客户端连接、TTS 文本转语音功能和创建视觉上的通知提示[^2]。 #### 创建 WebSocket Service 定义一个服务文件来管理所有的 WebSocket 连接逻辑。这有助于保持组件的整洁并使代码更易于维护。 ```typescript // services/webSocketService.ts import { io } from "socket.io-client"; const URL = "ws://your-websocket-server-url"; export const webSocketService = { init: function (): SocketIOClient.Socket { let socket = io(URL); return socket; } }; ``` 此部分负责初始化与服务器之间的 WebSocket 连接，并返回套接字实例以便其他地方使用[^3]。 #### 设置 TTS 功能 配置 `Speak-TTS` 插件以准备后续的消息广播工作。 ```javascript // main.ts import Speak from 'speak-tts'; import App from './App.vue'; const speak = new Speak({ volume: 1, lang: "en-US", rate: 1, pitch: 1, voice: "", splitSentences: true, listeners: { onvoiceschanged: (voices) => {} }, }); app.config.globalProperties.$speak = speak; new Vue({ render: h => h(App), }).$mount('#app'); ``` 这段脚本设置了全局属性 `$speak` ，可以在任何组件内部调用来触发语音播放操作。 #### 实现 Toast 组件 接下来设置 `vue-toastification` 插件来进行消息提醒。 ```typescript // main.ts import { createApp } from 'vue' import App from './App.vue' import Toast, { POSITION } from 'vue-toastification' createApp(App).use(Toast, { position: POSITION.BOTTOM_RIGHT }).mount('#app') ``` 这里指定了弹出窗口的位置为屏幕底部右侧，可以根据实际需求调整位置参数。 #### 处理告警消息 最后一步是在适当的地方监听来自 WebSocket 的事件，并在收到新消息时更新 UI 并启动声音提示。 ```typescript <template> <div id="app"> </div> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue'; import { useToast } from "vue-toastification" import { webSocketService } from '@/services/webSocketService'; const toast = useToast(); let messageText = ref<string>(""); onMounted(() => { const socket = webSocketService.init(); socket.on('alleetMessage', async ({ text }) => { messageText.value = text; await toast.success(messageText.value); app.config.globalProperties.$speak.speak({ text: messageText.value }); }); }); </script> ``` 上述代码片段展示了如何组合以上各个模块完成所需的任务：当从 WebSocket 收到新的告警信息后，会立即显示一条成功的 toast 通知给用户；与此同时也会发出相应的语音朗读声告知当前有重要事项需要注意。