frost-mqtt-client

一个使用 AI 开发的多功能 MQTT 桌面客户端，基于 Electron + Vue 3 + Naive UI 构建。

功能特性

• 多服务器管理：支持添加、编辑、删除多个 MQTT 服务器配置，数据持久化到本地。
• 灵活连接：支持 mqtt://、mqtts://、ws://、wss:// 多种协议，可配置用户名、密码、客户端 ID、Keep Alive、Clean Session 等。
• 主题订阅：支持 QoS 0/1/2 多级订阅，通配符主题（如 sensor/+/temperature），可单个或批量订阅/取消订阅。
• 消息发布：向指定主题发布消息，支持设置 QoS 和 Retain 标志，内置 JSON 格式化。
• 消息中心：实时显示接收和发送的消息，支持按主题过滤、清空日志，自动 JSON 美化。
• 仪表盘概览：展示服务器总数、连接数、订阅主题数、消息总数等关键指标，以及当前服务器状态。
• 本地持久化：服务器配置、订阅主题、消息记录、发布历史均自动保存到本地用户数据目录。

技术栈

• Electron
• Vue 3
• Vite
• electron-vite
• Naive UI
• MQTT.js

项目结构

frost-mqtt-client/
├── app/                      # Electron 应用源码
│   ├── src/
│   │   ├── main/             # 主进程
│   │   │   ├── index.js      # 应用入口
│   │   │   ├── ipc-handlers.js # IPC 通信处理
│   │   │   └── mqtt-manager.js # MQTT 连接与数据管理
│   │   ├── preload/          # 预加载脚本
│   │   └── renderer/         # 渲染进程
│   │       └── src/
│   │           ├── components/ # 公共组件
│   │           ├── stores/     # Pinia 状态管理
│   │           ├── views/      # 页面视图
│   │           └── App.vue     # 根组件
│   ├── package.json
│   └── electron.vite.config.mjs
├── design/                   # 设计稿页面
└── README.md

环境要求

• Node.js 18+
• pnpm 8+

安装依赖

$ cd app
$ pnpm install

开发运行

$ cd app
$ pnpm dev

构建打包

$ cd app

# Windows
$ pnpm build:win

# macOS
$ pnpm build:mac

# Linux
$ pnpm build:linux

打包后的安装包会输出到 app/dist 目录。

默认配置

首次启动时，应用会自动创建一个示例服务器：

• 名称：EMQX 公共测试
• 地址：broker.emqx.io
• 端口：1883
• 协议：mqtt

你也可以在左侧服务器列表中点击「添加服务器」按钮，配置自己的 MQTT Broker。

使用说明

1. 在左侧边栏选择或添加 MQTT 服务器。
2. 在「仪表盘」页面点击「连接服务器」。
3. 切换到「主题订阅」页面，添加并订阅感兴趣的主题。
4. 在「消息中心」页面可发布消息并实时查看收发日志。
5. 所有配置和消息记录会自动保存，下次打开即可继续使用。

数据存储

应用数据（服务器配置、订阅主题、消息记录等）存储在系统的用户数据目录下：

• Windows：%APPDATA%\frost-mqtt-client\frost-mqtt-data.json
• macOS：~/Library/Application Support/frost-mqtt-client/frost-mqtt-data.json
• Linux：~/.config/frost-mqtt-client/frost-mqtt-data.json