Wokwi - Online ESP32, STM32, Arduino Simulator

#include <Keypad.h>
#include <WiFi.h>
#include <ArduinoJson.h>
#include "PubSubClient.h"
const char * MQTTServer = "broker.emqx.io";
const char * MQTT_Topic = "Nghi/keypad";
const char * MQTT_ID = "77fb8fe3-bc81-44ef-ac7b-44db8b837617";
int Port = 1883;
WiFiClient espClient;
PubSubClient client(espClient);
String stMessage;
String pass = "";

const int tb = 26;

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());
}
const uint8_t ROWS = 4;
const uint8_t COLS = 4;
char keys[ROWS][COLS] = {
  { '1', '2', '3', 'A' },
  { '4', '5', '6', 'B' },
  { '7', '8', '9', 'C' },
  { '*', '0', '#', 'D' }
};

uint8_t rowPins[ROWS] = {18, 5, 17, 16};
uint8_t colPins[COLS] = {4, 0, 2, 15};

Keypad keypad = Keypad(makeKeymap(keys), rowPins, colPins, ROWS, COLS);


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: ");
  stMessage = "";
  for (int i = 0; i < length; i++) {
    Serial.print((char)message[i]);
    stMessage += (char)message[i];
  }
  Serial.println();

  if(stMessage =="thatbai")
  {
    digitalWrite(26,HIGH);
  }
  else if (stMessage =="thanhcong")
  {
    digitalWrite(26,LOW);

  }

}

void setup() {
  Serial.begin(115200);
  WIFIConnect();
  client.setServer(MQTTServer, Port);
  client.setCallback(callback);
  pinMode(tb, OUTPUT);
}

void pushPass(){
  JsonDocument doc;
  doc["pass"] = pass;
  String payload = "";
  serializeJson(doc, payload);
  // String payload = "{\"pass\":" + pass + "}";
  client.publish(MQTT_Topic, payload.c_str());
  pass = "";
}
// void controlLed(){
//   if(stMessage == "thanhcong"){
//     digitalWrite(tc, HIGH);
//     delay(500);
//     digitalWrite(tc, LOW);
//     stMessage = "";
//   }else if(stMessage == "thatbai"){
//     for(int i = 0; i < 3; i++){
//       digitalWrite(tb, HIGH);
//       delay(500);
//       digitalWrite(tb, LOW);
//     }
//     stMessage = "";
//   }
// }
void loop() {
  delay(10);
  if (!client.connected()) {
    MQTT_Reconnect();
  }
  char key = keypad.getKey();
  if (key != NO_KEY && key != '#') {
    pass += key;
  }

  if (key == '#') {
    pushPass();
  }
  // controlLed();
  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>
    <div>
        <p>mật khẩu hiện tại: <strong class="mkht">123</strong></p>
        <br>

        <label for="ho_ten">Họ và tên:</label>
        <input type="text" id="ho_ten" name="ho_ten" required>
        <br>
        <label for="ma_so_sinh_vien">Mã số sinh viên:</label>
        <input class="pass" type="text" class="content">
        <br>
        <button class="btn">Thay đổi mật khẩu</button>  
        <br>
        
        <label for=""> <p id="tb"></p></label>
    </div>

    <script>
        $(".btn").click(function () {
            $(".mkht").text($(".pass").val())
        });

        client = new Paho.MQTT.Client("broker.emqx.io", Number(8083), "21004274");

        client.onConnectionLost = onConnectionLost;
        client.onMessageArrived = onMessageArrived;

        client.connect({ onSuccess: onConnect });

        function onConnect() {
            console.log("onConnect");
            client.subscribe("Nghi/keypad");
        }

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

        function onMessageArrived(message) {
            let pass, mkht, Message;

            try {
                let payload = JSON.parse(message.payloadString);
                pass = payload.pass;
                
            } catch (e) {
                return;
            }

            mkht = $(".mkht").text();

            if (pass && pass.toString() === mkht) {
                $("#tb").text("Thao tác thành công, ESP32 đã nhận dữ liệu");
                Message = new Paho.MQTT.Message("thanhcong");
            } else {
                $("#tb").text("Thao tác thất bại");
                Message = new Paho.MQTT.Message("thatbai");
            }
            Message.destinationName = "Nghi/keypad";
            client.send(Message);
        }
    </script>
</body>
</html>
*/