03-界面说明

界面说明

整体布局

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

模式选择

顶部三个单选按钮切换工作模式。

模式	图标	行为
TCP 客户端	🌐	主动连接远程 TCP 服务器
TCP 服务端	🌐	监听本地端口，接受客户端连接
UDP	🌐	绑定本地端口，收发无连接数据报

切换模式时，当前连接自动断开。

连接设置

字段根据所选模式动态变化：

字段	TCP 客户端	TCP 服务端	UDP
远程地址	✅ 必填	❌ 不显示	✅ 必填
端口	✅ 目标端口	✅ 监听端口	✅ 目标端口
本地端口	❌ 不显示	❌ 不显示	✅ 绑定端口
编码	✅	✅	✅

远程地址

支持 IP 地址（如 192.168.1.100）和域名（如 example.com）。域名会自动解析。

端口

取值范围 1-65535。常用端口需管理员权限（如 80、443）。

客户端列表（TCP 服务端）

服务端模式下，左侧显示当前已连接的客户端：

功能	说明
列表	显示客户端 IP:Port
断开选中	选中某个客户端后点击，踢出该连接

日志输出区

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

每条日志格式为：

[HH:mm:ss.zzz] [TX] 消息内容
[HH:mm:ss.zzz] [RX] 消息内容
[HH:mm:ss.zzz] [SYS] 系统消息

状态栏

元素	说明
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）

数据可视化（图表）

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

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

规则类型：

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

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

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