Wokwi - Online ESP32, STM32, Arduino Simulator

#include <WiFi.h>
#include "PubSubClient.h"
#include "DHTesp.h"
//
const int DHT_PIN = 15;
DHTesp dhtSensor;

const char * MQTTServer = "broker.hivemq.com";
const char * MQTT_Topic = "VLUTE/DHT2232";

// Tạo ID ngẫu nhiên tại: https://www.guidgen.com/
const char * MQTT_ID = "24125b66-8b32-48d4-be73-89a355d9ef4a";
int Port = 1883;

WiFiClient espClient;
PubSubClient client(espClient);


void WIFIConnect() {
  Serial.println("Connecting to SSID: Wokwi-GUEST");
  WiFi.begin("Wokwi-GUEST", "");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("WiFi connected");
  Serial.print(", IP address: ");
  Serial.println(WiFi.localIP());
}

void MQTT_Reconnect() {
  while (!client.connected()) {
    if (client.connect(MQTT_ID)) {
      Serial.print("MQTT Topic: ");
      Serial.print(MQTT_Topic);
      Serial.print(" connected");
      client.subscribe(MQTT_Topic);
      Serial.println("");
    } else {
      Serial.print("failed, rc=");
      Serial.print(client.state());
      Serial.println(" try again in 5 seconds");
      delay(5000);
    }
  }
}

void callback(char* topic, byte* message, unsigned int length) {
  Serial.print("Message arrived on topic: ");
  Serial.println(topic);
  Serial.print("Message: ");
  String stMessage;

  for (int i = 0; i < length; i++) {
    Serial.print((char)message[i]);
    stMessage += (char)message[i];
  }
  Serial.println();
}



void setup() {
  Serial.begin(115200);

  WIFIConnect();
  client.setServer(MQTTServer, Port);
  client.setCallback(callback);
  dhtSensor.setup(DHT_PIN, DHTesp::DHT22);
}

void loop() {
  TempAndHumidity  data = dhtSensor.getTempAndHumidity();
  Serial.println("Nhiệt độ: " + String(data.temperature, 2) + "°C");
  Serial.println("Độ ẩm: " + String(data.humidity, 1) + "%");



  Serial.println("---");
  delay(1000);

  if (!client.connected()) {
    MQTT_Reconnect();
  }
  
  char NHIETDO[100];
  byte len=50;
  String ND= String(data.temperature, 2) + "°C";
  ND.toCharArray(NHIETDO,len);

  char DOAM[100];
  byte len2=50;
  String DA=String(data.humidity, 1) + "%";
  DA.toCharArray(DOAM,len2);

  client.publish("ND",NHIETDO);
  client.publish("DA",DOAM);
  client.loop();
}





// <!DOCTYPE html>
// <html>
// <head>
//   <title>Hiển thị nhiệt độ và độ ẩm</title>
//   <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.2/mqttws31.min.js" type="text/javascript"></script>
//   <style>
//     /* Your CSS code here */
//   </style>
// </head>
// <body>
//   <h1>Nhiệt độ và độ ẩm</h1>
//   <div>
//     <p>Nhiệt độ: <span id="ND"></span></p>
//     <p>Độ ẩm: <span id="DA"></span></p>
//     <p>Dữ liệu cập nhật lúc:<span id='hvn'></span>.</p>
//   </div>
//   <script>
//     // Connect to MQTT broker
//     var client = new Paho.MQTT.Client("broker.hivemq.com", 8000, "24125b66-8b32-48d4-be73-89a355d9ef4a");
//     client.connect({onSuccess: onConnect});

//     function onConnect() {
//       // Subscribe to topic "temperature" and "humidity"
//       client.subscribe("ND");
//       client.subscribe("DA");

//       // Set callback function for message arrival
//       client.onMessageArrived = onMessageArrived;
//     }

//     function onMessageArrived(message) {
//       switch (message.destinationName) {
//         case "ND":
//           document.getElementById("ND").innerHTML = message.payloadString;
//           break;
//         case "DA":
//           document.getElementById("DA").innerHTML = message.payloadString;
//           break;
//       }
//     }
//   </script>

// <script>
//     var today = new Date();
//       var date = today.getDate()+'-'+(today.getMonth()+1)+'-'+today.getFullYear();
//       var time = today.getHours() + ":" + today.getMinutes();
//       var dateTime = time+' ngày '+date;
   
//       document.getElementById("hvn").innerHTML = dateTime;
//    </script>
// </body>
// </html>