uniapp的vue3使用websocket

在 UniApp 的 Vue3 项目中使用 WebSocket 实现实时通信，可以通过以下步骤完成。UniApp 提供了跨平台的 API（如 `uni.connectSocket`），但也可直接使用浏览器环境的 `WebSocket` 对象（需注意小程序环境的兼容性）。 --- ### **1. 基本使用（兼容多端）** #### **步骤 1：创建 WebSocket 连接** 使用 UniApp 的 `uni.connectSocket` API（推荐，兼容多端）： ```javascript // 在 onLaunch 或页面中初始化 let socketTask = null; function connectWebSocket() { // 创建连接（替换为你的 WebSocket URL） socketTask = uni.connectSocket({ url: 'wss://your-server.com/ws', success: () => console.log('WebSocket 连接成功'), fail: (err) => console.error('连接失败:', err) }); // 监听连接打开 socketTask.onOpen(() => { console.log('WebSocket 已打开'); sendData({ type: 'hello', data: 'UniApp Vue3' }); }); // 监听消息 socketTask.onMessage((res) => { const data = JSON.parse(res.data); console.log('收到消息:', data); // 更新页面数据（需在 setup 中使用 reactive/ref） }); // 监听错误 socketTask.onError((err) => { console.error('WebSocket 错误:', err); }); // 监听关闭 socketTask.onClose(() => { console.log('WebSocket 已关闭'); }); } // 发送数据 function sendData(message) { if (socketTask) { socketTask.send({ data: JSON.stringify(message), success: () => console.log('消息发送成功'), fail: (err) => console.error('发送失败:', err) }); } } // 关闭连接 function closeWebSocket() { if (socketTask) { socketTask.close(); } } ``` #### **步骤 2：在 Vue3 组件中使用** ```vue <script setup> import { ref, onMounted, onUnmounted } from 'vue'; const messages = ref([]); onMounted(() => { connectWebSocket(); }); onUnmounted(() => { closeWebSocket(); }); // 接收消息并更新页面 function handleMessage(data) { messages.value.push(data); } </script> <template> <view> <button @click="sendData({ action: 'grab', orderId: 123 })">抢单</button> <view v-for="(msg, index) in messages" :key="index"> {{ msg }} </view> </view> </template> ``` --- ### **2. 直接使用浏览器 WebSocket（仅 H5）** 如果仅针对 H5 平台，可直接使用 `new WebSocket()`： ```javascript let socket = null; function connectWebSocket() { socket = new WebSocket('wss://your-server.com/ws'); socket.onopen = () => { console.log('WebSocket 已连接'); }; socket.onmessage = (event) => { const data = JSON.parse(event.data); console.log('收到消息:', data); }; socket.onclose = () => { console.log('WebSocket 已关闭'); }; } function sendData(message) { if (socket && socket.readyState === WebSocket.OPEN) { socket.send(JSON.stringify(message)); } } ``` --- ### **3. 注意事项** 1. **平台差异**： - 小程序环境需使用 `uni.connectSocket`，不能直接使用 `WebSocket` 对象。 - H5 环境两者均可，但 `uni.connectSocket` 会自动处理跨平台逻辑。 2. **生命周期管理**： - 在 `onUnmounted` 或页面卸载时关闭连接，避免内存泄漏。 - 监听应用切后台/前台事件（`uni.onAppShow`/`uni.onAppHide`）来管理连接。 3. **心跳机制**： - 长时间连接需定时发送心跳包（如每 30 秒发送 `{ type: 'ping' }`），防止服务器断开。 ```javascript let heartbeatTimer = null; function startHeartbeat() { heartbeatTimer = setInterval(() => { sendData({ type: 'ping' }); }, 30000); } // 在 onOpen 中调用 startHeartbeat() ``` 4. **重连机制**： - 连接断开后自动重连（需注意避免频繁重连）。 ```javascript function reconnect() { setTimeout(() => { console.log('尝试重连...'); connectWebSocket(); }, 5000); } // 在 onClose 中调用 reconnect() ``` 5. **数据格式**： - 建议统一使用 JSON 格式传输数据，便于解析。 --- ### **4. 完整示例（Vue3 + UniApp）** ```javascript // utils/websocket.js let socketTask = null; let reconnectCount = 0; const maxReconnectAttempts = 5; export function connectWebSocket(onMessageCallback) { socketTask = uni.connectSocket({ url: 'wss://your-server.com/ws', }); socketTask.onOpen(() => { console.log('WebSocket 连接成功'); reconnectCount = 0; startHeartbeat(); }); socketTask.onMessage((res) => { const data = JSON.parse(res.data); onMessageCallback?.(data); }); socketTask.onError((err) => { console.error('WebSocket 错误:', err); }); socketTask.onClose(() => { console.log('WebSocket 已关闭'); if (reconnectCount < maxReconnectAttempts) { reconnectCount++; reconnect(); } }); } export function sendData(message) { if (socketTask) { socketTask.send({ data: JSON.stringify(message) }); } } export function closeWebSocket() { if (socketTask) { socketTask.close(); } } function startHeartbeat() { setInterval(() => { sendData({ type: 'ping' }); }, 30000); } function reconnect() { setTimeout(() => { console.log('尝试重连...'); connectWebSocket(onMessageCallback); }, 5000); } ``` ```vue <!-- 页面中使用 --> <script setup> import { onMounted, onUnmounted } from 'vue'; import { connectWebSocket, sendData, closeWebSocket } from '@/utils/websocket'; onMounted(() => { connectWebSocket((data) => { console.log('收到消息:', data); // 更新页面数据 }); }); onUnmounted(() => { closeWebSocket(); }); </script> ``` --- ### **5. 常见问题** 1. **小程序中 WebSocket 连接失败**： - 确保域名已配置到小程序的 `request` 合法域名列表中。 2. **心跳包未生效**： - 检查服务器是否支持 `ping/pong` 机制。 3. **跨平台兼容性**： - 使用 `uni.getSystemInfoSync().platform` 判断平台，选择不同的实现方式。 通过以上方法，可以在 UniApp 的 Vue3 项目中稳定实现 WebSocket 通信。