Control a relay from your phone over Wi-Fi

This is where the Internet of Things begins. The ESP32 joins your Wi-Fi network and serves a small web page with two buttons. Tap a button on your phone and the relay clicks on or off.

What you'll learn

• How to connect the ESP32 to Wi-Fi
• How to run a simple web server on the ESP32
• How a relay module switches a separate circuit

What you need

• ESP32-DevKitC V4 board and USB cable
• Two-channel relay module (one channel is used)
• Breadboard and jumper wires
• Optional: an LED with a 220 Ω resistor to show the relay working

Safety first

Only switch low-voltage circuits in this lesson, such as an LED circuit or a small battery-powered device. Never connect mains electricity (the wall socket) to the relay. That needs proper training and enclosures.

Wiring

Most relay modules like this one switch on when the IN pin is pulled LOW. The sketch takes care of that.

The sketch

Replace YOUR_WIFI_NAME and YOUR_WIFI_PASSWORD with your own network details. The ESP32 only supports 2.4 GHz Wi-Fi.

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

const char* WIFI_NAME = "YOUR_WIFI_NAME";
const char* WIFI_PASSWORD = "YOUR_WIFI_PASSWORD";

const int RELAY_PIN = 23;
bool relayOn = false;

WebServer server(80);

void setRelay(bool on) {
  relayOn = on;
  digitalWrite(RELAY_PIN, on ? LOW : HIGH); // most modules are active LOW
}

String page() {
  String html = "<!DOCTYPE html><html><head><meta name='viewport' content='width=device-width, initial-scale=1'>";
  html += "<title>ESP32 relay</title></head><body style='font-family:sans-serif;text-align:center'>";
  html += "<h1>ESP32 relay</h1><p>The relay is <strong>";
  html += relayOn ? "ON" : "OFF";
  html += "</strong></p>";
  html += "<p><a href='/on'><button style='font-size:24px'>Turn on</button></a> ";
  html += "<a href='/off'><button style='font-size:24px'>Turn off</button></a></p>";
  html += "</body></html>";
  return html;
}

void setup() {
  Serial.begin(115200);
  pinMode(RELAY_PIN, OUTPUT);
  setRelay(false);

  WiFi.begin(WIFI_NAME, WIFI_PASSWORD);
  Serial.print("Connecting to Wi-Fi");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println();
  Serial.print("Open this address in your browser: http://");
  Serial.println(WiFi.localIP());

  server.on("/", []() { server.send(200, "text/html", page()); });
  server.on("/on", []() { setRelay(true); server.send(200, "text/html", page()); });
  server.on("/off", []() { setRelay(false); server.send(200, "text/html", page()); });
  server.begin();
}

void loop() {
  server.handleClient();
}

Try it

1. Upload the sketch and open the Serial Monitor at 115200 baud.
2. Wait for the address, for example http://192.168.1.42.
3. Open that address on a phone or computer connected to the same Wi-Fi.
4. Tap Turn on. You hear the relay click and its indicator LED lights up.

How it works

The ESP32 runs a tiny web server on port 80. Each address (/, /on, /off) has a handler function that switches the relay and sends the page back. The relay itself is an electrically controlled switch: a small current from the ESP32 moves a contact that can switch a separate circuit, kept apart from the ESP32.

Try this next

• Wire an LED circuit with its own battery through the relay's COM and NO contacts and switch it from your phone.
• Combine this with lesson 2: show the temperature on the page and switch the relay automatically when it gets too warm.

Troubleshooting

• Stuck on "Connecting to Wi-Fi": check the network name and password, and make sure the network is 2.4 GHz.
• The page loads but the relay doesn't click: check that VCC is on the 5V pin, not 3V3.
• The relay never switches off: some 5 V relay modules don't switch off fully with the ESP32's 3.3 V signal. Try powering the module's VCC from 3V3 instead.
• The relay is on when the page says OFF: your module is active HIGH. Swap LOW and HIGH in setRelay().