JS+WebSocket+Protobuf的客户端代码实现
背景服务端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); } 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是MessagIDconst msgName = msgDefine.msg_mapconst protoMsg = protoconst ret = protoMsg.deserializeBinary(data)return protoMsg.toObject(false, ret)}
页:
[1]