Wokwi - Online ESP32, STM32, Arduino Simulator

#include <WiFi.h>
#include <LiquidCrystal_I2C.h>
#include "PubSubClient.h"
#include <Wire.h>
const char * MQTTServer = "broker.hivemq.com";
const char * Toppic = "sendd"
const char * MQTT_ID = "demo-lcd";
int Port = 1883;

LiquidCrystal_I2C LCD = LiquidCrystal_I2C(0x27, 20, 4);
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 connected");
      client.subscribe("nhandl");
      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: ");
  String stMessage;

  for (int i = 0; i < length; i++) {
    Serial.print((char)message[i]);
    stMessage += (char)message[i];
  }
    LCD.setCursor(0, 0);
    LCD.clear();
    LCD.print(stMessage);
}

void setup() {
  Serial.begin(115200);
  delay(10);

  LCD.init();
  LCD.backlight();

  WIFIConnect();
  client.setServer(MQTTServer, Port);
  client.setCallback(callback);

}

void loop() {
  delay(10);
  if (!client.connected()) {
    MQTT_Reconnect();
  }
  client.loop();
}
//
<!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>
    <h1> ỨNG DỤNG QUẢN LÝ MÀN HÌNH THÔNG BÁO THÔNG MINH </h1>
    <h3>Nhập nội dung cần hiển thị(tiếng việt không dấu)</h3>
    <textarea id="noidung" cols="30" rows="10"></textarea>
    <br>
    <button id="gui">Gửi và hiển thị lên thiết bị</button>
  </body>
</html>

<script>
    //Bắt sự kiện jquery dấu .là Class id là #
  $("#gui").click(function () {
    var dulieu = $('#noidung').val();   //Này là lấy nội dung của cái textarea
    message = new Paho.MQTT.Message(dulieu); //Đưa dô gởi đi
    message.destinationName = "nhandl"; //Gởi lên cái toppic này nè
    client.send(message);
  });

 client = new Paho.MQTT.Client("broker.hivemq.com", Number(8000), "9ed2742b-1b31-4310-91ad-55a726faa09d");
  client.onConnectionLost = onConnectionLost;
  client.onMessageArrived = onMessageArrived;
  client.connect({ onSuccess: onConnect });

  function onConnect() {
    console.log("kết nối thành công");
    // client.subscribe("World");
  }

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

  function onMessageArrived(message) {
    console.log("onMessageArrived:" + message.payloadString);
  }
</script>