vue websocket

以下是两种在Vue项目中使用WebSocket的实例：

1. 使用Vue插件vue-native-websocket：

// 安装vue-native-websocket插件
npm install vue-native-websocket
// 在main.js中引入插件并配置WebSocket连接
import VueNativeSock from 'vue-native-websocket'
Vue.use(VueNativeSock, 'ws://localhost:8080', {
  reconnection: true, // 是否自动重连
  reconnectionAttempts: 5, // 重连尝试次数
  reconnectionDelay: 3000, // 重连延迟时间（毫秒）
})

// 在Vue组件中使用WebSocket
export default {
  mounted() {
    this.$socket.send('Hello WebSocket!') // 发送消息
    this.$socket.onmessage = (event) => {
      console.log('Received message:', event.data) // 接收消息
    }
  }
}

2. 使用原生WebSocket API：

// 在Vue组件中创建WebSocket连接
export default {
  mounted() {
    const socket = new WebSocket('ws://localhost:8080')

    socket.onopen = () => {
      console.log('WebSocket连接已打开')
      socket.send('Hello WebSocket!') // 发送消息
    }

    socket.onmessage = (event) => {
      console.log('Received message:', event.data) // 接收消息
    }

    socket.onclose = () => {
      console.log('WebSocket连接已关闭')
    }
  }
}