vue2 通过websocket 收发 protobuf数据

要使用 WebSocket 收发 protobuf 数据，需要以下步骤：

1. 在 Vue 2 中安装 `protobufjs` 和 `ws` 两个库。

   npm install protobufjs ws

2. 在 Vue 组件中引入 `protobufjs` 和 `ws`。

   import protobuf from 'protobufjs';
   import WebSocket from 'ws';

3. 定义 protobuf 的消息类型，并编译成可用的代码。

   const root = protobuf.Root.fromJSON(require('./path/to/protobuf.json'));
   const message = root.lookupType('message.package.MessageType');
   const buffer = message.encode(messageObject).finish();

4. 建立 WebSocket 连接。

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

5. 发送数据，将 protobuf 编码后的数据发送到 WebSocket 服务器。

   ws.send(buffer);

6. 接收数据，将 WebSocket 接收到的二进制数据解码成 protobuf 消息类型。

   ws.onmessage = function(event) {
     const data = event.data;
     const decodedMessage = message.decode(new Uint8Array(data));
     console.log(decodedMessage);
   };

注意：在 Vue 组件中使用 WebSocket 时，需要在 `mounted` 生命周期函数中建立连接，在 `beforeDestroy` 生命周期函数中关闭连接。例如：

export default {
  data() {
    return {
      ws: null
    };
  },
  mounted() {
    this.ws = new WebSocket('ws://localhost:8080');
    this.ws.onopen = function() {
      console.log('WebSocket connection established');
    };
    this.ws.onclose = function() {
      console.log('WebSocket connection closed');
    };
    this.ws.onerror = function(event) {
      console.error('WebSocket error:', event);
    };
    this.ws.onmessage = function(event) {
      const data = event.data;
      const decodedMessage = message.decode(new Uint8Array(data));
      console.log(decodedMessage);
    };
  },
  beforeDestroy() {
    this.ws.close();
  }
};