一个基于 Tauri + React 的跨平台消息查看器应用，用于实时监控和查看来自 BC 设备的二进制消息。
- ? 实时消息监控：通过 TCP 连接实时接收 BC 设备消息
- ? 消息可视化：以表格形式展示消息详情（时间、消息ID、发送者、接收者、载荷）
- ? 消息过滤：支持按消息ID、发送者、接收者进行过滤
- ? WebSocket 通信：前后端通过 WebSocket 实现双向实时通信
- ? 现代化 UI：基于 Material-UI 的响应式界面
- ? 自动启动：WebSocket 服务器在应用启动时自动运行
- ? 高性能：基于 Rust 异步运行时，支持高并发消息处理
- React 18 - UI 框架
- TypeScript - 类型安全
- Material-UI (MUI) - UI 组件库
- Vite - 构建工具
- WebSocket API - 实时通信
- Rust - 系统编程语言
- Tauri 2 - 跨平台应用框架
- Tokio - 异步运行时
- tokio-tungstenite - WebSocket 服务器
- serde - 序列化/反序列化
- byteorder - 字节序处理
┌─────────────────────────────────────────────────────────────┐
│ 前端 (React + TypeScript) │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ App.tsx │ │ Toolbar │ │ MessageGrid │ │
│ └──────┬───────┘ └──────┬───────┘ └──────────────┘ │
│ │ │ │
│ └─────────┬───────┘ │
│ │ WebSocket (ws://localhost:8080) │
└───────────────────┼─────────────────────────────────────────┘
│
┌───────────────────┼─────────────────────────────────────────┐
│ │ 后端 (Rust + Tauri) │
│ ┌─────────▼─────────┐ │
│ │ WebSocket Server │ │
│ │ (websocket.rs) │ │
│ └─────────┬─────────┘ │
│ │ │
│ ┌─────────▼─────────┐ │
│ │ BC Communicator │ │
│ │ (dev_comm.rs) │ │
│ └─────────┬─────────┘ │
│ │ TCP │
└───────────────────┼─────────────────────────────────────────┘
│
┌──────────▼──────────┐
│ 外部 BC 设备 │
│ (TCP Server) │
└─────────────────────┘
lib.rs- 应用入口，初始化 WebSocket 服务器websocket.rs- WebSocket 服务器实现，处理前端连接和消息转发dev_comm.rs- BC 设备通信模块，处理 TCP 连接和消息解析models.rs- 数据模型定义（MessageReport, FrontEndCommand 等）utils.rs- 工具函数（消息ID映射、节点名称映射等）app_state.rs- 全局状态管理（WebSocket 和 BC 通信状态）
App.tsx- 主应用组件Toolbar- 工具栏组件，管理 WebSocket 连接和 BC 通信ConfigPanel- 配置面板，提供消息过滤功能MessageGrid- 消息展示组件，使用 MUI DataGrid
前端 → 后端（命令）：
{
"command": "start_recv" | "stop_recv",
"content": "ip:port" // 仅 start_recv 需要
}后端 → 前端（事件）：
{
"event": "msg_updated" | "dev_monitor_started" | "dev_monitor_stopped",
"data": { ... }
}- Node.js >= 18.0.0
- Rust >= 1.70.0
- yarn 或 npm
# 安装前端依赖
yarn install
# 安装 Rust 依赖（首次运行时会自动安装）
# 或手动运行
cd src-tauri
cargo build# 启动开发服务器
yarn tauri dev应用将在开发模式下启动，支持热重载。
# 构建应用
yarn tauri build构建产物位于 src-tauri/target/release/ 目录。
- 运行
yarn tauri dev启动应用 - WebSocket 服务器会自动在
ws://localhost:8080启动 - 前端会自动连接到 WebSocket 服务器
- 在工具栏输入 BC 设备的 IP 地址和端口（例如：
127.0.0.1:8810） - 点击 Start 按钮开始接收消息
- 应用会通过 TCP 连接到 BC 设备并开始接收消息
- 消息会自动显示在消息表格中
- 每条消息包含：
- DateTime: 消息时间戳
- MessageID: 消息ID（十六进制或名称）
- Sender: 发送者节点名称
- Receiver: 接收者节点名称
- Payload: 消息载荷（十六进制格式）
- 点击 Config 按钮打开配置面板
- 选择过滤类型：
- Message ID: 按消息ID过滤
- Sender: 按发送者过滤
- Receiver: 按接收者过滤
- 输入过滤条件，表格会自动更新
点击 Stop 按钮停止接收消息并断开与 BC 设备的连接。
msgViewer/
├── src/ # 前端源代码
│ ├── App.tsx # 主应用组件
│ ├── App.css # 样式文件
│ └── main.tsx # 入口文件
├── src-tauri/ # Tauri 后端
│ ├── src/
│ │ ├── lib.rs # 应用入口
│ │ ├── websocket.rs # WebSocket 服务器
│ │ ├── dev_comm.rs # BC 通信模块
│ │ ├── models.rs # 数据模型
│ │ ├── utils.rs # 工具函数
│ │ └── app_state.rs # 状态管理
│ ├── Cargo.toml # Rust 依赖配置
│ └── tauri.conf.json # Tauri 配置
├── package.json # Node.js 依赖配置
├── vite.config.ts # Vite 配置
└── README.md # 项目文档
- 在
src-tauri/src/lib.rs中添加消息ID常量：
const MSG_NEW_MESSAGE: u16 = 0xXXXX;- 在
src-tauri/src/utils.rs的get_msg_name函数中添加映射：
MSG_NEW_MESSAGE => "MSG_NEW_MESSAGE",- 在后端发送事件：
if let Ok(msg) = serde_json::to_string(&json!({
"event": "new_event",
"data": { ... }
})) {
// 通过 WebSocket 发送
}- 在前端处理事件：
if (wsMessage.event === "new_event") {
// 处理新事件
}- 前端日志：使用
@tauri-apps/plugin-log进行日志记录 - 后端日志：使用
logcrate，日志级别在lib.rs中配置 - WebSocket 调试：使用浏览器开发者工具的网络标签页
- Rust: 遵循 Rust 官方代码规范，使用
rustfmt格式化 - TypeScript: 使用 ESLint 和 Prettier 进行代码检查和格式化
- 提交信息: 使用约定式提交格式（Conventional Commits）
[起始标志 0x1E][长度(2字节)][消息ID(2字节)][会话ID(1字节)]
[源ID(1字节)][目标ID(1字节)][时间戳秒(4字节)][时间戳微秒(4字节)]
[序列号(2字节)][载荷...][结束标志 0xE1]
- 所有多字节字段使用 小端字节序（Little Endian）
| 字段 | 类型 | 说明 |
|---|---|---|
| sof | u8 | 起始标志 (0x1E) |
| len | u16 | 消息总长度 |
| msg_id | u16 | 消息ID |
| ses_id | u8 | 会话ID |
| src_id | u8 | 源节点ID |
| tgt_id | u8 | 目标节点ID |
| ts_sec | u32 | Unix 时间戳（秒） |
| ts_us | u32 | Unix 时间戳（微秒） |
| seq_num | u16 | 序列号 |
MSG_SCM_MCM_AXIS_DATAOUTPUT_SET(0x1020)MSG_SCM_MCM_MOUNT_SET(0x1021)MSG_SCM_MCM_INIT_REQ(0x1023)MSG_SCM_MCM_SURGERY_SET(0x1029)MSG_SCM_MCM_BU_SET(0x102F)MSG_MCM_STATUS_NOTIFY(0x1200)MSG_MC_STATUS_REQ(0x1240)MSG_MC_STATUS_RSP(0x1241)MSG_MC_KSYNC_CTRL_REQ(0x1246)MSG_MC_KSYNC_CTRL_RSP(0x1247)MSG_MC_STATUS_NTF(0x1248)MSG_MC_MOTION_CTRL_REQ(0x1249)MSG_MC_MOTION_CTRL_RSP(0x124A)MSG_MC_MOUNT_CTRL_REQ(0x124B)MSG_MC_MOUNT_CTRL_RSP(0x124C)MSG_MC_DEV_CTRL_REQ(0x124D)MSG_MC_DEV_CTRL_RSP(0x124E)
问题: 前端无法连接到 WebSocket 服务器
解决方案:
- 确认后端已成功启动（查看控制台日志）
- 检查端口 8080 是否被占用
- 确认防火墙未阻止连接
问题: 无法连接到 BC 设备
解决方案:
- 检查 IP 地址和端口是否正确
- 确认 BC 设备正在运行并监听指定端口
- 检查网络连接
- 查看后端日志获取详细错误信息
问题: 消息格式不正确或显示乱码
解决方案:
- 检查消息协议是否匹配
- 确认字节序设置正确（小端）
- 查看日志中的原始消息数据
问题: 消息接收速度慢或界面卡顿
解决方案:
- 使用消息过滤减少显示的消息数量
- 限制消息历史记录数量（当前限制为 1000 条）
- 检查系统资源使用情况
本项目采用 MIT 许可证。
欢迎提交 Issue 和 Pull Request！
注意: 本项目仍在积极开发中，API 可能会发生变化。