whistle解析Protobuf协议的websocket数据方法

使用背景

whistle.script方法

可以利用whistle.script插件解析Protobuf协议的websocket数据，但这种方法只能用console.log打印转换后的数据。而且给客户端、服务端推送数据，不太方便。
参考文章：
利用whistle调试websocket和socket请求
使用whistle解析Protobuf协议数据

whistle.custom-ws插件项目

whistle作者avwo还提供了自定义websocket抓包调试插件项目whistle.custom-ws
该插件可以直接在newwork页面的inspectors的frames页面展示解析后的数据，并且composer推送数据。这样更直观和方便，需要改造下custom-ws项目增加protobuf的解析

custom-ws增加protobuf的解析

需要在该项目基础上修改增加protobuf的解析

先看怎么在nodejs 引入Protobuf

AI回答的步骤：

在Node.js中使用Google Protobuf，需要先安装protobuf库和对应的proto文件。

1. 安装protobuf库：

npm install protobufjs

2. 准备proto文件：

假设我们有一个名为example.proto的proto文件，内容如下：

syntax = "proto3";

message Person {
  string name = 1;
  int32 age = 2;
}

3. 编译proto文件：

使用protobuf编译器将example.proto编译成JavaScript代码，生成一个名为example_pb.js的文件：

npx pbjs -t static-module -w commonjs -o example_pb.js example.proto

4. 编写Node.js代码：

在Node.js中，我们可以使用protobuf库来序列化和反序列化数据。

const protobuf = require("protobufjs");
const example_pb = require("./example_pb");

// 创建Person对象并设置属性
const person = new example_pb.Person();
person.setName("张三");
person.setAge(25);

// 序列化Person对象为二进制数据
const buffer = person.serializeBinary();
console.log("Serialized data:", buffer);

// 反序列化二进制数据为Person对象
const deserializedPerson = example_pb.Person.deserializeBinary(buffer);
console.log("Deserialized person:", deserializedPerson);

以上代码首先引入了protobuf库和编译好的example_pb.js文件，然后创建了一个Person对象并设置了属性。接着，我们将Person对象序列化为二进制数据，并将其打印出来。最后，我们将二进制数据反序列化为Person对象，并将其打印出来。

在插件项目中引入example_pb

根据项目需求，编译example_pb.js，放在lib下，在handleConnect.js中引用

在handleConnect中增加解析编译方法

在ws.on(‘message’）、wsClient.on(‘message’）方法中增加解析数据的方法。把解析后的数据通过req.emit(‘clientFrame’, ${rdata}, ignore);显示到frame

ws.on('message', (data) => {
    // 在Network/Frames显示客户端发送的数据包
    // 支持emit：buffer、字符串、数字、对象等等各种类型
    const ignore = req.curSendState === 'ignore';
    rdata=receive_accept_msg(data);
    req.emit('clientFrame', `${rdata}`, ignore);
    if (!ignore) {
      wsClient.send(data);
    }
  });

在req.on(‘sendToServer’）、’sendToClient’方法中增加编译信息的步骤，这样通过composer页面输入的原始信息可以自动编译发送给服务端、客户端。

req.on('sendToServer', (data) => {
    // 这种数据不管什么状态都要发送出去
    data=data.toString();
    if (typeof data == "object") {
      change_data=data;
    }else if(isJsonString(data)==true){
      change_data=JSON.parse(data);
    }else{
      change_data=actions[data];                
    }
    sdata=send_data(change_data); 
    req.emit('clientFrame', `${data}`);
    wsClient.send(sdata,{binary: true});
  });

匹配规则，查看效果

在rules里增加匹配插件规则：

ws://im.xxx.com  custom-ws:// enable://customParser

在network页面的inspectors的frames里可以直接看到解析后的数据。复制原始数据，composer里粘贴修改，可以发送给客户端或服务端。