博客

1、创建一个 WebSocket.js文件并定义 WebSocket类，在这个类中，我们使用了浏览器原生的 WebSocket API 来创建 WebSocket实例，并定义了 send()、on() 和 close()方法来发送消息、接收消息和关闭 WebSocket连接。

export default class WebSocket {
  constructor(url) {
    this.ws = new window.WebSocket(url);
  }

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

  on(event, callback) {
    this.ws.addEventListener(event, (message) => {
      callback(JSON.parse(message.data));
    });
  }

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

2、在Vue组件中导入并使用WebSocket类，在Vue组件中，我们首先导入自定义的websocket.js 文件，并使用它来创建WebSocket实例。然后，我们定义了on() 方法来接收消息，并在Vue方法中使用 sendMessage()方法来发送消息。

import WebSocket from './WebSocket';

export default {
  data() {
    return {
      socket: null
    };
  },
  created() {
    this.socket = new WebSocket('ws://localhost:3000');

    this.socket.on('message', (message) => {
      console.log('Received message:', message);
    });
  },
  methods: {
    sendMessage() {
      this.socket.send({ message: 'Hello world' });
    }
  }
}