websocket在vue前端是如何进行回调方法的

在Vue前端中使用WebSocket，可以通过监听WebSocket的事件来进行回调方法。常用的WebSocket事件包括：

1. onopen：WebSocket连接成功时触发的事件。
2. onmessage：接收到WebSocket消息时触发的事件。
3. onclose：WebSocket连接关闭时触发的事件。
4. onerror：WebSocket发生错误时触发的事件。

下面是一个示例代码，演示了如何在Vue前端使用WebSocket，并通过监听事件来进行回调方法：

export default {
  name: 'WebSocketDemo',
  data() {
    return {
      socket: null,
      message: ''
    }
  },
  mounted() {
    this.initWebSocket()
  },
  methods: {
    initWebSocket() {
      // 创建WebSocket连接
      this.socket = new WebSocket('ws://localhost:8080')

      // 监听WebSocket事件
      this.socket.onopen = this.handleOpen
      this.socket.onmessage = this.handleMessage
      this.socket.onclose = this.handleClose
      this.socket.onerror = this.handleError
    },
    handleOpen() {
      console.log('WebSocket连接成功')
    },
    handleMessage(event) {
      this.message = event.data
      console.log('接收到WebSocket消息：', this.message)
    },
    handleClose() {
      console.log('WebSocket连接关闭')
    },
    handleError(event) {
      console.log('WebSocket发生错误：', event)
    }
  }
}

在上面的代码中，我们在`mounted()`函数中调用了`initWebSocket()`方法来创建WebSocket连接，并在该方法中监听了WebSocket的事件。当WebSocket连接成功时，`handleOpen()`方法会被调用；当接收到WebSocket消息时，`handleMessage()`方法会被调用，同时更新了`message`数据；当WebSocket连接关闭时，`handleClose()`方法会被调用；当WebSocket发生错误时，`handleError()`方法会被调用。这些方法都可以在Vue的模板中进行调用，例如：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

在上面的代码中，我们通过双花括号`{{ message }}`来显示`message`数据，在接收到WebSocket消息时，`message`数据会被更新，从而更新了页面中的内容。