vue 建立websocket长链接

在Vue中建立WebSocket长连接可以通过使用`WebSocket`对象来实现。下面是一个简单的示例代码：

首先，安装`websocket`包：

npm install websocket

然后，在Vue组件中引入并创建WebSocket连接：

import WebSocket from 'websocket';

export default {
  data() {
    return {
      socket: null,
      message: ''
    };
  },
  mounted() {
    // 创建WebSocket连接
    this.socket = new WebSocket('ws://your-websocket-url');

    // 监听连接打开事件
    this.socket.onopen = () => {
      console.log('WebSocket连接已打开');
    };

    // 监听收到消息事件
    this.socket.onmessage = (event) => {
      console.log('收到消息:', event.data);
      this.message = event.data; // 将收到的消息存储在Vue组件的data中
    };

    // 监听连接关闭事件
    this.socket.onclose = () => {
      console.log('WebSocket连接已关闭');
    };

    // 监听连接错误事件
    this.socket.onerror = (error) => {
      console.error('WebSocket连接发生错误:', error);
    };
  },
  methods: {
    send() {
      // 发送消息
      this.socket.send(this.message);
      this.message = ''; // 清空发送框
    }
  }
};

在上述代码中，使用`new WebSocket('ws://your-websocket-url')`来创建WebSocket连接。你需要将`your-websocket-url`替换为你实际的WebSocket服务器地址。

然后，可以通过`socket.onopen`、`socket.onmessage`、`socket.onclose`和`socket.onerror`来分别监听连接打开、收到消息、连接关闭和连接错误等事件。

在Vue组件的`methods`中，你可以编写一个`send`方法来发送消息，通过调用`socket.send`方法发送消息给WebSocket服务器。

希望这对你有帮助！如有其他问题，请随时问我。