JS+WebSocket+Protobuf的客户端代码实现

pc8888888 · 发表于 2022-7-7 18:49

背景

服务端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
说明：

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); } 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)}

		自动登录	找回密码
密码			立即注册

JS+WebSocket+Protobuf的客户端代码实现

本帖子中包含更多资源