如何基于Vue3封装一个好用的Websocket

npm install ws --save

import WebSocket from 'ws';
class Websocket {
  constructor(url, options = {}) {
    this.url = url;
    this.options = options;
    this.ws = null;
  }
  connect() {
    this.ws = new WebSocket(this.url, this.options);
    this.ws.onopen = () => {
      console.log('Websocket connection opened.');
    };
    this.ws.onmessage = (event) => {
      console.log('Websocket message received.', event.data);
    };
    this.ws.onerror = (error) => {
      console.error('Websocket error occurred.', error);
    };
    this.ws.onclose = () => {
      console.log('Websocket connection closed.');
    };
  }
  send(data) {
    if (this.ws.readyState === WebSocket.OPEN) {
      this.ws.send(data);
    } else {
      console.error('Websocket connection not open.');
    }
  }
  close() {
    this.ws.close();
  }
}
export default Websocket;

import Websocket from './websocket.js';
const MyPlugin = {
  install(Vue) {
    Vue.prototype.$websocket = new Websocket('ws://localhost:8080');
  },
};
export default MyPlugin;

import { createApp } from 'vue';
import App from './App.vue';
import MyPlugin from './my-plugin.js';
const app = createApp(App);
app.use(MyPlugin);
app.mount('#app');

export default {
  mounted() {
    this.$websocket.connect();
  },
  methods: {
    sendMessage(message) {
      this.$websocket.send(message);
    },
  },
};