在网络协议调试与前后端联调场景中，经常需要把模拟出来的接口交互数据直观呈现给同事或客户。tshark作为Wireshark的命令行版本，能够把网络报文解析成结构化文本。借助Node.js的进程管理能力，我们可以驱动tshark读取Mock数据生成的pcap文件，再把解析结果绘制成图片，这就是Mock2Image的基本思路。下面通过一个完整实现来拆解关键环节。
一、Node.js调度tshark的基础原理
Node.js通过内置的child_process模块创建子进程，从而在当前应用中调用系统命令行工具。对于tshark而言，最核心的是使用spawn或execFile启动进程，并传入抓包文件与分析字段参数。与简单的exec不同，spawn不会在shell中拼接字符串，能显著降低命令行注入风险，也方便我们以流的方式读取tshark的逐行输出。
在Mock2Image流程里，我们通常先让后端或测试脚本把Mock接口响应写成pcap格式（可用tcpreplay或文本转pcap工具），然后让tshark以-r读取该文件，用-T fields指定输出字段，例如时间、源IP、目的IP、协议类型与负载长度。Node.js监听子进程的stdout，把每一行按制表符分割，就能得到结构化记录。
需要注意，tshark的字段名必须和已安装版本一致。如果版本过旧，部分字段如_ws.col.Protocol可能不存在。建议在项目初始化时执行一次tshark -G fields并缓存结果，避免运行时报错。同时，子进程退出码非零时应捕获stderr，很多Mock数据格式错误都会在这里暴露。
const { spawn } = require('child_process');
function runTshark(pcapPath) {
const args = [
'-r', pcapPath,
'-T', 'fields',
'-e', 'frame.time_relative',
'-e', 'ip.src',
'-e', 'ip.dst',
'-e', '_ws.col.Protocol',
'-e', 'tcp.len'
];
const proc = spawn('tshark', args);
let rows = [];
proc.stdout.on('data', (chunk) => {
const lines = chunk.toString('utf8').split('n');
for (const line of lines) {
if (!line.trim()) continue;
const cols = line.split('t');
rows.push({
time: cols[0],
src: cols[1],
dst: cols[2],
proto: cols[3],
len: cols[4]
});
}
});
return new Promise((resolve, reject) => {
proc.on('close', (code) => {
if (code === 0) resolve(rows);
else reject(new Error('tshark exit ' + code));
});
});
}
二、Mock数据到报文模型的映射与清洗
接口Mock一般表现为JSON，例如{url:'/api/login', method:'POST', delay:120, status:200}。要转为tshark可识别的报文，需要把它们映射成网络层概念：把method与url合并为应用协议标识，把delay映射为帧间隔，status决定报文颜色标记。这一步建议在Node.js里用一个纯函数完成，保证可测试。
实际项目中常见的问题是Mock数据缺少真实IP。我们可以分配虚拟网段，如10.0.0.1代表前端、10.0.0.2代表后端，并在生成pcap时用tcprewrite改写。另一个坑是中文接口名，tshark输出默认按系统编码，Windows下常是GBK，必须在spawn时设置env.LANG为zh_CN.UTF-8或在读取后用iconv-lite转码，否则图片上会出现乱码方块。
清洗后的数据还应做聚合。比如同一接口的多次调用，在图片上若逐条画出会过于密集。可按照时间窗口合并，用汇总记录表达调用频次与平均耗时。下面示例展示如何把原始rows压缩为图表友好的结构。
function aggregate(rows, windowSec = 1) {
const buckets = {};
for (const r of rows) {
const t = Math.floor(parseFloat(r.time) / windowSec);
if (!buckets[t]) buckets[t] = { count: 0, totalLen: 0, proto: r.proto };
buckets[t].count++;
buckets[t].totalLen += parseInt(r.len || '0', 10);
}
return Object.keys(buckets).map(k => ({
slot: k * windowSec,
count: buckets[k].count,
avgLen: Math.round(buckets[k].totalLen / buckets[k].count),
proto: buckets[k].proto
}));
}
三、使用canvas生成图片报表的落地方法
拿到聚合数据后，渲染环节可以用node-canvas库，它在服务端提供接近浏览器canvas的API。我们创建固定宽度画布，按时间槽横向排布柱状条，用颜色区分协议类型，顶部标注Mock接口名。这种图片可直接插入周报或需求文档，比纯文本更直观。
具体绘制时，建议把样式配置外置为JSON，例如柱体宽度、间距、字体大小，这样非开发人员也能调整。对于超长Mock序列，应做分页或缩放，避免生成数万像素的巨图拖垮内存。node-canvas支持canvas.toBuffer('image/png')，配合fs写盘即可完成Mock2Image的最后一步。
如果团队希望自动化，可把上述三步串成命令行工具：输入Mock JSON目录，输出png报表目录。配合npm script，前端同学执行一条命令就能拿到联调示意图。相比引入重量级可视化平台，这种基于Node.js与tshark的组合更轻、依赖更少，也更容易在CI里跑通。
const { createCanvas } = require('canvas');
const fs = require('fs');
function drawReport(agg, outPath) {
const canvas = createCanvas(800, 400);
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, 800, 400);
ctx.fillStyle = '#333';
ctx.font = '14px sans-serif';
agg.forEach((item, i) => {
const x = 40 + i * 30;
const h = item.count * 20;
ctx.fillStyle = item.proto === 'HTTP' ? '#4caf50' : '#2196f3';
ctx.fillRect(x, 360 - h, 20, h);
ctx.fillStyle = '#333';
ctx.fillText(item.count, x, 360 - h - 5);
});
fs.writeFileSync(outPath, canvas.toBuffer('image/png'));
}
四、常见故障与工程化建议
在真实机器上跑这套方案，最容易遇到tshark未加入PATH的问题。Node.js子进程找不到命令时会抛ENOENT，建议在启动前用which tshark或try-catch校验，并给出安装提示。其次是pcap权限，在Linux下普通用户可能不能读某些接口生成的文件，需提前chmod。
工程化方面，可以把Mock2Image封装成内部npm包，对外暴露generate(mockDir, outDir)。加上简单的缓存：若Mock未改动且图片已存在则跳过，能节省CI时间。日志用debug模块控制，日常静默，出图失败时打印tshark的stderr，便于定位是数据问题还是参数问题。
最后提醒，tshark输出字段若包含特殊字符如换行，会导致Node.js按行解析错位。可在调用时加-E separator=,并改用CSV解析库，比手动split更稳。把这些细节固化到代码里，Mock2Image就能成为团队日常小工具而不是一次性脚本。
Node.jstsharkMock2Image修改时间：2026-08-14 02:21:35