学习使用ESP8266进行MQTT通信并在网页上可视化显示

目录

一、工具

二、 流程

三、代码实现 

设置MQTT服务器地址

 设置服务器和端口号

连接MQTT服务器并订阅话题

 回调处理函数

发布数据到话题

四、调试软件使用

打开MQTTx

 添加话题

五、网页使用

 

---

一、工具

arduino ide

esp8266/32单片机

lot物联网网页

MQTTx软件或者mqttfx

二、 流程

建议先去网上学习一下MQTT协议再来进行配置

这里推荐太极创客http://www.taichi-maker.com/homepage/esp8266-nodemcu-iot/iot-tuttorial/mqtt-tutorial/http://www.taichi-maker.com/homepage/esp8266-nodemcu-iot/iot-tuttorial/mqtt-tutorial/

现在arduino配置连接代码，然后找几个免费的MQTT服务器（多找几个备用），然后通过配置话题来进行点对点通信，lot网页进行最终的效果展示，MQTTx或者mqttfx进行过程调试。

这里提供服务器为官方免费用于学习的服务器。

免费的公共 MQTT 服务器 | EMQ

提供一个用于学习的lot网页 

(公测)KZone喵星球 - 探索AI与编程的乐趣

需要注册账号，最多使用五个话题和一个可视化页面。 该网站的服务器地址为iot.kittenbot.cn

三、代码实现 

设置MQTT服务器地址

const char* mqttServer = "iot.kittenbot.cn";

头文件不要忘记加

#include <PubSubClient.h>

 设置服务器和端口号

 // 设置MQTT服务器和端口号mqttClient.setServer(mqttServer, 1883);mqttClient.setCallback(receiveCallback);

连接MQTT服务器并订阅话题

void connectMQTTserver(){// 根据ESP8266的MAC地址生成客户端ID（避免与其它ESP8266的客户端ID重名）String clientId = "esp8266-" + WiFi.macAddress();// 连接MQTT服务器if (mqttClient.connect(clientId.c_str())) { Serial.println("MQTT Server Connected.");Serial.println("Server Address:");Serial.println(mqttServer);Serial.println("ClientId: ");Serial.println(clientId);subscribeTopic(); // 订阅指定主题} else {Serial.print("MQTT Server Connect Failed. Client State:");Serial.println(mqttClient.state());delay(5000);}   
}

 订阅多个话题

void subscribeTopic(){String topicString = "/jiezz/esp8266/state";char subTopic[topicString.length() + 1];  strcpy(subTopic, topicString.c_str());// 建立订阅主题2String topicString2 = "/jiezz/esp8266/wendu";char subTopic2[topicString2.length() + 1];  strcpy(subTopic2, topicString2.c_str());// 通过串口监视器输出是否成功订阅主题1以及订阅的主题1名称if(mqttClient.subscribe(subTopic)){Serial.println("Subscrib Topic:");Serial.println(subTopic);} else {Serial.print("Subscribe Fail...");}  // 通过串口监视器输出是否成功订阅主题2以及订阅的主题2名称if(mqttClient.subscribe(subTopic2)){Serial.println("Subscrib Topic:");Serial.println(subTopic2);} else {Serial.print("Subscribe Fail...");}    
}

 

 回调处理函数

void receiveCallback(char* topic, byte* payload, unsigned int length) {Serial.print("Message Received [");Serial.print(topic);Serial.print("] ");for (int i = 0; i < length; i++) {Serial.print((char)payload[i]);}Serial.println("");Serial.print("Message Length(Bytes) ");Serial.println(length);if ((char)payload[0] == '1') {     // 如果收到的信息以“1”为开始digitalWrite(BUILTIN_LED, LOW);  // 则点亮LED。} else {                           digitalWrite(BUILTIN_LED, HIGH); // 否则熄灭LED。}
}

 这里说明一下，这个回调函数会处理所有话题的数据，如果想要处理单个话题单独处理，需要加个if语句即可

 整体代码可以去太极创客官网查看

发布数据到话题

void pubMQTTmsg(){static int value; // 客户端发布信息用数字String topicString = "/jiezz/esp8266";char publishTopic[topicString.length() + 1];  strcpy(publishTopic, topicString.c_str());String messageString = "Hello jiezz " + String(value++); char publishMsg[messageString.length() + 1];   strcpy(publishMsg, messageString.c_str());// 实现ESP8266向主题发布信息if(mqttClient.publish(publishTopic, publishMsg)){Serial.println("Publish Topic:");Serial.println(publishTopic);Serial.println("Publish message:");Serial.println(publishMsg);    } else {Serial.println("Message Publish Failed."); }
}

四、调试软件使用

打开MQTTx

点击左侧第二个按钮，添加连接

输入名称和服务器地址，iot.kittenbot.cn

端口默认1883

其他都默认，点击连接 

 添加话题

 

话题名称自拟，两端相同就行 

连接单片机后就能在这里查看发出的信息了。

注意：这个软件也可以发布数据到话题，在右下角点击发送即可，有多个解析形式注意区分

 

五、网页使用

进入KZone官网，注册账号后打开lot平台，三个页面，服务概况，话题中心，可视化页面。

a、先在话题中心增加一个话题，随意命名

b、点击可视化面板，新建一个面板，在里面加一个多行文字

c、修改右侧的数据话题绑定

d、点击右上角的开始按钮就可以用了

 

如果有问题欢迎在评论区指正！