Web端配置与启动

Web控制端位于仓库的 Smart-Home-MQTT-Control 目录下，是一个基于 Vue 的前端项目

1. 进入Web目录

1

cd Smart-Home-MQTT-Control

2. 安装依赖

使用 npm 或 yarn 安装项目所需的所有依赖库。

1
2
3
4
5

# 使用 npm
npm install

# 或者使用 yarn
yarn install

3. 配置MQTT服务器信息

打开 src/component/MqttDemo.vue 文件，找到MQTT连接配置部分（大概在282行左右）
根据您的实际情况修改 options 对象中的服务器地址、端口、用户名和密码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// src/component/MqttDemo.vue

const connection = reactive({
  protocol: "ws",
  host: "输入你的ip地址",
  port: 8083,         // 使用WebSocket协议连接，端口一般为8083
  clientId: "emqx_vue3_" + Math.random().toString(16).substring(2, 8), // 生成随机客户端id
  username: "test",   // 用户名
  password: "123456", // 密码
  clean: true,
  connectTimeout: 30 * 1000,
  reconnectPeriod: 4000,
});

// ...

注意: Web端通常通过WebSocket连接MQTT服务器，请确保端口号正确。

4. 启动开发服务器

配置完成后，运行以下命令启动本地开发服务器：

1
2
3
4
5

# 使用 npm
npm run serve

# 或者使用 yarn
yarn serve

命令执行成功后，您会在终端看到类似以下的输出：

1
2
3

App running at:
- Local:   http://localhost:5174/
- Network: http://192.168.x.x:5174/

在浏览器中打开http://localhost:5174，即可访问Web控制端界面。如果一切正常，它应该能与您的嵌入式设备进行实时通信。