WebSocket と Socket.IO を使用して Vue でリアルタイム通信を実現するにはどうすればよいですか?

const ws = new WebSocket('ws://localhost:8080');

ws.onopen = () => {
  console.log('WebSocket已连接');
  ws.send('Hello');
};

ws.onmessage = event => {
  console.log(`收到消息：${event.data}`);
};

ws.onclose = () => console.log('WebSocket已关闭');

class WebSocketPlugin {
  constructor({ url, onOpen, onClose, onMessage }) {
    this.ws = new WebSocket(url);

    this.ws.onopen = () => onOpen && onOpen();
    this.ws.onclose = () => onClose && onClose();
    this.ws.onmessage = event => onMessage && onMessage(event.data);
  }

  send(message) {
    this.ws.send(message);
  }

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

export default {
  install: (Vue, options) => {
    const { url, onOpen, onClose, onMessage } = options;

    const ws = new WebSocketPlugin({ url, onOpen, onClose, onMessage });

    Vue.prototype.$ws = ws;
  }
};

import io from 'socket.io-client';

const socket = io('http://localhost:8080');

socket.on('connect', () => {
  console.log('Socket.IO连接已建立');
  socket.emit('hello', 'world');
});

socket.on('message', message => {
  console.log(`收到消息：${message}`);
});

socket.on('disconnect', () => console.log('Socket.IO连接已断开'));

class SocketIoPlugin {
  constructor({ url, options = {}, onConnect, onDisconnect }) {
    this.socket = io(url, options);

    this.socket.on('connect', () => onConnect && onConnect());
    this.socket.on('disconnect', () => onDisconnect && onDisconnect());
  }

  on(eventName, handler) {
    this.socket.on(eventName, handler);
  }

  emit(eventName, data) {
    this.socket.emit(eventName, data);
  }

  off(eventName) {
    this.socket.off(eventName);
  }
}

export default {
  install: (Vue, options) => {
    const { url, options: socketOptions, onConnect, onDisconnect } = options;

    const socket = new SocketIoPlugin({ url, options: socketOptions, onConnect, onDisconnect });

    Vue.prototype.$socket = socket;
  }
};