Wokwi - Online ESP32, STM32, Arduino Simulator

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

const char *MQTTServer = "broker.hivemq.com";
const char *MQTT_lcd = "dht/lcd";
const char *MQTT_ID = "";

WiFiClient espClient;
PubSubClient client(espClient);

int lcdColumns = 16;
int lcdRows = 2;

LiquidCrystal_I2C lcd = LiquidCrystal_I2C(0x27, 16, 2);

String messageString = "";
unsigned long previousMillis = 0;
const long interval = 100; // Tốc độ cuộn chữ

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 lcd: ");
      Serial.print(MQTT_lcd);
      Serial.print(" connected");
      client.subscribe(MQTT_lcd);
      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: ");
  messageString = "";
  for (int i = 0; i < length; i++) {
    Serial.print((char)message[i]);
    messageString += (char)message[i];
  }
  Serial.println();
  // Clear LCD and print new message
  lcd.clear();
  lcd.print(messageString.substring(0, lcdColumns));
  previousMillis = millis();  // Reset the timer when new message arrives
}

void setup() {
  Serial.begin(9600);
  WIFIConnect(); // Connect to Wifi network
  // initialize LCD
  lcd.init();
  // turn on LCD backlight
  lcd.backlight();
  client.setServer(MQTTServer, 1883); // Configure MQTT connection, change port if needed.
  client.setCallback(callback);
}

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

  unsigned long currentMillis = millis();
  if (currentMillis - previousMillis >= interval) {
    previousMillis = currentMillis;
    if (messageString.length() > lcdColumns) {
      messageString = messageString.substring(1) + messageString.charAt(0);
      lcd.setCursor(0, 0);
      lcd.print(messageString.substring(0, lcdColumns));
    }
  }
}

// <!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>
//         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
//         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
//         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
//         <title>BAI TAP 5</title>
//         <style>
//             h3 {
//                 text-align: center;
//             }
//             .css {
//                 border: black 3px solid;
//             }
//             .full {
//                 width: 60%;
//                 margin-left: 50px;
//             }
//             button {
//                 box-shadow: 20px;
//             }
//             span {
//                 color: red;
//                 font-weight: bold;
//             }
//         </style>
//     </head>

//     <body>
//         <div class="full">
//             <b><i>
//                 <h3>ỨNG DỤNG QUẢN LÝ MÀN HÌNH THÔNG BÁO THÔNG MINH</h3>
//             </i></b>
//             <b><i>
//                 <p>Nhập nội dung cần hiển thị (tiếng việt không dấu)</p>
//             </i></b>
//             <textarea type="text" class="css" id="dulieu" cols="109" rows="4"></textarea>
//             <button id="gui" type="button" class="btn btn-danger">Gửi và hiển thị lên thiết bị</button>
//             <br> <br><span id="loi"></span>
//         </div>
//     </body>
// </html>

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

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

//     client.onMessageArrived = function (message) {
//         console.log("onMessageArrived:" + message.destinationName + " - " + message.payloadString);
//     };

//     client.connect({
//         onSuccess: function () {
//             console.log("Connected to MQTT broker");
//         },
//         useSSL: false,
//         timeout: 3,
//         onFailure: function (message) {
//             console.error("Connection failed: " + message.errorMessage);
//         }
//     });

//     $('#gui').click(function() {
//         var dulieu = $('#dulieu').val();
//         if (dulieu) {
//             var message = new Paho.MQTT.Message(dulieu);
//             message.destinationName = "dht/lcd";
//             client.send(message);
//             $('#loi').text('Message sent successfully!');
//         } else {
//             $('#loi').text('Please enter a message to send.');
//         }
//     });
// </script>