uniapp开发手机app--vuex结合websocket实现全局消息推送提示

### 实现全局 WebSocket 连接 为了在 UniApp 中创建和管理全局 WebSocket 连接以用于聊天页面，可以采用如下方法： #### 初始化 WebSocket 并设置重连机制 通过创建一个独立的 JavaScript 文件（如 `wsService.js`），可以在其中定义 WebSocket 的初始化逻辑以及必要的辅助函数。这有助于保持代码整洁，并使得 WebSocket 功能易于管理和测试。 ```javascript // wsService.js import { uniSocket } from '@dcloudio/uni-app'; let socketTask; const reconnectInterval = 5000; // 设置重试间隔时间 let isReconnecting = false; function initWebSocket(url, protocols) { if (socketTask && socketTask.readyState === socketTask.OPEN) { console.log('WebSocket 已经处于打开状态'); return; } try { const options = { url, protocols, success(res) { console.log(`WebSocket 成功连接: ${res}`); handleOpen(); }, fail(err) { console.error(`WebSocket 连接失败: ${err.errMsg}`); handleError(); } }; socketTask = uni.connectSocket(options); setupEventHandlers(); } catch (error) { console.error(error.message || '发生未知错误'); handleError(); } } function setupEventHandlers() { // 处理接收的消息 socketTask.onMessage((msg) => { console.info(`收到服务器消息：${JSON.stringify(msg.data)}`); emitToPages('onReceive', msg); // 向所有监听者广播消息 }); // 当 WebSocket 关闭时触发 socketTask.onClose(() => { console.warn('WebSocket 断开了...'); handleClose(); }); function handleOpen(){ console.log("WebSocket已成功开启"); isReconnecting=false; } function handleError(){ if(!isReconnecting){ setTimeout(() => { isReconnecting=true; initWebSocket(url,protocols); },reconnectInterval); } } function handleClose(){ console.log("WebSocket关闭了..."); if (!isReconnecting) { setTimeout(() => { isReconnecting=true; initWebSocket(url,protocols); },reconnectInterval); } } } ``` 此部分实现了 WebSocket 的基本配置与自动重连功能[^1]。 #### 跨页面通信设计模式 为了让不同页面之间共享同一个 WebSocket 实例，推荐使用 Vuex 或类似的集中式状态管理模式来存储 WebSocket 对象及其关联的状态信息。这样做的好处是可以方便地让各个组件订阅特定类型的事件或发送指令给 WebSocket[^3]。 对于简单的应用场景来说，也可以考虑利用 Vue 提供的 `$bus` 来分发自定义事件，从而达到相同的效果。不过需要注意的是，这种方式可能不如前者直观易懂。 下面是一个基于 Vuex 的例子： ```javascript // store/index.js export default new Vuex.Store({ state: { webSocketInstance: null, isConnected: false, messageQueue: [] }, mutations: { SET_SOCKET(state, payload) { state.webSocketInstance = payload.socket; state.isConnected = true; }, CLEAR_SOCKET(state) { state.webSocketInstance.close(); state.webSocketInstance = null; state.isConnected = false; }, ADD_TO_QUEUE(state, msgObj) { state.messageQueue.push(msgObj); } }, actions: { async connect({ commit }) { await import('@/services/wsService').then(({ initWebSocket }) => initWebSocket(/* 参数 */) ); // 假设这里已经完成了 WebSocket 的初始化工作... commit('SET_SOCKET', /* ... */); while (this.state.messageQueue.length > 0) { let item = this.state.messageQueue.shift(); send(item); } } } }); ``` 在此基础上，任何试图向服务器发送数据的地方都应该先检查当前是否有活跃的 WebSocket 连接；如果没有，则应该把待发送的数据暂存起来直到连接恢复为止。 #### 页面中的集成方式 最后一步是在具体的页面里调用上述的服务接口来进行实际操作。例如，在进入聊天界面之前确保 WebSocket 是可用的，并注册相应的回调以便及时响应来自远端的信息推送。 ```vue <template> <!-- ChatPage.vue --> </template> <script> export default { mounted() { this.$store.dispatch('connect'); this.$root.$on('onReceive', (data) => { // 更新UI显示新消息 }); }, beforeDestroy() { this.$root.$off('onReceive'); // 清除不再需要的监听器 } }; </script> ``` 以上就是关于如何在 UniApp 应用程序内构建稳定可靠的 WebSocket 解决方案的一些建议。

### 集成 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('alertMessage', async ({ text }) => { messageText.value = text; await toast.success(messageText.value); app.config.globalProperties.$speak.speak({ text: messageText.value }); }); }); </script> ``` 上述代码片段展示了如何组合以上各个模块完成所需的任务：当从 WebSocket 收到新的告警信息后，会立即显示一条成功的 toast 通知给用户；与此同时也会发出相应的语音朗读声告知当前有重要事项需要注意。