前言

本项目通过一个响应式Web物联网管理插件连接EMQ X服务器，网页端使用相应Topic发布控制消息，Wemos连接上EMQ X服务器，订阅相应Topic后，即可收到该Topic发布的控制信息。当点击Led控制界面的按钮时，就会执行相应的开关RGB灯的操作。

软件

软件
Arduino IDE
EMQ X
Adobe Dreamweaver 2021

硬件

硬件	数量
Wemos	1
RGB灯	1
USB转串口数据线	1
杜邦线	若干

硬件连线

Wemos	RGB灯
D3	R
D4	G
D5	B
GND	GND

项目过程

1、EMQ X

①在浏览器输入{你服务器的IP:18083},按键盘上的enter键进入 EMQ X Dashboard登录界面，登录后在其左侧菜单栏中选中工具-WebSocket，填写 “连接配置” 的参数：
②订阅设备发布的topic：

2、编写网页插件

网页界面使用Adobe Dreamweaver 2021进行布局，通过client.on()函数与EMQ X服务器建立连接，利用client.subscribe（）函数订阅定义好的主题，再通过点击Led控制页面的按钮触发消息的发布。

核心代码如下：



完整代码点此下载。

3、硬件代码

软件采用Arduino IDE进行编程。硬件部分使用了Wemos作为主控板，与一个RGB灯相接，连接Wi-Fi和EMQ X服务器，接收订阅的Topic下发的消息对RGB灯执行相应的操作。

部分代码如下：

完整代码点此下载。

实验效果

电脑端打开的网页界面：

手机浏览器打开的网页界面：

串口监视器：

EMQ X Dashboard-WebSocket页面：

实验效果图：

哔哩哔哩视频效果链接：
https://www.bilibili.com/video/BV1U64y1y7YM/