perf: wg优化代码封装hooks

public/wiregasm/worker.js

@@ -1,7 +1,7 @@
 // load the Wiregasm library
 importScripts(
-  '/wiregasm/wiregasm_new.js',
+  '/wiregasm/wiregasm_new.js', // self-compilation es5
-  '/wiregasm/wiregasm.js'
+  '/wiregasm/wiregasm_load.js'
   // 'https://cdn.jsdelivr.net/npm/@goodtools/wiregasm/dist/wiregasm.js'
 );
 

src/views/traceManage/tshark/hooks/usePCAP.ts

@@ -0,0 +1,317 @@
+import { onBeforeUnmount, onMounted, reactive } from 'vue';
+import { scriptUrl } from '@/assets/js/wiregasm_worker';
+import { WK, OptionsType } from '@/plugins/wk-worker';
+const wk = new WK();
+
+export const NO_SELECTION = { id: '', idx: 0, start: 0, length: 0 };
+
+type StateType = {
+  /**初始化 */
+  initialized: boolean;
+  /**pcap信息 */
+  summary: {
+    filename: string;
+    file_type: string;
+    file_length: number;
+    file_encap_type: string;
+    packet_count: number;
+    start_time: number;
+    stop_time: number;
+    elapsed_time: number;
+  };
+  /**字段 */
+  columns: string[];
+  /**过滤条件 */
+  filter: string;
+  /**过滤条件错误信息 */
+  filterError: string | null;
+  /**当前过滤条件 */
+  currentFilter: string;
+  /**当前选中的帧编号 */
+  selectedFrame: number;
+  /**当前选中的帧数据 */
+  selectedPacket: { tree: any[]; data_sources: any[] };
+  /**pcap包帧数据 */
+  packetFrameData: Map<string, any> | null;
+  /**当前选中的帧数据-空占位 */
+  selectedTreeEntry: typeof NO_SELECTION;
+  /**选择帧的Dump数据标签 */
+  selectedDataSourceIndex: number;
+  /**处理完成状态 */
+  finishedProcessing: boolean;
+  /**pcap包帧数，匹配帧数 */
+  totalFrames: number;
+  /**pcap包帧数据 */
+  packetFrames: any[];
+  /**加载帧数 */
+  nextPageSize: number;
+  /**加载页数 */
+  nextPageNum: number;
+  /**加载下一页 */
+  nextPageLoad: boolean;
+};
+
+export function usePCAP() {
+  const state = reactive<StateType>({
+    initialized: false,
+    summary: {
+      filename: '',
+      file_type: 'Wireshark/tcpdump/... - pcap',
+      file_length: 0,
+      file_encap_type: 'Ethernet',
+      packet_count: 0,
+      start_time: 0,
+      stop_time: 0,
+      elapsed_time: 0,
+    },
+    columns: [],
+    filter: '',
+    filterError: null,
+    currentFilter: '',
+    selectedFrame: 1,
+    /**当前选中的帧数据 */
+    selectedPacket: { tree: [], data_sources: [] },
+    packetFrameData: null, // 注意：Map 需要额外处理
+    selectedTreeEntry: NO_SELECTION, // NO_SELECTION 需要定义
+    /**选择帧的Dump数据标签 */
+    selectedDataSourceIndex: 0,
+    /**处理完成状态 */
+    finishedProcessing: false,
+    totalFrames: 0,
+    packetFrames: [],
+    nextPageNum: 1,
+    nextPageSize: 40,
+    nextPageLoad: false,
+  });
+
+  // 清除帧数据和报文信息状态
+  function handleStateReset() {
+    // 加载pcap包的数据
+    state.nextPageNum = 1;
+    // 选择帧的数据
+    state.selectedFrame = 0;
+    state.selectedPacket = { tree: [], data_sources: [] };
+    state.packetFrameData = null;
+    state.selectedTreeEntry = NO_SELECTION;
+    state.selectedDataSourceIndex = 0;
+  }
+
+  /**解析帧数据为简单结构 */
+  function parseFrameData(id: string, node: Record<string, any>) {
+    let map = new Map();
+
+    if (node.tree && node.tree.length > 0) {
+      for (let i = 0; i < node.tree.length; i++) {
+        const subMap = parseFrameData(`${id}-${i}`, node.tree[i]);
+        subMap.forEach((value, key) => {
+          map.set(key, value);
+        });
+      }
+    } else if (node.length > 0) {
+      map.set(id, {
+        id: id,
+        idx: node.data_source_idx,
+        start: node.start,
+        length: node.length,
+      });
+    }
+
+    return map;
+  }
+
+  /**帧数据点击选中 */
+  function handleSelectedTreeEntry(e: any) {
+    console.log('fnSelectedTreeEntry', e);
+    state.selectedTreeEntry = e;
+  }
+  /**报文数据点击选中 */
+  function handleSelectedFindSelection(src_idx: number, pos: number) {
+    console.log('fnSelectedFindSelection', pos);
+    if (state.packetFrameData == null) return;
+    // find the smallest one
+    let current = null;
+    for (let [k, pp] of state.packetFrameData) {
+      if (pp.idx !== src_idx) continue;
+
+      if (pos >= pp.start && pos <= pp.start + pp.length) {
+        if (
+          current != null &&
+          state.packetFrameData.get(current).length > pp.length
+        ) {
+          current = k;
+        } else {
+          current = k;
+        }
+      }
+    }
+    if (current != null) {
+      state.selectedTreeEntry = state.packetFrameData.get(current);
+    }
+  }
+  /**包数据表点击选中 */
+  function handleSelectedFrame(no: number) {
+    console.log('fnSelectedFrame', no, state.totalFrames);
+    state.selectedFrame = no;
+    wk.send({ type: 'select', number: state.selectedFrame });
+  }
+  /**包数据表滚动底部加载 */
+  function handleScrollBottom() {
+    const totalFetched = state.packetFrames.length;
+    console.log('fnScrollBottom', totalFetched);
+    if (!state.nextPageLoad && totalFetched < state.totalFrames) {
+      state.nextPageLoad = true;
+      state.nextPageNum++;
+      loaldFrames(state.filter, state.nextPageNum);
+    }
+  }
+  /**包数据表过滤 */
+  function handleFilterFrames() {
+    console.log('fnFilterFinish', state.filter);
+    wk.send({ type: 'check-filter', filter: state.filter });
+  }
+  /**包数据表加载 */
+  function loaldFrames(filter: string, page: number = 1) {
+    if (!(state.initialized && state.finishedProcessing)) return;
+    const limit = state.nextPageSize;
+    wk.send({
+      type: 'frames',
+      filter: filter,
+      skip: (page - 1) * limit,
+      limit: limit,
+    });
+  }
+
+  /**加载包文件 */
+  function handleLoadFile(file: File | Blob) {
+    state.summary = {
+      filename: '',
+      file_type: 'Wireshark/tcpdump/... - pcap',
+      file_length: 0,
+      file_encap_type: 'Ethernet',
+      packet_count: 0,
+      start_time: 0,
+      stop_time: 0,
+      elapsed_time: 0,
+    };
+    state.finishedProcessing = false; 
+    
+    wk.send({ type: 'process', file: file });
+  }
+
+  /**本地示例文件 */
+  async function handleLoadExample() {
+    const name = 'test_ethernet.pcap';
+    const res = await fetch('/wiregasm/test_ethernet.pcap');
+    const body = await res.arrayBuffer();
+
+    state.summary = {
+      filename: '',
+      file_type: 'Wireshark/tcpdump/... - pcap',
+      file_length: 0,
+      file_encap_type: 'Ethernet',
+      packet_count: 0,
+      start_time: 0,
+      stop_time: 0,
+      elapsed_time: 0,
+    };
+    state.finishedProcessing = false;
+
+    wk.send({ type: 'process-data', name: name, data: body });
+  }
+
+  /**接收数据后回调 */
+  function wkMessage(res: Record<string, any>) {
+    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 'columns':
+        state.columns = res.data;
+        break;
+      case 'frames':
+        // console.log(res.data);
+        const { matched, frames } = res.data;
+        state.totalFrames = matched;
+
+        if (state.nextPageNum == 1) {
+          state.packetFrames = frames;
+          // 有匹配的选择第一个
+          if (frames.length > 0) {
+            state.selectedFrame = frames[0].number;
+            handleSelectedFrame(state.selectedFrame);
+          }
+        } else {
+          state.packetFrames = state.packetFrames.concat(frames);
+          state.nextPageLoad = false;
+        }
+        break;
+      case 'selected':
+        state.selectedPacket = res.data;
+        state.packetFrameData = parseFrameData('root', res.data);
+        state.selectedTreeEntry = NO_SELECTION;
+        state.selectedDataSourceIndex = 0;
+        break;
+      case 'processed':
+        // setStatus(`Error: non-zero return code (${e.data.code})`);
+        state.finishedProcessing = true;
+        if (res.data.code === 0) {
+          state.summary = res.data.summary;
+        }
+
+        // 加载数据
+        handleStateReset();
+        loaldFrames(state.filter);
+        break;
+      case 'filter':
+        const filterRes = res.data;
+        if (filterRes.ok) {
+          state.currentFilter = state.filter;
+          state.filterError = null;
+          // 加载数据
+          handleStateReset();
+          loaldFrames(state.filter);
+        } else {
+          state.filterError = filterRes.error;
+        }
+        break;
+      default:
+        console.warn(res);
+        break;
+    }
+  }
+
+  onMounted(() => {
+    // 建立链接
+    const options: OptionsType = {
+      url: scriptUrl,
+      onmessage: wkMessage,
+      onerror: (ev: any) => {
+        console.error(ev);
+      },
+    };
+    wk.connect(options);
+  });
+
+  onBeforeUnmount(() => {
+    wk.close();
+  });
+
+  return {
+    state,
+    handleSelectedTreeEntry,
+    handleSelectedFindSelection,
+    handleSelectedFrame,
+    handleScrollBottom,
+    handleFilterFrames,
+    handleLoadExample,
+    handleLoadFile,
+  };
+}
+export default usePCAP;

src/views/traceManage/tshark/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { reactive, onMounted } from 'vue';
 import { message, Upload } from 'ant-design-vue/lib';
 import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
 import { FileType } from 'ant-design-vue/lib/upload/interface';
@@ -7,210 +6,20 @@ import { PageContainer } from 'antdv-pro-layout';
 import DissectionTree from './components/DissectionTree.vue';
 import DissectionDump from './components/DissectionDump.vue';
 import PacketTable from './components/PacketTable.vue';
-import { scriptUrl } from '@/assets/js/wiregasm_worker';
+import { usePCAP, NO_SELECTION } from './hooks/usePCAP';
 import { parseSizeFromFile } from '@/utils/parse-utils';
-import { WK, OptionsType } from '@/plugins/wk-worker';
 import useI18n from '@/hooks/useI18n';
 const { t } = useI18n();
-const wk = new WK();
+const {
-
+  state,
-const NO_SELECTION = { id: '', idx: 0, start: 0, length: 0 };
+  handleSelectedTreeEntry,
-
+  handleSelectedFindSelection,
-type StateType = {
+  handleSelectedFrame,
-  /**初始化 */
+  handleScrollBottom,
-  initialized: boolean;
+  handleFilterFrames,
-  /**pcap信息 */
+  handleLoadExample,
-  summary: {
+  handleLoadFile,
-    filename: string;
+} = usePCAP();
-    file_type: string;
-    file_length: number;
-    file_encap_type: string;
-    packet_count: number;
-    start_time: number;
-    stop_time: number;
-    elapsed_time: number;
-  };
-  /**字段 */
-  columns: string[];
-  /**过滤条件 */
-  filter: string;
-  /**过滤条件错误信息 */
-  filterError: string | null;
-  /**当前过滤条件 */
-  currentFilter: string;
-  /**当前选中的帧编号 */
-  selectedFrame: number;
-  /**当前选中的帧数据 */
-  selectedPacket: { tree: any[]; data_sources: any[] };
-  /**pcap包帧数据 */
-  packetFrameData: Map<string, any> | null;
-  /**当前选中的帧数据-空占位 */
-  selectedTreeEntry: typeof NO_SELECTION;
-  /**选择帧的Dump数据标签 */
-  selectedDataSourceIndex: number;
-  /**处理完成状态 */
-  finishedProcessing: boolean;
-  /**pcap包帧数，匹配帧数 */
-  totalFrames: number;
-  /**pcap包帧数据 */
-  packetFrames: any[];
-  /**加载帧数 */
-  nextPageSize: number;
-  /**加载页数 */
-  nextPageNum: number;
-  /**加载下一页 */
-  nextPageLoad: boolean;
-};
-
-const state = reactive<StateType>({
-  initialized: false,
-  summary: {
-    filename: '',
-    file_type: 'Wireshark/tcpdump/... - pcap',
-    file_length: 0,
-    file_encap_type: 'Ethernet',
-    packet_count: 0,
-    start_time: 0,
-    stop_time: 0,
-    elapsed_time: 0,
-  },
-  columns: [],
-  filter: '',
-  filterError: null,
-  currentFilter: '',
-  selectedFrame: 1,
-  /**当前选中的帧数据 */
-  selectedPacket: { tree: [], data_sources: [] },
-  packetFrameData: null, // 注意：Map 需要额外处理
-  selectedTreeEntry: NO_SELECTION, // NO_SELECTION 需要定义
-  /**选择帧的Dump数据标签 */
-  selectedDataSourceIndex: 0,
-  /**处理完成状态 */
-  finishedProcessing: false,
-  totalFrames: 0,
-  packetFrames: [],
-  nextPageNum: 1,
-  nextPageSize: 40,
-  nextPageLoad: false,
-});
-
-// 清除帧数据和报文信息状态
-function fnStateReset() {
-  // 加载pcap包的数据
-  state.nextPageNum = 1;
-  // 选择帧的数据
-  state.selectedFrame = 0;
-  state.selectedPacket = { tree: [], data_sources: [] };
-  state.packetFrameData = null;
-  state.selectedTreeEntry = NO_SELECTION;
-  state.selectedDataSourceIndex = 0;
-}
-
-/**解析帧数据为简单结构 */
-function parseFrameData(id: string, node: Record<string, any>) {
-  let map = new Map();
-
-  if (node.tree && node.tree.length > 0) {
-    for (let i = 0; i < node.tree.length; i++) {
-      const subMap = parseFrameData(`${id}-${i}`, node.tree[i]);
-      subMap.forEach((value, key) => {
-        map.set(key, value);
-      });
-    }
-  } else if (node.length > 0) {
-    map.set(id, {
-      id: id,
-      idx: node.data_source_idx,
-      start: node.start,
-      length: node.length,
-    });
-  }
-
-  return map;
-}
-
-/**帧数据点击选中 */
-function fnSelectedTreeEntry(e: any) {
-  console.log('fnSelectedTreeEntry', e);
-  state.selectedTreeEntry = e;
-}
-/**报文数据点击选中 */
-function fnSelectedFindSelection(src_idx: number, pos: number) {
-  console.log('fnSelectedFindSelection', pos);
-  if (state.packetFrameData == null) return;
-  // find the smallest one
-  let current = null;
-  for (let [k, pp] of state.packetFrameData) {
-    if (pp.idx !== src_idx) continue;
-
-    if (pos >= pp.start && pos <= pp.start + pp.length) {
-      if (
-        current != null &&
-        state.packetFrameData.get(current).length > pp.length
-      ) {
-        current = k;
-      } else {
-        current = k;
-      }
-    }
-  }
-  if (current != null) {
-    state.selectedTreeEntry = state.packetFrameData.get(current);
-  }
-}
-/**包数据表点击选中 */
-function fnSelectedFrame(no: number) {
-  console.log('fnSelectedFrame', no, state.totalFrames);
-  state.selectedFrame = no;
-  wk.send({ type: 'select', number: state.selectedFrame });
-}
-/**包数据表滚动底部加载 */
-function fnScrollBottom() {
-  const totalFetched = state.packetFrames.length;
-  console.log('fnScrollBottom', totalFetched);
-  if (!state.nextPageLoad && totalFetched < state.totalFrames) {
-    state.nextPageLoad = true;
-    state.nextPageNum++;
-    fnLoaldFrames(state.filter, state.nextPageNum);
-  }
-}
-/**包数据表过滤 */
-function fnFilterFrames() {
-  console.log('fnFilterFinish', state.filter);
-  wk.send({ type: 'check-filter', filter: state.filter });
-}
-/**包数据表记载 */
-function fnLoaldFrames(filter: string, page: number = 1) {
-  if (!(state.initialized && state.finishedProcessing)) return;
-  const limit = state.nextPageSize;
-  wk.send({
-    type: 'frames',
-    filter: filter,
-    skip: (page - 1) * limit,
-    limit: limit,
-  });
-}
-
-/**本地示例文件 */
-async function fnLoadExample() {
-  const name = 'test_ethernet.pcap';
-  const res = await fetch('/wiregasm/test_ethernet.pcap');
-  const body = await res.arrayBuffer();
-
-  state.summary = {
-    filename: '',
-    file_type: 'Wireshark/tcpdump/... - pcap',
-    file_length: 0,
-    file_encap_type: 'Ethernet',
-    packet_count: 0,
-    start_time: 0,
-    stop_time: 0,
-    elapsed_time: 0,
-  };
-  state.finishedProcessing = false;
-
-  wk.send({ type: 'process-data', name: name, data: body });
-}
 
 /**上传前检查或转换压缩 */
 function fnBeforeUpload(file: FileType) {
@@ -229,100 +38,8 @@ function fnBeforeUpload(file: FileType) {
 
 /**表单上传文件 */
 function fnUpload(up: UploadRequestOption) {
-  state.summary = {
+  handleLoadFile(up.file as File);
-    filename: '',
-    file_type: 'Wireshark/tcpdump/... - pcap',
-    file_length: 0,
-    file_encap_type: 'Ethernet',
-    packet_count: 0,
-    start_time: 0,
-    stop_time: 0,
-    elapsed_time: 0,
-  };
-  state.finishedProcessing = false;
-
-  wk.send({ type: 'process', file: up.file });
 }
-
-/**接收数据后回调 */
-function wkMessage(res: Record<string, any>) {
-  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 'columns':
-      state.columns = res.data;
-      break;
-    case 'frames':
-      // console.log(res.data);
-      const { matched, frames } = res.data;
-      state.totalFrames = matched;
-
-      if (state.nextPageNum == 1) {
-        state.packetFrames = frames;
-        // 有匹配的选择第一个
-        if (frames.length > 0) {
-          state.selectedFrame = frames[0].number;
-          fnSelectedFrame(state.selectedFrame);
-        }
-      } else {
-        state.packetFrames = state.packetFrames.concat(frames);
-        state.nextPageLoad = false;
-      }
-      break;
-    case 'selected':
-      state.selectedPacket = res.data;
-      state.packetFrameData = parseFrameData('root', res.data);
-      state.selectedTreeEntry = NO_SELECTION;
-      state.selectedDataSourceIndex = 0;
-      break;
-    case 'processed':
-      // setStatus(`Error: non-zero return code (${e.data.code})`);
-      state.finishedProcessing = true;
-      if (res.data.code === 0) {
-        state.summary = res.data.summary;
-      }
-
-      // 加载数据
-      fnStateReset();
-      fnLoaldFrames(state.filter);
-      break;
-    case 'filter':
-      const filterRes = res.data;
-      if (filterRes.ok) {
-        state.currentFilter = state.filter;
-        state.filterError = null;
-        // 加载数据
-        fnStateReset();
-        fnLoaldFrames(state.filter);
-      } else {
-        state.filterError = filterRes.error;
-      }
-      break;
-    default:
-      console.log(res);
-      break;
-  }
-}
-
-onMounted(() => {
-  // 建立链接
-  const options: OptionsType = {
-    url: scriptUrl,
-    onmessage: wkMessage,
-    onerror: (ev: any) => {
-      console.error(ev);
-    },
-  };
-  wk.connect(options);
-});
 </script>
 
 <template>
@@ -345,7 +62,7 @@ onMounted(() => {
           >
             <a-button type="primary"> Upload </a-button>
           </a-upload>
-          <a-button @click="fnLoadExample">Example</a-button>
+          <a-button @click="handleLoadExample()">Example</a-button>
         </a-space>
 
         <div class="toolbar-info">
@@ -396,7 +113,7 @@ onMounted(() => {
           placeholder="display filter, example: tcp"
           :allow-clear="true"
           style="width: calc(100% - 100px)"
-          @pressEnter="fnFilterFrames"
+          @pressEnter="handleFilterFrames"
         >
           <template #prefix>
             <FilterOutlined />
@@ -406,7 +123,7 @@ onMounted(() => {
           type="primary"
           html-type="submit"
           style="width: 100px"
-          @click="fnFilterFrames"
+          @click="handleFilterFrames"
         >
           Filter
         </a-button>
@@ -422,8 +139,8 @@ onMounted(() => {
         :columns="state.columns"
         :data="state.packetFrames"
         :selectedFrame="state.selectedFrame"
-        :onSelectedFrame="fnSelectedFrame"
+        :onSelectedFrame="handleSelectedFrame"
-        :onScrollBottom="fnScrollBottom"
+        :onScrollBottom="handleScrollBottom"
       ></PacketTable>
 
       <a-row :gutter="20">
@@ -431,7 +148,7 @@ onMounted(() => {
           <!-- 帧数据 -->
           <DissectionTree
             id="root"
-            :select="fnSelectedTreeEntry"
+            :select="handleSelectedTreeEntry"
             :selected="state.selectedTreeEntry"
             :tree="state.selectedPacket.tree"
           />
@@ -451,7 +168,7 @@ onMounted(() => {
             >
               <DissectionDump
                 :base64="v.data"
-                :select="(pos:number)=>fnSelectedFindSelection(idx, pos)"
+                :select="(pos:number)=>handleSelectedFindSelection(idx, pos)"
                 :selected="
                   idx === state.selectedTreeEntry.idx
                     ? state.selectedTreeEntry