微信小程序使用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文件,如下图

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;

 

### 解决微信小程序 WebSocket 高延迟的方法 在开发过程中,如果遇到微信小程序中的 WebSocket 出现高延迟的情况,可以从以下几个方面入手解决问题: #### 1. **优化服务器性能** 如果服务器处理能力不足或者负载过高,可能会导致消息传递的延迟增加。可以通过升级硬件配置、优化数据库查询逻辑以及减少不必要的计算操作来提升服务器响应速度[^2]。 #### 2. **压缩数据包大小** 数据量过大也会引起传输时间延长。因此建议对发送的数据进行序列化并采用高效的编码方式进行压缩(如 JSONProtobuf),从而减小每次交互所需的时间开销[^1]。 #### 3. **选择合适的SSL证书** 使用HTTPS时需注意选用质量较高的SSL/TLS加密方案以降低握手阶段带来的额外耗时。同时确保所选服务商提供稳定可靠的服务,并定期更新维护相关凭证材料以防过期影响正常使用效果[^2]。 #### 4. **调整心跳机制参数设置** 心跳检测用于保持长链接活跃状态防止被中间代理断开连接。适当调节ping间隔时间和重试次数可以有效改善因网络波动造成的短暂失联现象而引发的整体延滞感增强问题[^3]。 #### 5. **考虑其他替代技术** 对于某些特定场景下的超低延迟需求(例如直播互动),单纯依赖标准版WebSockets可能难以完全满足预期目标,则可尝试引入更先进的RTC(real-time communication)类库作为补充手段之一[^4]。 ```javascript // 示例代码:设置WebSocket的心跳机制 const socket = wx.connectSocket({ url: 'wss://example.com/socket', }); let heartbeatInterval; function startHeartbeat() { clearInterval(heartbeatInterval); heartbeatInterval = setInterval(() => { if (socket.readyState === socket.OPEN) { socket.send({ data: 'ping' }); } }, 30000); // 每隔30秒发送一次心跳信号 } startHeartbeat(); ``` 通过以上措施综合施策往往能够显著缓解乃至彻底消除由各种因素共同作用所致的小程序内部websockets通讯过程当中的不必要等待状况发生几率及其程度表现形式等方面存在的诸多弊端之处所在位置范围之内合理范围内尽可能做到最好最优最佳水平线之上持续改进完善直至达到理想最终目的为止结束全文叙述说明部分环节流程步骤要点重点难点疑点解答完毕谢谢阅读!
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值