Wokwi - Online ESP32, STM32, Arduino Simulator

#include <PubSubClient.h>
#include<WiFi.h>
#include "DHT.h"
#define DHTPIN 5
String data_send;
const char* mqtt_server = "broker.hivemq.com";
 
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(){
    delay(500);
    float h = dht.readHumidity();
    float t = dht.readTemperature();
    data_send = "{\"nhietdo\":\"" + String(t) + "\",\"doam\":\"" + String(h) + "\"}";
    Serial.println(data_send);
    client.publish("IOT/PhatTrien/DHT22", 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>
    <table align="center" border="1">
        <thead>
            <tr>
                <th>Ngay Gio</th>
                <th>Nhiet Do</th>
                <th>Do Am</th>
            </tr>
        </thead>
        <tbody>
            <!-- Add rows with data here -->
            <tr>
                <td id="ngaygio">Data 1</td>
                <td id="nhietdo">Data 2</td>
                <td id="doam">Data 3</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

<script>
    client = new Paho.MQTT.Client("broker.hivemq.com", Number(8000), "00000000000");

    client.onConnectionLost = onConnectionLost;
    client.onMessageArrived = onMessageArrived;

    client.connect({
        onSuccess: onConnect
    });

    function onConnect() {
        console.log("onConnect");
        client.subscribe("IOT/PhatTrien/DHT22");
    }

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

    function onMessageArrived(message) {
        console.log("onMessageArrived:" + message.payloadString);
        var obj = JSON.parse(message.payloadString);
        var Temp = obj.nhietdo;
        var Hum = obj.doam;
        const now = new Date();
        const date = now.toLocaleDateString();
        const time = now.toLocaleTimeString();
        if (Hum > 80) {
            console.log(Hum);
            document.getElementById("doam").innerHTML = String(Hum + " Do am cao");
        } else {
            document.getElementById("doam").innerHTML = String(Hum);
        }
        document.getElementById("ngaygio").innerHTML = String(date + " " + time);
        document.getElementById("nhietdo").innerHTML = String(Temp);

    }
</script>
*/