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

发布于:2025-03-10 ⋅ 阅读:(20) ⋅ 点赞:(0)

目录

一、工具

二、 流程

三、代码实现 

设置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());
  
  // 建立订阅主题2
  String 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、点击右上角的开始按钮就可以用了

 

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