VUE项目中封装及使用websocket

在 Vue 中使用 WebSocket 需要进行如下步骤：

1. 安装 `websocket` 库

npm install websocket

2. 封装 WebSocket

在 Vue 项目中，通常我们会将 WebSocket 封装成一个模块，方便其他组件调用。以下是一个示例：

import WebSocket from 'websocket';

class WebsocketClient {
  constructor(url) {
    this.url = url;
    this.client = null;
    this.connected = false;
    this.listeners = {};
    this.connect();
  }

  connect() {
    this.client = new WebSocket.client();
    this.client.on('connect', () => {
      this.connected = true;
      this.emit('connect');
    });
    this.client.on('message', (message) => {
      this.emit('message', message);
    });
    this.client.on('close', () => {
      this.connected = false;
      this.emit('close');
    });
    this.client.connect(this.url);
  }

  send(data) {
    if (this.connected) {
      this.client.send(JSON.stringify(data));
    }
  }

  on(event, listener) {
    this.listeners[event] = this.listeners[event] || [];
    this.listeners[event].push(listener);
  }

  emit(event, ...args) {
    const listeners = this.listeners[event];
    if (listeners) {
      listeners.forEach((listener) => {
        listener.apply(null, args);
      });
    }
  }

  close() {
    this.client.close();
  }
}

export default WebsocketClient;

3. 在组件中使用 WebSocket

在需要使用 WebSocket 的组件中使用上面封装好的 WebSocket 模块。例如，在 `App.vue` 组件中使用：

<template>
  <div class="app">
    <h1>Hello, WebSocket!</h1>
  </div>
</template>

<script>
import WebsocketClient from './websocket';

export default {
  name: 'App',
  created() {
    this.websocket = new WebsocketClient('ws://localhost:8080');
    this.websocket.on('connect', () => {
      console.log('WebSocket connected!');
    });
    this.websocket.on('message', (message) => {
      console.log('WebSocket message received:', message);
    });
    this.websocket.on('close', () => {
      console.log('WebSocket closed!');
    });
  },
  beforeDestroy() {
    this.websocket.close();
  },
};
</script>

在上面的代码中，我们在 `created()` 生命周期中创建了一个 WebSocket 实例，并绑定了 `connect`、`message`、`close` 事件。在组件销毁之前，我们需要调用 `close()` 方法关闭 WebSocket 连接，防止内存泄漏。