本文档解释了 PageSpy 的整体系统架构，这是一个用于 Web、小程序、ReactNative 和 HarmonyOS 应用的远程调试工具。它概述了主要组件如何相互交互以提供实时调试功能。
有关 React 前端应用程序结构的详细信息，请参阅前端架构；有关基于 Go 的后端服务器的信息，请参阅后端架构；有关各种 SDK 的信息，请参阅 SDK 架构。
系统架构概述
PageSpy 遵循客户端-服务器架构，具有三个主要组件：
- SDKs：集成到目标应用程序中的轻量级客户端库
- 后端服务器：基于 Go 的 WebSocket 服务器，用于中继调试信息
- Web 前端：基于 React 的 DevTools 界面用于调试
组件架构
数据流
通信协议
PageSpy 使用 WebSockets 在组件之间进行实时通信，针对不同类型的调试信息采用结构化消息格式。
| Message Type 消息类型 | Description 描述 | Direction 方向 |
|---|---|---|
| client-info | 客户端平台和浏览器信息 | SDK → Server → 前端 |
| console | 控制台日志和命令 | SDK ↔ Server ↔ 前端 |
| network | 网络请求/响应数据 | SDK → Server → 前端 |
| system | 系统信息 | SDK → Server → 前端 |
| page | DOM 树和位置信息 | SDK → Server → 前端 |
| storage | 存储数据（localStorage，cookies 等） | SDK ↔ Server ↔ 前端 |
| database | indexedDB 数据库操作 | SDK ↔ Server ↔ 前端 |
前端架构
前端是一个 React 应用程序，提供类似于浏览器 DevTools 的调试界面。
组件结构
状态管理
前端使用 Zustand 进行状态管理。主存储库是 useSocketMessageStore ，负责与后端的所有通信：
SocketMessageStore 负责：
- 与后端建立 WebSocket 连接
- 处理来自 SDK 的所有消息类型
- 处理和存储 UI 组件的调试数据
- 将命令发送回目标应用程序
后端架构
后端是一个构建在 page-spy-api 包上的 Go 服务。它处理来自 SDK 和前端的 WebSocket 连接，管理房间并在它们之间中继消息。
后端服务器嵌入前端静态文件并与 WebSocket API 一起提供服务。主服务器实现由 page-spy-api 包提供，主应用程序代码仅配置和初始化服务器。
平台支持
PageSpy 支持广泛的平台和浏览器，利用平台检测来提供相应的功能：
部署架构
PageSpy 可以使用多种方法部署：
部署架构提供了灵活性：
- Docker 部署：完整的解决方案，包括前端和后端
- NPM 包：可用作
@huolala-tech/page-spy-api - 二进制可执行文件：预构建的多平台二进制文件（Windows、macOS、Linux）
摘要
PageSpy 的架构为各种平台提供了全面的远程调试解决方案。关键的架构特性包括：
- 跨平台支持：适用于 web、小程序、HarmonyOS 和 React Native 应用程序
- 实时通信：基于 WebSocket 的消息传递，用于即时调试反馈
- 熟悉的开发者体验：DevTools 界面类似于浏览器开发者工具
- 可扩展设计：插件系统和平台检测，用于专业功能
- 灵活部署：多种部署选项，适用于不同环境
这种架构使开发人员能够使用统一一致的界面跨多个平台调试应用程序，显著改善开发和故障排除工作流程。
