03-界面说明

界面说明

整体布局

┌──────────────────────────────────────────────────────────────┐
│  ◆ WebSocket调试助手  v1.0                     ⚫ 未连接     │ ← 头部栏
├────────────┬─────────────────────────────────────────────────┤
│ 模式选择    │  ┌─ 日志输出区 ─────────────────────────────┐  │
│ ○ 客户端   │  │ [10:23:45] [TX] Hello Server!            │  │
│ ○ 服务端   │  │ [10:23:45] [RX] Hello Client!            │  │
│            │  └──────────────────────────────────────────┘  │
│ 连接设置    │  ┌─ 状态栏 ─────────────────────────────────┐  │
│ URL        │  │ TX: 128 │ RX: 256    [重置] [清除] [导出]│  │
│ (服务端:   │  └──────────────────────────────────────────┘  │
│  端口      │───────────────────────────────────────────────│
│  路径)     │  发送区                                         │
│ 编码       │  ┌──────────────────────────────────────────┐  │
│ [连接/监听] │  │ 发送编辑框                                │  │
│            │  └──────────────────────────────────────────┘  │
│ 客户端列表  │  ○ Text  ○ Binary                            │
│ (服务端)   │  ☐ Hex发送 ☐ Enter发送 [行尾▼] [发送]      │
│            │  ☐ 自动发送 间隔 [1000] ms                   │
│ 显示设置    │                                               │
│ 数据可视化  │                                               │
└────────────┴─────────────────────────────────────────────────┘

模式选择

模式	说明
WebSocket 客户端	主动连接 WebSocket 服务器，通过 URL 指定地址
WebSocket 服务端	监听本地端口，接受 WebSocket 客户端连接

连接设置

字段	说明	示例
URL	完整的 WebSocket URL	`ws://192.168.1.100:8080/chat` `wss://echo.websocket.org`
编码	字符编码	UTF-8（默认）

URL 格式：ws:// 或 wss:// + 主机地址 + : + 端口 + 路径。

服务端模式

字段	说明	示例
端口	监听端口	`9000`
路径	WebSocket 路径	`/ws`
编码	字符编码	UTF-8（默认）

消息类型

类型	说明	发送方式
Text	UTF-8 文本消息	直接输入文本
Binary	二进制字节消息	配合 Hex 发送使用

接收到的消息根据 WebSocket 帧的 opcode 自动区分类型。

日志输出区

特性	说明
字体	Consolas 等宽字体 11pt
TX 颜色	🟡 金色 `#FFD700`
RX 颜色	🟢 青色 `#00FFC8`
SYS 颜色	⚪ 灰色 `#889AA0`
右键菜单	复制选定行 / 复制全部
多选	支持 Shift/Ctrl 批量选择

状态栏

元素	说明
TX: xxx bytes	累计发送字节数
RX: xxx bytes	累计接收字节数
重置计数	清零 TX/RX 计数器
清除日志	清空日志列表
导出	导出日志为 TXT 或 CSV 文件

发送区

控件	说明
发送编辑框	输入要发送的文本或十六进制数据
Hex发送	勾选后将编辑框内容作为十六进制解析发送
Enter发送	勾选后在编辑框中按 Enter 即可发送
行尾	选择发送时追加的换行符：无、`\n`、`\r`、`\r\n`
发送按钮	手动发送数据
自动发送	勾选后按指定间隔自动循环发送
间隔(ms)	自动发送的时间间隔（毫秒）

显示设置

控件	说明
十六进制显示	勾选后日志以十六进制展示（如 `48 65 6C 6C 6F`）
显示时间戳	勾选后每条日志前显示精确时间（格式 `HH:mm:ss.zzz`）
自动滚动	勾选后新日志自动滚动到底部
行间距	调整日志行间距（-10 ~ +10 px）
字号	调整日志字体大小（7 ~ 18 pt）

数据可视化（图表）

左侧 数据可视化 面板用于从 WebSocket 接收数据中实时提取数值并绘图。

启用步骤：
勾选 启用图表
添加数据提取规则（规则名称 + 规则类型 + 表达式）
图表区实时更新

规则类型：

类型	说明	示例表达式
JSON 路径	从 JSON 中提取字段	`temperature` 或 `data.sensor1`
正则表达式	正则匹配提取数值	`temp[:=]\s(\d+\.?\d)`
Modbus 寄存器	从 Modbus 响应提取	`0`（寄存器地址）
布尔	匹配到计为 1	`alarm=1`

图表类型：折线图、平滑曲线、散点图、面积图、柱状图、饼图。

时间窗口：5 秒 ~ 600 秒（10 分钟）可调。