ESP32 Webserver Relay 2 Channel Module Opto Isolated 3.3V Logic

/*
This complete code sets up a web server on the ESP32 to control a 2 Channel Relay Module using a simple HTML interface with buttons to toggle the relays. The HTML is embedded in the Arduino code as a raw string literal, and the ESP32 serves the HTML file when requested.

Make sure to replace "your_SSID" and "your_PASSWORD" with your Wi-Fi network credentials.

After uploading the code, open the Serial Monitor, and you should see the ESP32 connecting to your Wi-Fi network. Once connected, it will display the assigned IP address. Use this IP address to control the relays from a web browser.
*/

#include <WiFi.h>
#include <ESPAsyncWebServer.h>

// Replace with your network credentials
const char* ssid = "your_SSID";
const char* password = "your_PASSWORD";

// Define the ESP32 pins connected to the Relay Module
const int relayPin1 = 26; // Connect the first relay channel to GPIO 26
const int relayPin2 = 27; // Connect the second relay channel to GPIO 27

// Create an instance of the server
AsyncWebServer server(80);

void setup() {
  // Serial port for debugging purposes
  Serial.begin(115200);

  // Set the relay pins as output
  pinMode(relayPin1, OUTPUT);
  pinMode(relayPin2, OUTPUT);

  // Initialize the relays to be off
  digitalWrite(relayPin1, LOW);
  digitalWrite(relayPin2, LOW);


 // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }
  Serial.println("Connected to WiFi");
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());

  // Serve the HTML file
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", R"rawliteral(
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Relay Control</title>
  <script>
    // Function to send a request to the ESP32 to toggle the specified relay
    async function toggleRelay(relay) {
      const response = await fetch(`/relay${relay}`);
      const text = await response.text();
      document.getElementById(`status${relay}`).innerText = text;
    }

    async function getInitialStatus() {
      for (let i = 1; i <= 2; i++) {
        const response = await fetch(`/relay${i}/status`);
        const text = await response.text();
        document.getElementById(`status${i}`).innerText = text;
      }
    }
  </script>
</head>
<body onload="getInitialStatus()">
  <h1>Relay Control</h1>

  <button onclick="toggleRelay(1)">Toggle Relay 1</button>
  <p id="status1">Relay 1 status: unknown</p>

  <button onclick="toggleRelay(2)">Toggle Relay 2</button>
  <p id="status2">Relay 2 status: unknown</p>
</body>
</html>
    )rawliteral");
  });

  // Route for handling the toggle request of relay 1
  server.on("/relay1", HTTP_GET, [](AsyncWebServerRequest *request){
    digitalWrite(relayPin1, !digitalRead(relayPin1)); // Toggle relay 1
    request->send(200, "text/plain", digitalRead(relayPin1) ? "Relay 1 ON" : "Relay 1 OFF");
  });

  // Route for handling the toggle request of relay 2
  server.on("/relay2", HTTP_GET, [](AsyncWebServerRequest *request){
    digitalWrite(relayPin2, !digitalRead(relayPin2)); // Toggle relay 2
    request->send(200, "text/plain", digitalRead(relayPin2) ? "Relay 2 ON" : "Relay 2 OFF");
  });

    // Route for handling the status request of relay 1
  server.on("/relay1/status", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(200, "text/plain", digitalRead(relayPin1) ? "Relay 1 ON" : "Relay 1 OFF");
  });

  // Route for handling the status request of relay 2
  server.on("/relay2/status", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(200, "text/plain", digitalRead(relayPin2) ? "Relay 2 ON" : "Relay 2 OFF");
  });

  // Start the server
  server.begin();
}

void loop() {
  // Nothing to do here, the web server is handling everything
}