背景

服务端WebSocket + Protobuf + 大报头（Big-Endian）
客户端Web环境，JS实现WS对接

生成JS版本的Proto

在放置proto的目录下执行

protoc --js_out=import_style=commonjs:./ --plugin=protoc-gen-grpc=./protoc-gen-grpc-web.exe --grpc-web_out=import_style=commonjs,mode=grpcwebtext:./ *.proto

说明：

1. protoc-gen-grpc-web.exe需要去官方下载最新版本
2. 服务端需要另外提供一套msg_id的对应js文件

Web客户端安装google-protobuf依赖

npm install google-protobuf --save

客户端需要的文件

image.png

连接WS

let wsUri = "ws://127.0.0.1:3658/"
let ws = new WebSocket(wsUri)
ws.binaryType = "arraybuffer" //proto通讯一定要用这个配置

消息发送函数

function doSend(msgID, bytes) {
    var buffer = new ArrayBuffer(bytes.length + 2); // 前两位留给msgID
    var view = new DataView(buffer);
    view.setUint16(0, msgID);
    for (var i = 0; i < bytes.length; i++) {
        view.setUint8(i + 2, bytes[i]);
    }
    ws.send(view);
}

以登录举例

let loginMsg = new login_msg.RequestLogin()
loginMsg.setToken("6f35691ccb516ee6c15f1da4427c8d7a")
doSend(login_msg_id.proto_msg.RequestLogin, loginMsg.serializeBinary())

接受消息

function onMessage(evt) {
  let ret = loadMsg(evt.data)
}

function loadMsg(data) {
  const msgId = view.getUint16(0) // 前两个byte是MessagID
  const msgName = msgDefine.msg_map[msgId]
  const protoMsg = proto[msgName]
  const ret = protoMsg.deserializeBinary(data)
  return protoMsg.toObject(false, ret)
}