Wokwi - Online ESP32, STM32, Arduino Simulator

#include <WiFi.h>
#include <PubSubClient.h>
#include <LiquidCrystal_I2C.h>

// Khởi tạo LCD
LiquidCrystal_I2C lcd(0x27, 20, 4); 

// Thông tin WiFi
const char* ssid = "Wokwi-GUEST"; 
const char* password = ""; 

// Thông tin MQTT
const char* mqttServer = "broker.hivemq.com";
const int mqttPort = 1883;
const char* mqttTopic = "pt/KC"; 

WiFiClient espClient;
PubSubClient client(espClient);

// Định nghĩa chân cho HC-SR04
const int trigPin = 13; 
const int echoPin = 12; 

void setup() {
  Serial.begin(115200);
  lcd.init();
  lcd.backlight();

  pinMode(trigPin, OUTPUT);
  pinMode(echoPin, INPUT);

  // Kết nối WiFi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }
  Serial.println("Connected to WiFi");

  client.setServer(mqttServer, mqttPort);
}

void loop() {
  if (!client.connected()) {
    reconnectMQTT();
  }
  client.loop();

  long distance = readDistance(); 

  lcd.setCursor(0, 0);
  lcd.print("Khoang cach: ");
  lcd.setCursor(0, 1);
  lcd.print(distance);
  lcd.print(" cm  "); 

  // Gửi khoảng cách qua MQTT
  client.publish(mqttTopic, String(distance).c_str());

  delay(1000); // Đợi 1 giây trước khi đọc lại
}

long readDistance() {
  digitalWrite(trigPin, LOW);
  delayMicroseconds(2);
  digitalWrite(trigPin, HIGH);
  delayMicroseconds(10);
  digitalWrite(trigPin, LOW);
  long duration = pulseIn(echoPin, HIGH);
  return (duration * 0.034) / 2; // Tính khoảng cách
}

void reconnectMQTT() {
  while (!client.connected()) {
    Serial.print("Attempting MQTT connection...");
    if (client.connect("ESP32Client")) {
      Serial.println("connected");
    } else {
      Serial.print("failed, rc=");
      Serial.print(client.state());
      delay(2000);
    }
  }
}
// <!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>
//     <title>Khoảng Cách Sensor</title>
//     <style>
//         body {
//             font-family: Arial, sans-serif;
//             text-align: center;
//             margin: 20px;
//         }
//         #distance {
//             font-size: 2em;
//             color: blue;
//         }
//         #time {
//             margin-top: 20px;
//         }
//     </style>
// </head>
// <body>
//     <h1>Giám Sát Khoảng Cách</h1>
//     <p>Khoảng cách đo được: <span id="distance">Loading...</span> cm</p>
//     <div id="time"></div>

//     <script>
//         const clientId = "clientId-" + Math.random().toString(36).substring(2, 15);
//         const client = new Paho.MQTT.Client("broker.hivemq.com", 8000, clientId);

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

//         client.onMessageArrived = function(message) {
//             console.log("Message arrived: " + message.destinationName + " - " + message.payloadString);
//             if (message.destinationName === "pt/KC") {
//                 $('#distance').text(message.payloadString);
//             }
//         };

//         client.connect({
//             onSuccess: function() {
//                 console.log("Connected to MQTT broker");
//                 client.subscribe("pt/KC");
//             },
//             onFailure: function(message) {
//                 console.error("Connection failed: " + message.errorMessage);
//             }
//         });

//         // Real-time clock
//         setInterval(function() {
//             const now = new Date();
//             document.getElementById("time").innerHTML = "Dữ liệu được cập nhật vào: " + now.toLocaleString();
//         }, 1000);
//     </script>
// </body>
// </html>