Wokwi - Online ESP32, STM32, Arduino Simulator

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

const char * MQTTServer = "broker.hivemq.com";
const char * MQTT_Topic = "VLUTE/LED";
const char * MQTT_ID = "";
int Port = 1883;
const char *ssid = "Phu Loc 2D_5G";
const char *password = "12345678";
WiFiClient espClient;
PubSubClient client(espClient);
const int ledPin = 21;

void WIFIConnect() {
 Serial.println("Connecting to SSID: Wokwi-GUEST");
 WiFi.begin(ssid,password);
 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];
 }
 //tới đây là phải có
 Serial.println("");
 //cái message được lấy từ cái web qua
 if(stMessage=="on")
 {
  digitalWrite(21,HIGH);
 }
 else if(stMessage=="off")
  {
  digitalWrite(21,LOW);
  }
}
//điều kiện theo đề
void setup()
{
  Serial.begin(115200);
  WIFIConnect(); //phải có 
 client.setServer(MQTTServer, Port);//phải có 
 client.setCallback(callback);//phải có 
 pinMode(21, OUTPUT);
}
void loop()
{
    delay(10); 
  if (!client.connected())  //phải có 
  {
    MQTT_Reconnect(); //phải có 
  }
 client.loop(); //phải có 
}



// <!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>
//     <button class="bat">Bật LED</button>
//     <button class="tat">Tắt LED</button>
// </body>
// </html>

// <script>
//     $('.bat').click(function(){
//         message = new Paho.MQTT.Message("on");
//         message.destinationName = "VLUTE/LED";
//         client.send(message);
//     });

//     $('.tat').click(function(){
//         message = new Paho.MQTT.Message("off");
//         message.destinationName = "VLUTE/LED";
//         client.send(message);
//     });
//     client = new Paho.MQTT.Client("broker.hivemq.com", Number(8000), "");
//     // client = new Paho.MQTT.Client("broker.hivemq.com", Number(8000), "clientId");
//     // "clientId" nếu có dòng này là lỗi không thể bật đèn được
//     client.onConnectionLost = onConnectionLost;
//     client.onMessageArrived = onMessageArrived;

//     client.connect({onSuccess:onConnect});

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

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

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