OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

perf: 重构信令跟踪功能

Browse Source
This commit is contained in:
TsMask
2025-04-18 15:38:57 +08:00
parent 83808a4f88
commit b92c871b3b
2 changed files with 512 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/api/trace/packet.ts
View File

@@ -62,3 +62,18 @@ export function packetKeep(taskNo: string, duration: number = 120) {
data: { taskNo, duration },
});
}
/**
* 信令跟踪文件
* @param taskNo 对象
* @returns object
*/
export function packetPCAPFile(taskNo: string) {
return request({
url: '/trace/packet/filePull',
method: 'GET',
params: { taskNo },
responseType: 'blob',
timeout: 180_000,
});
}

725
src/views/traceManage/wireshark/index.vue
View File

@@ -1,16 +1,16 @@
<script setup lang="ts">
import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
import { onBeforeUnmount, onMounted, reactive, ref, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { message, Modal } from 'ant-design-vue/es';
import DissectionTree from '../tshark/components/DissectionTree.vue';
import DissectionDump from '../tshark/components/DissectionDump.vue';
import PacketTable from '../tshark/components/PacketTable.vue';
import {
RESULT_CODE_ERROR,
RESULT_CODE_SUCCESS,
} from '@/constants/result-constants';
import { filePullTask } from '@/api/trace/task';
import { OptionsType, WS } from '@/plugins/ws-websocket';
import { scriptUrl as wkUrl } from '@/assets/js/wiregasm_worker';
import * as wkUtil from '@/plugins/wk-worker';
import * as wsUtil from '@/plugins/ws-websocket';
import useI18n from '@/hooks/useI18n';
import saveAs from 'file-saver';
import {
@@ -19,34 +19,20 @@ import {
packetStop,
packetFilter,
packetKeep,
packetPCAPFile,
} from '@/api/trace/packet';
const ws = new WS();
import { parseDateToStr } from '@/utils/date-utils';
import { ColumnsType } from 'ant-design-vue/es/table';
const ws = new wsUtil.WS();
const wk = new wkUtil.WK();
const { t } = useI18n();
// =========== WK ==============
const NO_SELECTION = { id: '', idx: 0, start: 0, length: 0 };
type StateType = {
/**网卡设备列表 */
devices: { id: string; label: string; children: any[] }[];
/**初始化 */
initialized: boolean;
/**保活调度器 */
keepTimer: any;
/**任务 */
task: {
taskNo: string;
device: string;
filter: string;
outputPCAP: boolean;
};
/**字段 */
columns: string[];
/**过滤条件 */
filter: string;
/**过滤条件错误信息 */
filterError: string | null;
/**当前选中的帧编号 */
selectedFrame: number;
/**当前选中的帧数据 */
@@ -57,63 +43,19 @@ type StateType = {
selectedTree: typeof NO_SELECTION;
/**选择帧的Dump数据标签 */
selectedDataSourceIndex: number;
/**包总数 */
totalPackets: number;
/**包数据 */
packetList: any[];
};
const state = reactive<StateType>({
devices: [],
initialized: false,
keepTimer: null,
task: {
taskNo: 'laYlTbq',
device: '192.168.5.58',
filter: 'tcp and (port 33030 or 8080)',
outputPCAP: false,
},
columns: [
'No.',
'Time',
'Source',
'Destination',
'Protocol',
'Length',
'Info',
],
filter: 'tcp and (port 33030 or 8080)',
filterError: null,
selectedFrame: 1,
selectedFrame: 0,
/**当前选中的帧数据 */
packetFrame: { tree: [], data_sources: [] },
packetFrameTreeMap: null, // 注意：Map 需要额外处理
selectedTree: NO_SELECTION, // NO_SELECTION 需要定义
/**选择帧的Dump数据标签 */
selectedDataSourceIndex: 0,
// 包数据
totalPackets: 0,
packetList: [],
});
/**清除帧数据和报文信息状态 */
function fnReset() {
state.initialized = false;
// 选择帧的数据
state.selectedFrame = 0;
state.packetFrame = { tree: [], data_sources: [] };
state.packetFrameTreeMap = null;
state.selectedTree = NO_SELECTION;
state.selectedDataSourceIndex = 0;
// 过滤条件
state.filter = 'tcp and (port 33030 or 8080)';
state.filterError = null;
// 包数据
state.totalPackets = 0;
state.packetList = [];
}
/**解析帧数据为简单结构 */
function parseFrameTree(id: string, node: Record<string, any>) {
let map = new Map();
@@ -136,15 +78,9 @@ function parseFrameTree(id: string, node: Record<string, any>) {
return map;
}
/**帧数据点击选中 */
function handleSelectedTreeEntry(e: any) {
console.log('fnSelectedTreeEntry', e);
state.selectedTree = e;
}
/**报文数据点击选中 */
function handleSelectedFindSelection(src_idx: number, pos: number) {
console.log('fnSelectedFindSelection', pos);
// console.log('fnSelectedFindSelection', pos);
if (state.packetFrameTreeMap == null) return;
// find the smallest one
let current = null;
@@ -166,83 +102,274 @@ function handleSelectedFindSelection(src_idx: number, pos: number) {
state.selectedTree = state.packetFrameTreeMap.get(current);
}
}
/**帧数据点击选中 */
function handleSelectedTree(e: any) {
state.selectedTree = e;
}
/**包数据表点击选中 */
function handleSelectedFrame(num: number) {
console.log('fnSelectedFrame', num, state.totalPackets);
const packet = state.packetList.find((v: any) => v.number === num);
if (!packet) return;
const packetFrame = packet.frame;
state.selectedFrame = packet.number;
state.packetFrame = packetFrame;
state.packetFrameTreeMap = parseFrameTree('root', packetFrame);
state.selectedTree = NO_SELECTION;
state.selectedDataSourceIndex = 0;
/**接收数据后回调 */
function wkMessage(res: Record<string, any>) {
// console.log('wkMessage', res);
switch (res.type) {
case 'status':
console.info(res.status);
break;
case 'error':
console.warn(res.error);
break;
case 'init':
wk.send({ type: 'columns' });
state.initialized = true;
break;
case 'frames':
const { frames } = res.data;
// 有匹配的选择第一个
if (frames.length > 0) {
state.selectedFrame = frames[0].number;
wk.send({ type: 'select', number: state.selectedFrame });
}
break;
case 'selected':
// 首行修改帧编号
const fristFrame = res.data.tree[0];
res.data.tree[0].label = fristFrame.label.replace(
'Frame 1:',
`Frame ${tableState.selectedNumber}:`
);
const item = fristFrame.tree.find(
(item: any) => item.label === 'Frame Number: 1'
);
if (item) {
item.label = `Frame Number: ${tableState.selectedNumber}:`;
}
state.packetFrame = res.data;
state.packetFrameTreeMap = parseFrameTree('root', res.data);
state.selectedTree = NO_SELECTION;
state.selectedDataSourceIndex = 0;
break;
case 'processed':
// setStatus(`Error: non-zero return code (${e.data.code})`);
// 加载数据
wk.send({
type: 'frames',
filter: '',
skip: 0,
limit: 1,
});
break;
default:
console.warn(res);
break;
}
}
/**包数据表滚动底部加载 */
function handleScrollBottom(index: any) {
console.log('handleScrollBottom', index);
/**建立WK连接 */
function fnWK() {
const options: wkUtil.OptionsType = {
url: wkUrl,
onmessage: wkMessage,
onerror: (ev: any) => {
console.error(ev);
},
};
//建立连接
wk.connect(options);
}
// =========== WS ==============
/**接收数据后回调 */
function wsMessage(res: Record<string, any>) {
const { code, requestId, data } = res;
if (code === RESULT_CODE_ERROR) {
console.warn(res.msg);
return;
}
// 建联时发送请求
if (!requestId && data.clientId) {
tableState.data = [];
tableState.total = 0;
taskState.keepTimer = setInterval(() => {
if (ws.state() != WebSocket.OPEN) {
clearInterval(taskState.keepTimer);
return;
}
packetKeep(taskState.task.taskNo, 120);
}, 90 * 1000);
return;
}
// 订阅组信息
if (!data?.groupId) {
return;
}
if (data.groupId === `4_${taskState.task.taskNo}`) {
const packetData = data.data;
tableState.total = packetData.number;
tableState.data.unshift(packetData);
if (tableState.data.length > 100) {
tableState.data.pop();
}
}
}
/**建立WS连接 */
function fnWS() {
const options: wsUtil.OptionsType = {
url: '/ws',
params: {
/**订阅通道组
*
* 信令跟踪Packet (GroupID:4_taskNo)
*/
subGroupID: `4_${taskState.task.taskNo}`,
},
heartTimer: 30 * 1000,
onmessage: wsMessage,
onerror: (ev: any) => {
// 接收数据后回调
console.error(ev);
},
};
//建立连接
ws.connect(options);
}
// =========== 任务 ==============
type TaskStateType = {
/**网卡设备列表 */
devices: { id: string; label: string; children: any[] }[];
/**任务 */
task: {
taskNo: string;
device: string;
filter: string;
outputPCAP: boolean;
};
/**过滤条件 */
filter: string;
/**过滤条件错误信息 */
filterError: string | null;
/**保活调度器 */
keepTimer: any;
/**停止标记 */
stop: boolean;
stopOutputPCAP: boolean;
};
const taskState = reactive<TaskStateType>({
devices: [],
task: {
taskNo: '',
device: '192.168.5.58',
filter: '',
outputPCAP: false,
},
filter: '',
filterError: null,
keepTimer: null,
stop: false,
stopOutputPCAP: false,
});
/**开始跟踪 */
function fnStart() {
// state.task.taskNo = 'laYlTbq';
state.task.taskNo = Number(Date.now()).toString(16);
state.task.outputPCAP = false;
packetStart(state.task).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
fnReset();
fnWS();
} else {
message.error(t('common.operateErr'), 3);
}
});
if (taskState.keepTimer) return;
taskState.keepTimer = true;
const hide = message.loading(t('common.loading'), 0);
// taskState.task.taskNo = 'laYlTbq';
taskState.task.taskNo = Number(Date.now()).toString(16);
taskState.task.filter = taskState.filter;
packetStart(toRaw(taskState.task))
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
// 清空选择帧的数据
state.selectedFrame = 0;
state.packetFrame = { tree: [], data_sources: [] };
state.packetFrameTreeMap = null;
state.selectedTree = NO_SELECTION;
state.selectedDataSourceIndex = 0;
// 开启
if (!state.initialized) {
fnWK();
}
clearInterval(taskState.keepTimer);
taskState.keepTimer = null;
fnWS();
// 记录状态
taskState.stop = false;
taskState.stopOutputPCAP = taskState.task.outputPCAP;
} else {
message.error(t('common.operateErr'), 3);
}
})
.finally(() => {
hide();
});
}
/**停止跟踪 */
function fnStop() {
packetStop(state.task.taskNo).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
if (typeof taskState.keepTimer !== 'number') return;
const hide = message.loading(t('common.loading'), 0);
packetStop(taskState.task.taskNo)
.then(res => {
if (res.code !== RESULT_CODE_SUCCESS) {
message.warning(res.msg, 3);
}
// 关闭监听
ws.close();
state.initialized = false;
state.filter = '';
state.filterError = null;
} else {
message.warning(res.msg, 3);
}
});
clearInterval(taskState.keepTimer);
taskState.keepTimer = null;
taskState.filter = '';
taskState.filterError = null;
taskState.stop = true;
})
.finally(() => {
hide();
});
}
/**跟踪数据表过滤 */
function handleFilterFrames() {
packetFilter(state.task.taskNo, state.filter).then(res => {
packetFilter(taskState.task.taskNo, taskState.filter).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
state.task.filter = state.filter;
taskState.task.filter = taskState.filter;
taskState.filterError = null;
} else {
state.filterError = res.msg;
taskState.filterError = res.msg;
}
});
}
/**开始跟踪 */
/**选择网卡 */
function fnDevice(v: string) {
state.task.device = v;
taskState.task.device = v;
}
/**下载触发等待 */
let downLoading = ref<boolean>(false);
/**信息文件下载 */
function fnDownloadPCAP() {
if (downLoading.value) return;
const fileName = `trace_packet_${state.task.taskNo}.pcap`;
const fileName = `packet_${taskState.task.taskNo}.pcap`;
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.logManage.neFile.downTip', { fileName }),
onOk() {
downLoading.value = true;
const hide = message.loading(t('common.loading'), 0);
filePullTask(state.task.taskNo)
packetPCAPFile(taskState.task.taskNo)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
@@ -267,90 +394,203 @@ function fnDownloadPCAP() {
});
}
/**接收数据后回调 */
function wsMessage(res: Record<string, any>) {
const { code, requestId, data } = res;
if (code === RESULT_CODE_ERROR) {
console.warn(res.msg);
return;
}
// =========== 表格数据 ==============
/**表格状态类型 */
type TabeStateType = {
/**加载等待 */
loading: boolean;
/**记录数据 */
data: Record<string, any>[];
/**总记录数 */
total: number;
/**选择帧编号 */
selectedNumber: number;
};
// 建联时发送请求
if (!requestId && data.clientId) {
state.initialized = true;
state.keepTimer = setInterval(() => {
packetKeep(state.task.taskNo, 120);
}, 90 * 1000);
return;
}
/**表格状态 */
let tableState: TabeStateType = reactive({
loading: false,
data: [],
total: 0,
selectedNumber: 0,
});
// 订阅组信息
if (!data?.groupId) {
/**表格字段列 */
let tableColumns = ref<ColumnsType>([
{
title: 'Number',
dataIndex: 'number',
align: 'left',
width: 100,
},
{
title: 'Time',
dataIndex: 'time',
align: 'left',
width: 150,
customRender(opt) {
if (!opt.value) return '';
const nanoseconds = opt.value; // 纳秒时间戳
const milliseconds = Math.floor(nanoseconds / 1000000);
const nanosecondsPart = (nanoseconds % 1000000)
.toString()
.padStart(6, '0');
return `${parseDateToStr(
milliseconds,
'HH:mm:ss.SSS'
)}.${nanosecondsPart}`;
},
},
{
title: 'Source',
dataIndex: 'source',
align: 'left',
width: 150,
ellipsis: true,
},
{
title: 'Destination',
dataIndex: 'destination',
align: 'left',
width: 150,
ellipsis: true,
},
{
title: 'Protocol',
dataIndex: 'protocol',
key: 'protocol',
align: 'left',
width: 100,
},
{
title: 'length',
dataIndex: 'length',
align: 'right',
width: 100,
},
{
title: 'Info',
dataIndex: 'info',
align: 'left',
ellipsis: true,
},
]);
/**
* 查看帧数据
* @param row 记录信息
*/
function fnVisible(row: Record<string, any>) {
// 选中行重复点击时显示隐藏
if (row.id === tableState.selectedNumber && state.selectedFrame !== 0) {
state.selectedFrame = 0;
return;
}
if (data.groupId === `4_${state.task.taskNo}`) {
const packetData = data.data;
state.totalPackets = packetData.number;
state.packetList.push(packetData);
}
tableState.selectedNumber = row.number;
const blob = generatePCAP(row.time / 1e3, row.data);
wk.send({ type: 'process', file: blob });
}
/**生成PCAP-blob */
function generatePCAP(timestamp: number, base64Data: string): Blob {
// 1. 转换数据
const binaryString = atob(base64Data);
const len = binaryString.length;
const bytes = new Uint8Array(len);
for (let i = 0; i < len; i++) {
bytes[i] = binaryString.charCodeAt(i);
}
/**建立WS连接 */
function fnWS() {
const options: OptionsType = {
url: '/ws',
params: {
/**订阅通道组
*
* 信令跟踪Packet (GroupID:4_taskNo)
*/
subGroupID: `4_${state.task.taskNo}`,
},
onmessage: wsMessage,
onerror: (ev: any) => {
// 接收数据后回调
console.error(ev);
},
};
//建立连接
ws.connect(options);
// 2. 创建PCAP文件头
const fileHeader = new Uint8Array([
0xd4,
0xc3,
0xb2,
0xa1, // magic_number (微秒级)
0x02,
0x00, // version_major (2)
0x04,
0x00, // version_minor (4)
0x00,
0x00,
0x00,
0x00, // thiszone (UTC)
0x00,
0x00,
0x00,
0x00, // sigfigs (固定0)
0xff,
0xff,
0x00,
0x00, // snaplen (最大捕获长度)
0x01,
0x00,
0x00,
0x00, // network (LINKTYPE_ETHERNET)
]);
// 3. 生成时间戳
const date = new Date(timestamp);
const secs = Math.floor(date.getTime() / 1000);
const usecs = (date.getTime() % 1000) * 1000;
// 4. 构造PCAP报文头
const packetHeader = new Uint8Array(16);
const headerView = new DataView(packetHeader.buffer);
headerView.setUint32(0, secs, true); // 时间戳秒
headerView.setUint32(4, usecs, true); // 时间戳微秒
headerView.setUint32(8, bytes.length, true); // 捕获长度
headerView.setUint32(12, bytes.length, true); // 原始长度
// 5. 合并所有数据
const finalData = new Uint8Array(
fileHeader.length + packetHeader.length + bytes.length
);
finalData.set(fileHeader);
finalData.set(packetHeader, fileHeader.length);
finalData.set(bytes, fileHeader.length + packetHeader.length);
// 6. 文件Blob对象
return new Blob([finalData], { type: 'application/octet-stream' });
}
onMounted(() => {
packetDevices().then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
state.devices = res.data;
taskState.devices = res.data;
if (res.data.length === 0) return;
state.task.device = res.data[0].id;
taskState.task.device = res.data[0].id;
}
});
fnWK();
});
onBeforeUnmount(() => {
clearInterval(state.keepTimer);
state.keepTimer = null;
if (ws.state() === WebSocket.OPEN) ws.close();
clearInterval(taskState.keepTimer);
wk.send({ type: 'close' }) && wk.close();
if (ws.state() <= WebSocket.OPEN) ws.close();
});
</script>
<template>
<PageContainer>
<a-card :bordered="false" :body-style="{ padding: '12px' }">
<div class="toolbar">
<a-space :size="8" class="toolbar-oper">
<!-- 插槽-卡片左侧侧 -->
<template #title>
<a-space :size="8" align="end">
<a-dropdown-button
type="primary"
:disabled="state.initialized"
@click="fnStart"
:disabled="!taskState.stop && taskState.task.taskNo !== ''"
>
<PlayCircleOutlined />
Start Trace
<template #overlay>
<a-menu
@click="({ key }:any) => fnDevice(key)"
:selectedKeys="[state.task.device]"
:selectedKeys="[taskState.task.device]"
>
<a-menu-item v-for="v in state.devices" :key="v.id">
<a-menu-item v-for="v in taskState.devices" :key="v.id">
<a-popover placement="rightTop" trigger="hover">
<template #content>
<div v-for="c in v.children">{{ c.id }}</div>
@@ -366,79 +606,130 @@ onBeforeUnmount(() => {
<template #icon><DownOutlined /></template>
</a-dropdown-button>
<a-button danger @click.prevent="fnStop()" v-if="state.initialized">
<a-button
danger
@click.prevent="fnStop()"
:disabled="taskState.stop || taskState.task.taskNo === ''"
>
<template #icon><CloseCircleOutlined /></template>
Stop Trace
</a-button>
<a-checkbox
v-model:checked="taskState.task.outputPCAP"
:disabled="!taskState.stop && taskState.task.taskNo !== ''"
>
Output PCAP
</a-checkbox>
<a-tag color="processing" v-if="taskState.task.filter !== ''">
{{ taskState.task.filter }}
</a-tag>
</a-space>
</template>
<!-- 插槽-卡片右侧 -->
<template #extra>
<a-space :size="8" align="end">
<a-button
type="primary"
:loading="downLoading"
@click.prevent="fnDownloadPCAP()"
v-if="state.task.outputPCAP"
v-if="taskState.stop && taskState.stopOutputPCAP"
>
<template #icon><DownloadOutlined /></template>
{{ t('common.downloadText') }}
</a-button>
<a-tag
color="green"
v-show="!!state.task.filter && state.initialized"
>
{{ state.task.filter }}
</a-tag>
</a-space>
<a-space :size="8" class="toolbar-info" v-show="state.initialized">
<span>
{{ t('views.traceManage.task.traceId') }}:&nbsp;
<strong>{{ state.task.taskNo }}</strong>
Packets:
<strong>{{ tableState.total }}</strong>
</span>
<span>
Task No:
<strong>{{ taskState.task.taskNo }}</strong>
</span>
<span> Packets: {{ state.totalPackets }} </span>
</a-space>
</div>
</template>
<!-- 包数据表过滤 -->
<a-input-group compact v-show="state.initialized">
<a-input
v-model:value="state.filter"
placeholder="display filter, example: tcp"
:allow-clear="true"
<a-input-group compact>
<a-auto-complete
v-model:value="taskState.filter"
:options="[
{ value: 'tcp and port 33030 and greater 100' },
{
value:
'(src 192.168.5.58 and dst port 33030) or (src 192.168.9.59 and dst port 33030)',
},
{ value: 'src host 192.168.5.58 and dst host 192.168.5.58' },
{ value: 'host 192.168.5.58 and greater 100 and less 2500' },
]"
style="width: calc(100% - 100px)"
@pressEnter="handleFilterFrames"
:allow-clear="true"
>
<template #prefix>
<FilterOutlined />
</template>
</a-input>
<a-input
placeholder="BPF Basic Filter, example: tcp"
@pressEnter="handleFilterFrames"
>
<template #prefix>
<FilterOutlined />
</template>
</a-input>
</a-auto-complete>
<a-button
type="primary"
html-type="submit"
style="width: 100px"
@click="handleFilterFrames"
:disabled="taskState.task.taskNo === '' || taskState.stop"
>
Filter
</a-button>
</a-input-group>
<a-alert
:message="state.filterError"
:message="taskState.filterError"
type="error"
v-if="state.filterError != null"
v-if="taskState.filterError != null"
/>
<!-- 包数据表 -->
<PacketTable
:columns="state.columns"
:data="state.packetList"
:selectedFrame="state.selectedFrame"
:onSelectedFrame="handleSelectedFrame"
:onScrollBottom="handleScrollBottom"
></PacketTable>
<a-row>
<a-table
class="table"
row-key="number"
:columns="tableColumns"
:loading="tableState.loading"
:data-source="tableState.data"
size="small"
:pagination="false"
:row-class-name="(record:any) => {
return `table-striped-${record.protocol}`
}"
:customRow="
record => {
return {
onClick: () => fnVisible(record),
};
}
"
:scroll="{ x: tableColumns.length * 150, y: '400px' }"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'protocol'">
<!-- <DictTag :options="dict.traceMsgType" :value="record.msgType" /> -->
</template>
</template>
</a-table>
<!-- 帧数据 -->
<a-row
:gutter="16"
style="border: 2px rgb(217 217 217) solid; border-radius: 6px"
v-show="state.selectedFrame == 1"
>
<a-col :lg="12" :md="12" :xs="24" class="tree">
<!-- 帧数据 -->
<DissectionTree
id="root"
:select="handleSelectedTreeEntry"
:select="handleSelectedTree"
:selected="state.selectedTree"
:tree="state.packetFrame.tree"
/>
@@ -474,28 +765,6 @@ onBeforeUnmount(() => {
</template>
<style scoped>
.toolbar {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.toolbar-oper {
flex: 1;
}
.toolbar-info {
text-align: right;
padding-right: 8px;
}
.summary {
display: flex;
flex-direction: column;
}
.summary-item > span:first-child {
font-weight: 600;
margin-right: 6px;
}
.tree {
font-size: 0.8125rem;
line-height: 1.5rem;