Wokwi - Online ESP32, STM32, Arduino Simulator

#include <LiquidCrystal_I2C.h>
LiquidCrystal_I2C lcd (0x27,16,2);
#include "PubSubClient.h"
#include <WiFi.h>

const char * MQTTServer = "broker.hivemq.com";
const char * MQTT_Topic = "pt/mssv";
const char * MQTT_Topic1 = "pt/hoten";
const char * MQTT_ID = "mqttx_7e7c4ab4";
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 setup() {

  lcd.init();
  lcd.backlight();
  WIFIConnect();
  client.setServer(MQTTServer, Port);
  Serial.begin(115200);
  Serial.println("Hello, ESP32!");
}

void loop() {
  if (!client.connected()) {
    MQTT_Reconnect();
  }
  client.loop();
  delay(10); 
  String mssv = "21004289";
  String hoten = "Sunny";
  lcd.setCursor(0,0);
  lcd.print(mssv);
  lcd.setCursor(0,1);
  lcd.print(hoten);
  client.publish(MQTT_Topic, mssv.c_str());
  client.publish(MQTT_Topic1, hoten.c_str());
}




// <!DOCTYPE html>
// <html lang="en">
// <head>
//     <meta charset="UTF-8">
//     <meta name="viewport" content="width=device-width, initial-scale=1.0">
//     <title>Document</title>
//     <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>
//     <div id="data">
//         <p class="row">Mssv: <span id="mssv" class="value">Loading....</span></p>
//         <p class="row">Họ Tên: <span id="hoten" class="value">Loading....</span></p>
//     </div>
//     <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);
//             if (message.destinationName === "pt/mssv") {
//                 $('#mssv').text(message.payloadString);
//             }
//             else if (message.destinationName === "pt/hoten")
//             {
//                 $('#hoten').text(message.payloadString);
//             } 
//         }
//         client.connect({
//             onSuccess: function () {
//                 console.log("Connected to MQTT broker");
//                 client.subscribe("pt/mssv");
//                 client.subscribe("pt/hoten");
                
//             },
//             useSSL: false,
//             timeout: 3,
//             onFailure: function (message) {
//                 console.error("Connection failed: " + message.errorMessage);
//             }
//         });
//     </script>
// </body>
// </html>