websocket 在vue项目里怎么使用

在Vue项目中使用WebSocket需要先安装WebSocket客户端库，可以使用`websocket`或`socket.io-client`库。

1. 安装WebSocket客户端库

npm install websocket

或者

npm install socket.io-client

2. 创建WebSocket连接

在Vue组件中，可以在`created`钩子函数中创建WebSocket连接，并在`beforeDestroy`钩子函数中关闭连接。

import WebSocket from 'websocket' // 或者 import io from 'socket.io-client'

export default {
  created() {
    this.socket = new WebSocket('ws://example.com')
    this.socket.onopen = this.onOpen
    this.socket.onmessage = this.onMessage
    this.socket.onerror = this.onError
    this.socket.onclose = this.onClose
  },
  beforeDestroy() {
    this.socket.close()
  },
  methods: {
    onOpen(event) {
      console.log('WebSocket连接已打开', event)
    },
    onMessage(event) {
      console.log('收到WebSocket消息', event.data)
    },
    onError(event) {
      console.error('WebSocket发生错误', event)
    },
    onClose(event) {
      console.log('WebSocket连接已关闭', event)
    }
  }
}

如果使用`socket.io-client`库，可以使用以下代码创建连接：

this.socket = io('http://example.com')

3. 发送和接收消息

WebSocket连接成功后，可以使用`send`方法发送消息，并在`onmessage`事件处理函数中接收消息。

this.socket.send('Hello, WebSocket!')

// 或者
this.socket.emit('message', 'Hello, WebSocket!')

// 在onMessage方法中接收消息
onMessage(event) {
  console.log('收到WebSocket消息', event.data)
}

4. 其他操作

WebSocket还支持其他操作，例如ping和pong，可以使用`send`方法发送ping消息，服务器会自动回复pong消息。

this.socket.send('ping')

// 在onMessage方法中接收pong消息
onMessage(event) {
  if (event.data === 'pong') {
    console.log('收到WebSocket回复', event.data)
  }
}

还可以使用`close`方法关闭WebSocket连接。

this.socket.close()

以上就是在Vue项目中使用WebSocket的基本步骤。