egret客户端传输protobuf

在 egret项目中使用protobufjs 一文中，我们实现了在 egret 工程项目中配置 protobuf 的情况。

那么在此文中，我们来实现一下egret客户端发送接收二进制数据，并解析 protobuf 的内容。

说明

文中所说的WebSocket，都是基于 window 下的 WebSocket 对象。

有一份 protocol.json 文件，其中内容就是 .proto 文件的每个结构体都有一个唯一的ID。在加载游戏时，把每个结构体对应的类都写入到全局对象 global.msgId 。

{
  "msg.Person": 1,
  ......
}

创建 WebSocket 对象

let url = `ws://127.0.0.1:3000`
this.ws = new window['WebSocket'](url);
this.ws.binaryType= `arraybuffer`;

//绑定socket接收服务端返回的事件
this.ws.onmessage = this.onReceiveMsg;

客户端发送

public send(data: any): void {
    console.log(`发送协议：`, data);
    let msgId = data && data.constructor ? data.constructor.MsgId : 0;  //获取其唯一ID。这里看个人项目处理了
      if (isNaN(msgId) || msgId <= 0) {
        return null;
    }
    let uint: Uint8Array = data.constructor.encode(data).finish();  //decode
    let uint8 = new Uint8Array(uint.byteLength + 4);
    let dataView = new DataView(uint8.buffer);
    dataView.setInt32(0, msgId);
    uint8.set(uint, 4);
    this.ws.send(dataView.buffer);
}

客户端接收

private onReceiveMsg(event: MessageEvent): void {
    let buf: ArrayBuffer = event.data;
    let dataView = new DataView(buf);
    let msgId = dataView.getInt32(0);
    let msgItem = global.msgId[msgId];  //根据ID获取其对应的类
    if (!msgItem || !msgItem.decode) {
      return;
    }
    let buffer = new Uint8Array(buf);
    let msgData = msgItem.decode(buffer);
    console.log(`接受协议：`, msgId, msgData);
}