WebSocket 实战：在抓包工具里构建实时通道

1. Hook 结构与状态

export const usePacketCapture = () => {
  const tableData = ref<CaptureDataItem[]>([]);
  const ws = ref<WebSocket | null>(null);
  ...
};

2. 建立 WebSocket 连接

const buildWebSocket = () => {
  const websocket = new WebSocket(`ws://...`);
  ws.value = websocket;
  websocket.onmessage = event => {
    const packet = JSON.parse(event.data);
    tableData.value.push(packet);
  };
};

实操要点：

数据处理：收到消息后解析 JSON、压入 tableData。如需截断数据量，可加上长度上限。

---

3. 启停抓包 API

const fetchStartCapture = async () => { ... startCapture() ... };
const fetchStopCapture = async () => { ... stopCapture() ... };

• WebSocket 只负责推送，真正开始/停止还是通过服务端接口。

4. 生命周期与资源回收

onMounted(async () => await buildWebSocket());
onBeforeUnmount(async () => {
  if (ws.value && [WebSocket.OPEN, WebSocket.CONNECTING].includes(ws.value.readyState)) {
    ws.value.close();
  }
  ws.value = null;
  await fetchStopCapture(false);
});

1. 挂载即连接：onMounted 调用 buildWebSocket，必要时可在之后立即执行 handleStartCapture。
2. 离开即清理：onBeforeUnmount 里关闭连接并静默停止抓包，防止资源泄漏，并进行停止抓包请求。

---

5. 改进方向

• 状态可视化：维护 connectionStatus，让用户知道“连接中/已断开”。
• 批量入库：抓包量大时用节流或批处理，减少 tableData 的频繁更新。
• 类型校验：为 WebSocket 消息定义 TypeScript 接口，提前过滤异常字段。
• 安全与协议：部署到公网使用 wss://，并附带 token 或自定义头做鉴权。

6. 完整流程

1. 组件挂载 → buildWebSocket 建立连接。
2. 用户点击“开始抓包” → 调用 handleStartCapture，后端开始推送。
3. WebSocket onmessage → 格式化数据，更新 tableData，界面实时展示。
4. 用户点击“停止抓包”或离开页面 → handleStopCapture + onBeforeUnmount 一并清理。