Wokwi - Online ESP32, STM32, Arduino Simulator

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

const char * MQTTServer = "broker.emqx.io";
const char * MQTT_Topic = "vlute/den1";

// Tạo ID ngẫu nhiên tại: https://www.guidgen.com/
const char * MQTT_ID = "84f1db73-3070-470a-9ccd-3eeca80df3de";
int Port = 1883; //neu ket noi web thi doi port lai

WiFiClient espClient;
PubSubClient client(espClient);
const int ledPin = 2;
const int ledPin1 = 4;
const int ledPin2 = 5;
int arr[] = {2,4,5};

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 == "on") {
    for (int i=0; i<3; i++)
    {
      digitalWrite(arr[i], HIGH);
      delay(300);
    }
  }
  else if (stMessage == "off") {
    for (int i=0; i<3; i++)
    {
      digitalWrite(arr[i], LOW);
      delay(300);
    }
  }
}

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

  WIFIConnect();
  client.setServer(MQTTServer, Port);
  client.setCallback(callback);
  for (int i=0; i<3; i++)
    {
      pinMode(arr[i], OUTPUT);
    }
}

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>
    <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/den1";
        client.send(message);
    });

    $('.tat').click(function(){
        message = new Paho.MQTT.Message("off");
        message.destinationName = "vlute/den1";
        client.send(message);
    });

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

    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>
*/