vue3中 useWebSocket from ‘@vueuse/core‘

 

‌VueUse‌ 是一个基于Vue 3 Composition API的强大Hooks库，专为Vue 3设计，充分利用了Vue 3的最新功能。它提供了200多个函数，涵盖了数据请求、状态管理、视图操作、性能优化等多个方面，帮助开发者快速实现各种功能，提高开发效率‌12。

主要功能和特点

1. ‌丰富的函数库‌：VueUse提供了超过200个函数，覆盖了动画、浏览器操作、组件、传感器、状态管理等多个方面‌13。
2. ‌类型安全‌：使用TypeScript编写，带有完整的TypeScript文档，确保类型安全‌1。
3. ‌灵活性和可定制性‌：支持将引用作为参数传递，事件过滤器和目标完全可定制和配置‌1。
4. ‌兼容性‌：VueUse兼容Vue 2和Vue 3，可以通过npm或CDN安装‌3。
5. ‌高级功能和最佳实践‌：包括使用剪贴板、路由、存储等功能，并提供详细的最佳实践和建议‌2。

常用Hooks

• ‌useDebounce 和 useThrottle‌：用于防抖和节流操作。
• ‌useRequest‌：用于发起网络请求。
• ‌useTitle‌：用于更新页面标题。
• ‌useCounter‌：用于创建可响应的计数器。
• ‌useToggle‌：用于创建开关状态。
• ‌useFullscreen‌：用于全屏操作。
• ‌useInterval 和 useTimeout‌：用于设置定时器和超时功能。
• ‌useMounted 和 useUnmounted‌：用于组件挂载和卸载时的操作。
• ‌useAsync‌：用于异步操作。
• ‌useLocalStorage 和 useSessionStorage‌：用于本地存储和会话存储。

import { useWebSocket } from '@vueuse/core'
import { ref } from 'vue'
 
const isFirstConnection = ref(true) // 标志位，标记是否是第一次连接
 
const { data, send, open, close } = useWebSocket('ws://your-websocket-url', {
  autoReconnect: {
    retries: 3,
    delay: 1000,
    onFailed() {
      console.log('Failed to reconnect WebSocket')
    },
  },
  onConnected(ws) {
    console.log('WebSocket connected')
    if (isFirstConnection.value) {
      // 第一次连接
      send(JSON.stringify({ type: 'fristconnect', data: 'your_data' }))
      isFirstConnection.value = false // 第一次连接完成后，将标志位设为 false
    }else{
      // 如果不是第一次连接，则发送 vehicle_change 消息
      send(JSON.stringify({ type: 'reconnect', data: 'your_data' }))
     }
   
  },
  onDisconnected(ws) {
    console.log('WebSocket disconnected')
  },
})
————————————————