微信小程序使用protobuf数据格式+webscoket

素颜马尾好姑娘i 2022-02-17 00:07 885阅读 0赞

1.  github 项目  [https://github.com/Zhang19910325/protoBufferForWechat][https_github.com_Zhang19910325_protoBufferForWechat]   这个项目是关键，将其**weichatPb**放进小程序目录下。(借用)

2.windows环境执行以下命令

npm install -g protobufjs

3.拿原来的例如：HallLoginMessage.proto文件进行处理

在控制台执行命令：pbjs -t json HallLoginMessage.proto > HallLoginMessage.json

(确保是在同一个根目录下)

将HallLoginMessage.json稍作修改，改成HallLoginMessage.js文件，如下图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbjkzNzQ_size_16_color_FFFFFF_t_70][]

4.在接下来使用webscoket

wx.connectSocket({
            url: api.webscoketUrl,
            header: {'content-type': 'application/json'},
            success: function (res) {
              console.log("WebSocket成功");
            },
            fail: function (res) {
              console.log("WebSocket失败", res);
            }
          });
          wx.onSocketOpen(function (res) {
            console.log('WebSocket连接打开成功！');
            wepy.setStorageSync('socketConnect',1);
          });
          wx.onSocketError(function (res) {
            console.log(res);
            console.log('WebSocket连接打开失败，请检查！')
          });
          wx.onSocketMessage(function (res) {
            console.log('pvp收到服务器内容：', res.data);
            that.handleMessage(res.data);
          });

5.webscoket连接成功后发送protobuf格式的数据

//发送登录请求

var logindata={
              account: this.$parent.globalData.currentUser.username,
              uid: this.$parent.globalData.currentUser.userId,
              password:""
            };
            this.loadProtoData('HallLoginMessage','LoginRequest',10001,logindata);

//发送数据处理成protobuf格式的

loadProtoData(proto,protoClass,mid,data){
          this.proto=proto;
          this.protoClass=protoClass;
          this.mid=mid;
    
          var protobuf = require('../utils/weichatPb/protobuf.js'); //引入protobuf模块
          var HallLoginMessage = require('../utils/proto/'+proto+'.js');//加载awesome.proto对应的json
          var AwesomeRoot = protobuf.Root.fromJSON(HallLoginMessage);
          var LoginRequest = AwesomeRoot.lookupType(protoClass);//这就是我们的Message类
          var payload = data;
          var message = LoginRequest.create(payload);
          var buffer = LoginRequest.encode(message).finish();
          //console.log("buffer", buffer);
          var arrayBuffer = new ArrayBuffer(4 + buffer.length);
          var dataView = new DataView(arrayBuffer);
          dataView.setInt32(0, mid);
          for (var i = 0; i < buffer.length; i++) {
            dataView.setUint8(i + 4, buffer[i]);
          }
          //console.log("dataView", dataView);
          console.log("发送的数据---", arrayBuffer);
          this.sendSocketMessage(arrayBuffer);
    
        }

//接受protobuf格式数据的也要处理成json

receiveMessage(proto,protoClass,data) {
      var protobuf = require('../utils/weichatPb/protobuf.js'); //引入protobuf模块
      var HallLoginMessage = require('../utils/proto/'+proto+'.js');//加载awesome.proto对应的json
      var AwesomeRoot = protobuf.Root.fromJSON(HallLoginMessage);
      var LoginResponse = AwesomeRoot.lookup(protoClass);//这就是我们的Message类
      var buffer = data;
    
      var buf = new Uint8Array(buffer, 4);
      let deMessage = LoginResponse.decode(buf);
      //console.log("转化前", deMessage);
      //转化
      let deMessage1=this.int64Tostring(protoClass,deMessage);
      console.log("转化后", deMessage1);
    
      return deMessage1;
    }

注意：这里有些数据返回是long对象（即长度>int32位），

this.longtoint(deMessage.uid);这是就必须转一下,npm 安装 long

longtoint(obj){
          //console.log('---------'+obj)
          let int=0;
          let Long = require("long");
          let longVal = new Long(obj.low, obj.high, obj.unsigned);
          int = parseInt( longVal.toString() ) ;
          return int;
        }

6.至此，就可以愉快的开发了

//接受消息
        handleMessage(msg) {
          var that=this;
          //判断返回的mid值
          var dataview1  = new DataView(msg, 0, 4);
          var mid = dataview1 .getInt32(0);
          console.log('mid1-----'+mid);
          //let mid=this.mid;
          let proto=this.proto;
          let protoClass=this.receive( mid );
    
          switch (mid) {
            case 10002:     //登录
              let deMessage=this.receiveMessage(proto,protoClass,msg);
              let rid=deMessage.rid;

[https_github.com_Zhang19910325_protoBufferForWechat]: https://github.com/Zhang19910325/protoBufferForWechat
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbjkzNzQ_size_16_color_FFFFFF_t_70]: /images/20220217/24cfe39c163144c6a4e9f65f5a9d3361.png