vue websocket 推送

Vue中使用WebSocket进行推送可以通过WebSocket API来实现。首先需要在Vue组件中创建WebSocket对象，然后监听WebSocket的事件，如onopen、onmessage、onerror、onclose等，以便在WebSocket连接建立、接收到消息、出错或关闭时进行相应的处理。

以下是一个简单的Vue组件示例，演示了如何使用WebSocket进行推送：

<template>
  <div>
    <p v-for="message in messages">{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      socket: null,
      messages: []
    }
  },
  mounted() {
    this.socket = new WebSocket('ws://localhost:8080/ws')
    this.socket.onopen = () => {
      console.log('WebSocket connected')
    }
    this.socket.onmessage = (event) => {
      this.messages.push(event.data)
    }
    this.socket.onerror = (error) => {
      console.error('WebSocket error:', error)
    }
    this.socket.onclose = () => {
      console.log('WebSocket closed')
    }
  },
  beforeDestroy() {
    if (this.socket) {
      this.socket.close()
    }
  }
}
</script>

在上述示例中，我们创建了一个WebSocket对象，并在组件的mounted钩子函数中监听了WebSocket的事件。当WebSocket连接建立时，会输出一条日志；当接收到消息时，会将消息添加到messages数组中；当出错时，会输出错误信息；当WebSocket关闭时，会输出一条日志。在组件销毁前，我们需要手动关闭WebSocket连接。