109 lines
3.5 KiB
Markdown
109 lines
3.5 KiB
Markdown
# 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](https://www.electronjs.org/)
|
||
- [Vue 3](https://vuejs.org/)
|
||
- [Vite](https://vitejs.dev/)
|
||
- [electron-vite](https://electron-vite.org/)
|
||
- [Naive UI](https://www.naiveui.com/)
|
||
- [MQTT.js](https://github.com/mqttjs/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](https://nodejs.org/) 18+
|
||
- [pnpm](https://pnpm.io/) 8+
|
||
|
||
## 安装依赖
|
||
|
||
```bash
|
||
$ cd app
|
||
$ pnpm install
|
||
```
|
||
|
||
## 开发运行
|
||
|
||
```bash
|
||
$ cd app
|
||
$ pnpm dev
|
||
```
|
||
|
||
## 构建打包
|
||
|
||
```bash
|
||
$ 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`
|