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

1.  github 项目  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文件,如下图

微信小程序使用protobuf数据格式+webscoket_第1张图片

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;

 

你可能感兴趣的:(经验积累)