背景
服务端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
说明：
- protoc-gen-grpc-web.exe需要去官方下载最新版本
- 服务端需要另外提供一套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)
}
