Wokwi - Online ESP32, STM32, Arduino Simulator

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

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

const char * MQTTServer = "broker.hivemq.com";
const char * MQTT_Topic = "ESP32-LCD";

const char * MQTT_ID = "";
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 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];
  }
  Serial.println();
  if (stMessage != "") {
    LCD.setCursor(0,0);
    LCD.print(stMessage);
  }
 
}

void setup() {
  Serial.begin(115200);
  LCD.init();
  LCD.backlight();
  WIFIConnect();
  client.setServer(MQTTServer, Port);
  client.setCallback(callback);
  
}
void loop() {
  if (!client.connected()) {
      MQTT_Reconnect();
    }
  client.loop();
  delay(250);
  // LCD.clear();
}

/*
1. MQTT Client Name: broker.emqx.io
2. Protocol: mqtt/tcp
3. Host: broker.emqx.io
-> Save
Sau khi cấu hình thấy được trang thái Connected xem như thành công và có thể nhận và gửi dữ liệu đến ESP32 thông qua MQTT Borker.
Topic to publish: VLUTE/LED
Payload: on -> Publish

Serial.println();
if(stMessage == "on"){
  digitalWrite(ledPin, HIGH);
  }else if (stMessage == "off"){
    digitalWrite(ledPin, LOW);
  }
}*/

/*VS Code
<!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>
    <title>ESP32 với LCD</title>
    <style>
        .main{
            text-align: center;
        }

        .title{
            font-size: 30px;
            color: #000;
            font-family: "Verdana";
        }

        .content_input{
            width: 900px;
            height: 80px;
            font-size: 30px;
            padding: 0 20px;
        }

        .btn_gui{
            width: 500px;
            height: 50px;
            font-size: 20px;
            background-color: #FFFF33;
            font-family: "Verdana";
            color: #000;
            margin-top: 40px;
            outline: none;
            font-weight: 700;
            border: none;
            border-radius: 8px;
        }

        .btn_gui:hover{
            cursor: pointer;
            background-color: #FFCC33;
        }
        .content_title{
            font-family: "Century";

        }

    </style>
</head>
<body>
    
</body>
    <div class="main">
        <h1 class="title">ỨNG DỤNG QUẢN LÝ MÀN HÌNH THÔNG BÁO THÔNG MINH</h1>
        <h3>20004136 - Trần Hồng Nhung</h3>
        <div>
            <p class="content_title">Nhập nội dung cần hiển thị (tiếng Việt không dấu).</p>
            <input type="text" class="content_input" id="input_content">
        </div>
    
        <button class="btn_gui">Gửi và hiển thị lên thiết bị</button>
    </div>

    <script>
        +Math.round(Math.random(100000000,1000000000)*1000000000);
        client = new Paho.MQTT.Client("broker.hivemq.com", Number(8000), "clientId-"+ +Math.round(Math.random(100000000,1000000000)*1000000000));
    
        client.onConnectionLost = onConnectionLost;
        client.onMessageArrived = onMessageArrived;
    
        client.connect({onSuccess:onConnect});
    
        function onConnect() {
        console.log("onConnect");
        }
    
        function onConnectionLost(responseObject) {
        if (responseObject.errorCode !== 0) {
            console.log("onConnectionLost:"+responseObject.errorMessage);
        }
        }
    
        function onMessageArrived(message) {
        console.log("onMessageArrived:"+message.payloadString);
        }
    
        // lấy dữ liệu r gửi
        $('.btn_gui').click(function(){
            var content = document.getElementById('input_content').value;
            message = new Paho.MQTT.Message(content);
            message.destinationName = "ESP32-LCD";
            client.send(message);
        });
    
    </script>
</html>
*/