How can i use mqtt servers to access my esp32's web server

Projects General Guidance
1

I have created a web server before, there are four buttons to control four leds on esp32.
Is there a way to access this web server on the free mqtt web servers? If there is a way can you tell me how i can do it? I would appreciate if you could share sample code.

My web server's code:

#include <WiFi.h>
#include <WebServer.h>

/* Put your SSID & Password */
const char* ssid = "ESP32";  // Enter SSID here
const char* password = "12345678";  //Enter Password here

/* Put IP Address details */
IPAddress local_ip(192,168,1,1);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);

WebServer server(80);

uint8_t LED1pin = 4;
int LED1status = LOW;

uint8_t LED2pin = 5;
int LED2status = LOW;

uint8_t LED3pin = 16;
int LED3status = LOW;

uint8_t LED4pin = 17;
int LED4status = LOW;

void setup() {
  Serial.begin(115200);
  pinMode(LED1pin, OUTPUT);
  pinMode(LED2pin, OUTPUT);
  pinMode(LED3pin, OUTPUT);
  pinMode(LED4pin, OUTPUT);
  
  WiFi.softAP(ssid, password);
  WiFi.softAPConfig(local_ip, gateway, subnet);
  delay(100);
  
  server.on("/", handle_OnConnect);
  server.on("/led1on", handle_led1on);
  server.on("/led1off", handle_led1off);
  server.on("/led2on", handle_led2on);
  server.on("/led2off", handle_led2off);
  server.on("/led3on", handle_led3on);
  server.on("/led3off", handle_led3off);
  server.on("/led4on", handle_led4on);
  server.on("/led4off", handle_led4off);
  server.onNotFound(handle_NotFound);

  server.begin();
  Serial.println("HTTP server started");
}
void loop() {
  server.handleClient();
  if(LED1status)
  {digitalWrite(LED1pin, HIGH);}
  else
  {digitalWrite(LED1pin, LOW);}
  
  if(LED2status)
  {digitalWrite(LED2pin, HIGH);}
  else
  {digitalWrite(LED2pin, LOW);}
  
  if(LED3status)
  {digitalWrite(LED3pin, HIGH);}
  else
  {digitalWrite(LED3pin, LOW);}
    
  if(LED4status)
  {digitalWrite(LED4pin, HIGH);}
  else
  {digitalWrite(LED4pin, LOW);}
}

void handle_OnConnect() {
  LED1status = LOW;
  LED2status = LOW;
  LED3status = LOW;
  LED4status = LOW;
  Serial.println("GPIO4 Status: OFF | GPIO5 Status: OFF | GPIO16 Status: OFF | GPIO17 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,LED2status,LED3status,LED4status)); 
}

void handle_led1on() {
  LED1status = HIGH;
  LED2status = LOW;
  LED3status = LOW;
  LED4status = LOW;
  Serial.println("GPIO4 Status: ON");
  server.send(200, "text/html", SendHTML(LED1status,LED2status,LED3status,LED4status)); 
}

void handle_led1off() {
  LED1status = LOW;
  LED2status = LOW;
  LED3status = LOW;
  LED4status = LOW;
  Serial.println("GPIO4 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,LED2status,LED3status,LED4status)); 
}

void handle_led2on() {
  LED1status = LOW;
  LED2status = HIGH;
  LED3status = LOW;
  LED4status = LOW;
  Serial.println("GPIO5 Status: ON");
  server.send(200, "text/html", SendHTML(LED1status,LED2status,LED3status,LED4status)); 
}

void handle_led2off() {
  LED1status = LOW;
  LED2status = LOW;
  LED3status = LOW;
  LED4status = LOW;
  Serial.println("GPIO5 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,LED2status,LED3status,LED4status)); 
}
void handle_led3on() {
  LED1status = LOW;
  LED2status = LOW;
  LED3status = HIGH;
  LED4status = LOW;
  Serial.println("GPIO16 Status: ON");
  server.send(200, "text/html", SendHTML(LED1status,LED2status,LED3status,LED4status)); 
}

void handle_led3off() {
  LED1status = LOW;
  LED2status = LOW;
  LED3status = LOW;
  LED4status = LOW;
  Serial.println("GPIO16 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,LED2status,LED3status,LED4status)); 
}

void handle_led4on() {
  LED1status = LOW;
  LED2status = LOW;
  LED3status = LOW;
  LED4status = HIGH;  
  Serial.println("GPIO17 Status: ON");
  server.send(200, "text/html", SendHTML(LED1status,LED2status,LED3status,LED4status)); 
}

void handle_led4off() {
  LED1status = LOW;
  LED2status = LOW;
  LED3status = LOW;
  LED4status = LOW;
  Serial.println("GPIO17 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,LED2status,LED3status,LED4status)); 
}


void handle_NotFound(){
  server.send(404, "text/plain", "Not found");

}

String SendHTML(uint8_t LED1status,uint8_t LED2status,uint8_t LED3status,uint8_t LED4status){
  String ptr1 = "<!DOCTYPE html> <html>\n";
  ptr1 +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr1 +="<title>LED CONTROL</title>\n";
  ptr1 +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  ptr1 +="body{margin-top: 30px;} h1 {color: #444444;margin: 30px auto 30px;} h3 {color: #444444;margin-bottom: 30px;}\n";
  ptr1 +=".button {display: block;width: 50px;background-color: #3498db;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
  ptr1 +=".button-on {background-color: #3498db;}\n";
  ptr1 +=".button-on:active {background-color: #2980b9;}\n";
  ptr1 +=".button-off {background-color: #34495e;}\n";
  ptr1 +=".button-off:active {background-color: #2c3e50;}\n";
  ptr1 +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
  ptr1 +="</style>\n";
  ptr1 +="</head>\n";
  ptr1 +="<body>\n";
  ptr1 +="<h1>ESP32 Web Server</h1>\n";
  ptr1 +="<h3>NODEMCU CONTROL</h3>\n";

  if(LED1status)
  {ptr1 +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";}
  
  else
  {ptr1 +="<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";}

  if(LED2status)
  {ptr1 +="<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";}
  
  else
  {ptr1 +="<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";}
  
  if(LED3status)
  {ptr1 +="<p>LED3 Status: ON</p><a class=\"button button-off\" href=\"/led3off\">OFF</a>\n";}
  
  else
  {ptr1 +="<p>LED3 Status: OFF</p><a class=\"button button-on\" href=\"/led3on\">ON</a>\n";}

  if(LED4status)
  {ptr1 +="<p>LED4 Status: ON</p><a class=\"button button-off\" href=\"/led4off\">OFF</a>\n";}
  
  else
  {ptr1 +="<p>LED4 Status: OFF</p><a class=\"button button-on\" href=\"/led4on\">ON</a>\n";}
  
  ptr1 +="</body>\n";
  ptr1 +="</html>\n";
  return ptr1;
}
2

Could you be a bit more descriptive?

Such as are you wanting your webserver to access the MQTT Broker information to display that info on your web server? Sure, use PubSubClient to get payloads from the MQTT Broker, parse the payload and apply the payload as is your wish.

3

What i want to say is, i want to connect directly through the internet to this web server that i created. I haven't seen any examples of this on the internet. Mqtt servers have their own interfaces. I want to connect to my esp32's web server through web site by entering ip address. Is it possible to do it using only the code without going to the mqtt servers website?

4

I don’t think you could do that, but you could have the esp turn on and off the lights based on mqtt messages and forget about the webserver.

Jimmy