vue websocket推送消息

Vue.js可以使用WebSocket来实现消息的推送。以下是一个基本的示例代码：

首先，在Vue.js中安装WebSocket依赖：

npm install vue-native-websocket

然后，在你的Vue组件中，使用以下代码来创建WebSocket连接并处理消息推送：

<template>
  <div>
    <ul>
      <li v-for="message in messages" :key="message.id">{{ message.text }}</li>
    </ul>
  </div>
</template>

<script>
import { WebSocketPlugin } from "vue-native-websocket";

export default {
  data() {
    return {
      messages: []
    };
  },
  mounted() {
    this.$options.sockets = {
      // 在这里定义WebSocket的连接地址
      messages: "wss://example.com/ws"
    };
    this.$connect(); // 连接WebSocket

    // 监听消息推送
    this.$on("messages", message => {
      this.messages.push(message);
    });
  },
  beforeDestroy() {
    this.$disconnect(); // 断开WebSocket连接
  }
};
</script>

在上面的代码中，你需要将连接地址 `wss://example.com/ws` 替换为你实际使用的WebSocket服务地址。在`mounted`生命周期钩子中，我们通过`this.$options.sockets`定义了一个名为`messages`的Socket连接，并在`this.$connect()`中连接到该Socket。然后，通过`this.$on("messages", ...)`监听由服务器推送过来的消息，并将其添加到`messages`数组中。

当组件销毁时，我们需要通过调用`this.$disconnect()`来断开WebSocket连接，以避免资源泄漏。

这只是一个简单的示例，你可以根据自己的需求来扩展和优化代码。同时，你还需要在服务器端实现WebSocket接口，将推送的消息发送给Vue.js客户端。