Wokwi - Online ESP32, STM32, Arduino Simulator

#include <PubSubClient.h>
#include<WiFi.h>
#include "DHT.h"
#define DHTPIN 2
String data_send;
const char* mqtt_server = "broker.emqx.io";
 
int status = WL_IDLE_STATUS;
WiFiClient wifiClient;
PubSubClient client(wifiClient);
 
#define DHTTYPE DHT22 
 
float tempC = 0.0;
float cToFRate = 1.8;
float cToF32 = 32;
float humidity = 0.0;
 DHT dht(DHTPIN, DHTTYPE);
void setup() {
  Serial.begin(115200);
  delay(10);
 
  WiFi.mode(WIFI_STA);
  WiFi.disconnect();
 
  delay(100);
  dht.begin();
  connectWifi();
  initMQTT();
}
 
void loop() {
  if(WiFi.status() != WL_CONNECTED){
    connectWifi();
  } else {
    if(!client.connected()){
      connectMQTT();
    } else {
      publishDHT22(); //doc dl dht
    }
  }
  client.loop();
  delay(100);
}
 
void initMQTT(){
  Serial.println("Initializing MQTT");
   
  randomSeed(micros());
  client.setServer(mqtt_server, 1883);
  connectMQTT();
}
 
void connectMQTT(){
   
  while(!client.connected()){
    String clientId = "Client-";
    clientId += String(random(0xffff), HEX);
    if(client.connect(clientId.c_str())){
      Serial.println("Successfully connected MQTT");
    } else {
      Serial.println("Error!");
      Serial.println(client.state());
      delay(500);
    }
  }
}
 
void publishDHT22(){

    float h = dht.readHumidity();
    float t = dht.readTemperature();
    data_send = "{\"temp_value\":\"" + String(t) + "\",\"press_value\":\"" + String(h) + "\"}";
    Serial.println(data_send);
    client.publish("21004073_DHT221", String(data_send).c_str()); 
}
 
void connectWifi(){
  WiFi.begin("Wokwi-GUEST", "");
   
  while(status != WL_CONNECTED){
    status = WiFi.status();
    delay(1000);
    Serial.print(".");
  }
}
 
float convertCtoF(float t){
  return ((t * cToFRate) + cToF32);
}
// <!DOCTYPE html>
// <html lang="en">

// <head>
//     <meta charset="UTF-8">
//     <meta http-equiv="X-UA-Compatible" content="IE=edge">
//     <meta name="viewport" content="width=device-width, initial-scale=1.0">
//     <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js"
//         type="text/javascript"></script>
//     <script src="https://code.jquery.com/jquery-3.6.1.min.js" type="text/javascript"></script>
// </head>

// <body>
//     <p id="NhietDo">Nhiệt Độ:</p>
//     <p id="DoAm">Độ Ẩm: </p>
//      Thời gian cập nhật lần cuối lúc: <p id = "lastUpdated">x</p>
// </body>

// </html>

// <script>
//     var client = new Paho.MQTT.Client("broker.emqx.io", 8083, "Client-" + Math.random(1000000));
//     client.onConnectionLost = onConnectionLost;
//     client.onMessageArrived = onMessageArrived;

//     client.connect({ onSuccess: onConnect });

//     function onConnect() {
//         client.subscribe("21004073_DHT221");
//     }

//     function onConnectionLost(responseObject) {
//         if (responseObject.errorCode !== 0) {
//             console.log("onConnectionLost" + responseObject.errorMessage);
//         }
//     }

//     function onMessageArrived(message) {
//         const obj = JSON.parse(message.payloadString);
//         console.log(obj.temp_value);
//         document.getElementById("NhietDo").innerHTML = "Nhiệt độ: " + obj.temp_value + " °C";
//         document.getElementById("DoAm").innerHTML = "Độ Ẩm: " + obj.press_value + "%";

//         // Kiểm tra nhiệt độ và độ ẩm vượt mức cho phép
//         if (parseFloat(obj.temp_value) > 30) {
//             alert("Nhiệt độ vượt quá mức cho phép!");
//         }

//         if (parseFloat(obj.press_value) > 80) {
//             alert("Độ ẩm vượt quá mức cho phép!");
//         }
//         // Update last updated time
//         const currentTime = new Date();
//             const hours = currentTime.getHours();
//             const minutes = currentTime.getMinutes();
//             const day = currentTime.getDay();
//             const month = currentTime.getMonth();
//             const years = currentTime.getFullYear();
//             const formattedTime = hours + ":" + minutes + " ngày " + day + "/" + month + "/" + years;
//             document.getElementById('lastUpdated').innerText = formattedTime;
//     }

// </script>