In this project you’ll create a standalone web server with an ESP32 that controls outputs (two LEDs) using the Arduino IDE programming environment. The web server is mobile responsive and can be accessed with any device that as a browser on the local network. We’ll show you how to create the web server and how the code works step-by-step.
If you want to learn more about the ESP32, read Getting Started Guide with ESP32.
Watch the Video Tutorial
This tutorial is available in video format (watch below) and in written format (continue reading this page).
Project Overview
Before going straight to the project, it is important to outline what our web server will do, so that it is easier to follow the steps later on.
- The web server you’ll build controls two LEDs connected to the ESP32 GPIO 26 and GPIO 27;
- You can access the ESP32 web server by typing the ESP32 IP address on a browser in the local network;
- By clicking the buttons on your web server you can instantly change the state of each LED.
This is just a simple example to illustrate how to build a web server that controls outputs, the idea is to replace those LEDs with a relay, or any other electronic components you want.
Installing the ESP32 board in Arduino IDE
There’s an add-on for the Arduino IDE that allows you to program the ESP32 using the Arduino IDE and its programming language. Follow one of the following tutorials to prepare your Arduino IDE:
- Windows instructions – Installing the ESP32 Board in Arduino IDE
- Mac and Linux instructions – Installing the ESP32 Board in Arduino IDE
Parts Required
For this tutorial you’ll need the following parts:
- ESP32 development board – read ESP32 Development Boards Review and Comparison
- 2x 5mm LED
- 2x 330 Ohm resistor
- Breadboard
- Jumper wires
You can use the preceding links or go directly to MakerAdvisor.com/tools to find all the parts for your projects at the best price!
Schematic
Start by building the circuit. Connect two LEDs to the ESP32 as shown in the following schematic diagram – one LED connected to GPIO 26, and the other to GPIO 27.
Note: We’re using the ESP32 DEVKIT DOIT board with 36 pins. Before assembling the circuit, make sure you check the pinout for the board you’re using.
ESP32 Web Server Code
Here we provide the code that creates the ESP32 web server. Copy the following code to your Arduino IDE, but don’t upload it yet. You need to make some changes to make it work for you.
/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
*********/
// Load Wi-Fi library
#include <WiFi.h>
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
// Set web server port number to 80
WiFiServer server(80);
// Variable to store the HTTP request
String header;
// Auxiliar variables to store the current output state
String output26State = "off";
String output27State = "off";
// Assign output variables to GPIO pins
const int output26 = 26;
const int output27 = 27;
// Current time
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0;
// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;
void setup() {
Serial.begin(115200);
// Initialize the output variables as outputs
pinMode(output26, OUTPUT);
pinMode(output27, OUTPUT);
// Set outputs to LOW
digitalWrite(output26, LOW);
digitalWrite(output27, LOW);
// Connect to Wi-Fi network with SSID and password
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
}
void loop(){
WiFiClient client = server.available(); // Listen for incoming clients
if (client) { // If a new client connects,
currentTime = millis();
previousTime = currentTime;
Serial.println("New Client."); // print a message out in the serial port
String currentLine = ""; // make a String to hold incoming data from the client
while (client.connected() && currentTime - previousTime <= timeoutTime) { // loop while the client's connected
currentTime = millis();
if (client.available()) { // if there's bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
header += c;
if (c == '\n') { // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
// that's the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what's coming, then a blank line:
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
// turns the GPIOs on and off
if (header.indexOf("GET /26/on") >= 0) {
Serial.println("GPIO 26 on");
output26State = "on";
digitalWrite(output26, HIGH);
} else if (header.indexOf("GET /26/off") >= 0) {
Serial.println("GPIO 26 off");
output26State = "off";
digitalWrite(output26, LOW);
} else if (header.indexOf("GET /27/on") >= 0) {
Serial.println("GPIO 27 on");
output27State = "on";
digitalWrite(output27, HIGH);
} else if (header.indexOf("GET /27/off") >= 0) {
Serial.println("GPIO 27 off");
output27State = "off";
digitalWrite(output27, LOW);
}
// Display the HTML web page
client.println("<!DOCTYPE html><html>");
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<link rel=\"icon\" href=\"data:,\">");
// CSS to style the on/off buttons
// Feel free to change the background-color and font-size attributes to fit your preferences
client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
client.println(".button2 {background-color: #555555;}</style></head>");
// Web Page Heading
client.println("<body><h1>ESP32 Web Server</h1>");
// Display current state, and ON/OFF buttons for GPIO 26
client.println("<p>GPIO 26 - State " + output26State + "</p>");
// If the output26State is off, it displays the ON button
if (output26State=="off") {
client.println("<p><a href=\"/26/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/26/off\"><button class=\"button button2\">OFF</button></a></p>");
}
// Display current state, and ON/OFF buttons for GPIO 27
client.println("<p>GPIO 27 - State " + output27State + "</p>");
// If the output27State is off, it displays the ON button
if (output27State=="off") {
client.println("<p><a href=\"/27/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/27/off\"><button class=\"button button2\">OFF</button></a></p>");
}
client.println("</body></html>");
// The HTTP response ends with another blank line
client.println();
// Break out of the while loop
break;
} else { // if you got a newline, then clear currentLine
currentLine = "";
}
} else if (c != '\r') { // if you got anything else but a carriage return character,
currentLine += c; // add it to the end of the currentLine
}
}
}
// Clear the header variable
header = "";
// Close the connection
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}
Setting Your Network Credentials
You need to modify the following lines with your network credentials: SSID and password. The code is well commented on where you should make the changes.
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
Uploading the Code
Now, you can upload the code and and the web server will work straight away. Follow the next steps to upload code to the ESP32:
1) Plug your ESP32 board in your computer;
2) In the Arduino IDE select your board in Tools > Board (in our case we’re using the ESP32 DEVKIT DOIT board);
3) Select the COM port in Tools > Port.
4) Press the Upload button in the Arduino IDE and wait a few seconds while the code compiles and uploads to your board.
5) Wait for the “Done uploading” message.
Finding the ESP IP Address
After uploading the code, open the Serial Monitor at a baud rate of 115200.
Press the ESP32 EN button (reset). The ESP32 connects to Wi-Fi, and outputs the ESP IP address on the Serial Monitor. Copy that IP address, because you need it to access the ESP32 web server.
Accessing the Web Server
To access the web server, open your browser, paste the ESP32 IP address, and you’ll see the following page. In our case it is 192.168.1.135.
If you take a look at the Serial Monitor, you can see what’s happening on the background. The ESP receives an HTTP request from a new client (in this case, your browser).
You can also see other information about the HTTP request.
Testing the Web Server
Now you can test if your web server is working properly. Click the buttons to control the LEDs.
At the same time, you can take a look at the Serial Monitor to see what’s going on in the background. For example, when you click the button to turn GPIO 26 ON, ESP32 receives a request on the /26/on URL.
When the ESP32 receives that request, it turns the LED attached to GPIO 26 ON and updates its state on the web page.
The button for GPIO 27 works in a similar way. Test that it is working properly.
How the Code Works
In this section will take a closer look at the code to see how it works.
The first thing you need to do is to include the WiFi library.
#include <WiFi.h>
As mentioned previously, you need to insert your ssid and password in the following lines inside the double quotes.
const char* ssid = "";
const char* password = "";
Then, you set your web server to port 80.
WiFiServer server(80);
The following line creates a variable to store the header of the HTTP request:
String header;
Next, you create auxiliar variables to store the current state of your outputs. If you want to add more outputs and save its state, you need to create more variables.
String output26State = "off";
String output27State = "off";
You also need to assign a GPIO to each of your outputs. Here we are using GPIO 26 and GPIO 27. You can use any other suitable GPIOs.
const int output26 = 26;
const int output27 = 27;
setup()
Now, let’s go into the setup(). First, we start a serial communication at a baud rate of 115200 for debugging purposes.
Serial.begin(115200);
You also define your GPIOs as OUTPUTs and set them to LOW.
// Initialize the output variables as outputs
pinMode(output26, OUTPUT);
pinMode(output27, OUTPUT);
// Set outputs to LOW
digitalWrite(output26, LOW);
digitalWrite(output27, LOW);
The following lines begin the Wi-Fi connection with WiFi.begin(ssid, password), wait for a successful connection and print the ESP IP address in the Serial Monitor.
// Connect to Wi-Fi network with SSID and password
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
loop()
In the loop() we program what happens when a new client establishes a connection with the web server.
The ESP32 is always listening for incoming clients with the following line:
WiFiClient client = server.available(); // Listen for incoming clients
When a request is received from a client, we’ll save the incoming data. The while loop that follows will be running as long as the client stays connected. We don’t recommend changing the following part of the code unless you know exactly what you are doing.
if (client) { // If a new client connects,
Serial.println("New Client."); // print a message out in the serial port
String currentLine = ""; // make a String to hold incoming data from the client
while (client.connected()) { // loop while the client's connected
if (client.available()) { // if there's bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
header += c;
if (c == '\n') { // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
/ that's the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what's coming, then a blank line:
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
The next section of if and else statements checks which button was pressed in your web page, and controls the outputs accordingly. As we’ve seen previously, we make a request on different URLs depending on the button pressed.
// turns the GPIOs on and off
if (header.indexOf("GET /26/on") >= 0) {
Serial.println("GPIO 26 on");
output26State = "on";
digitalWrite(output26, HIGH);
} else if (header.indexOf("GET /26/off") >= 0) {
Serial.println("GPIO 26 off");
output26State = "off";
digitalWrite(output26, LOW);
} else if (header.indexOf("GET /27/on") >= 0) {
Serial.println("GPIO 27 on");
output27State = "on";
digitalWrite(output27, HIGH);
} else if (header.indexOf("GET /27/off") >= 0) {
Serial.println("GPIO 27 off");
output27State = "off";
digitalWrite(output27, LOW);
}
For example, if you’ve press the GPIO 26 ON button, the ESP32 receives a request on the /26/ON URL (we can see that that information on the HTTP header on the Serial Monitor). So, we can check if the header contains the expression GET /26/on. If it contains, we change the output26state variable to ON, and the ESP32 turns the LED on.
This works similarly for the other buttons. So, if you want to add more outputs, you should modify this part of the code to include them.
Displaying the HTML web page
The next thing you need to do, is creating the web page. The ESP32 will be sending a response to your browser with some HTML code to build the web page.
The web page is sent to the client using this expressing client.println(). You should enter what you want to send to the client as an argument.
The first thing we should send is always the following line, that indicates that we are sending HTML.
<!DOCTYPE HTML><html>
Then, the following line makes the web page responsive in any web browser.
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
And the following is used to prevent requests on the favicon. – You don’t need to worry about this line.
client.println("<link rel=\"icon\" href=\"data:,\">");
Styling the Web Page
Next, we have some CSS text to style the buttons and the web page appearance. We choose the Helvetica font, define the content to be displayed as a block and aligned at the center.
client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
We style our buttons with the #4CAF50 color, without border, text in white color, and with this padding: 16px 40px. We also set the text-decoration to none, define the font size, the margin, and the cursor to a pointer.
client.println(".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
We also define the style for a second button, with all the properties of the button we’ve defined earlier, but with a different color. This will be the style for the off button.
client.println(".button2 {background-color: #555555;}</style></head>");
Setting the Web Page First Heading
In the next line you can set the first heading of your web page. Here we have “ESP32 Web Server”, but you can change this text to whatever you like.
// Web Page Heading
client.println("<h1>ESP32 Web Server</h1>");
Displaying the Buttons and Corresponding State
Then, you write a paragraph to display the GPIO 26 current state. As you can see we use the output26State variable, so that the state updates instantly when this variable changes.
client.println("<p>GPIO 26 - State " + output26State + "</p>");
Then, we display the on or the off button, depending on the current state of the GPIO. If the current state of the GPIO is off, we show the ON button, if not, we display the OFF button.
if (output26State=="off") {
client.println("<p><a href=\"/26/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/26/off\"><button class=\"button button2\">OFF</button></a></p>");
}
We use the same procedure for GPIO 27.
Closing the Connection
Finally, when the response ends, we clear the header variable, and stop the connection with the client with client.stop().
// Clear the header variable
header = "";
// Close the connection
client.stop();
Wrapping Up
In this tutorial we’ve shown you how to build a web server with the ESP32. We’ve shown you a simple example that controls two LEDs, but the idea is to replace those LEDs with a relay, or any other output you want to control. For more projects with ESP32, check the following tutorials:
- Build an All-in-One ESP32 Weather Station Shield
- ESP32 Servo Motor Web Server
- Getting Started with ESP32 Bluetooth Low Energy (BLE)
- More ESP32 tutorials
This is an excerpt from our course: Learn ESP32 with Arduino IDE. If you like ESP32 and you want to learn more, we recommend enrolling in Learn ESP32 with Arduino IDE course.
It seems a waste of the capabilities within the ESP32 to just switch two LEDs when you can do that with an ESP-01 so easily and cheaply.
Nice to see the ESP32 making an appearance though…
right
This is a basic project that readers can build upon, the idea is to share a basic web server example that you can customise to control any appliance easily
hi Sir I was using esp8266 before and your blogs really helped me in this but now i m using esp32 and I am having problem in saving wifi credentials in eeprom using webserver 192.168.4.1 my code was working with esp8266 but now its not working with esp32 kindly help me
Sir, how to add the range coverage the wifi access point signal from Esp32?
While it might seem a “waste”, it’s ridiculous to learn another ESP version and its startup learning curve. That sort of thinking can take you back to the 8-bit world. Really? Are you so strapped for cash you can’t afford a $7 ESP32-Dev board?
First of, $ has different value for different countries and at different ages, and yes for some people 5$ matters.
But is not only about money , is about principles:
If you could afford it, would you buy a hyercar for the sole purpose of going to the mail box?
I also understand that is just an example to help people get the idea and we thank the author for that.
Very clear – must try this.
Thank you Sunil!
Thanks for the sketch, works fine.
Thanks for letting me know!
Regards,
Rui
i have a problem when i send a get request in the serial monitor you can see i get two of the same reply ok i send like http://74.194.87.430:83/15on i have the ports forwarded so i can send from anywhere but i get a double reply like 15on along with all the other information then it repeats its self all over again so in my case tje first one turn it on or off perfectly but second one turns it back off. its hooked to transmitters so the same code turns it off. thank you
hi rui,
tried your code(meant for ESP32) here with ESP8266 wi fi shield connected to arduino uno 3,
i am getting errors. of course – i am doing something wrong initially.
the board i select is arduino uno. cant see any ESP stuff on drop down on Tools.
(what do i do to see the ESP8266 on drop down menu?)
programmer – arduinoisp.
i tried an update on formware but programmer not responding message.
here’s the error i get at compilation:
C:\Users\i5\Documents\Arduino\libraries\arduino_585573\src/WiFi101.h:37:2: note: previous declaration ‘wl_status_t WL_NO_SHIELD’
WL_NO_SHIELD = 255,
^
In file included from C:\Program Files (x86)\Arduino\libraries\WiFi\src/WiFi.h:26:0,
from C:\Users\i5\Documents\Arduino\ruiWiFi\ruiWiFi.ino:8:
C:\Program Files (x86)\Arduino\libraries\WiFi\src/utility/wl_definitions.h:52:26: error: redeclaration of ‘WL_IDLE_STATUS’
WL_IDLE_STATUS = 0,
^
and so on where WL_ is encountered.
I think i mentioned that i got the ethernet shield on my first attempt.
but unfortunately i have struggled with this wi fi shield.
with other code i tried i get error – wifi shield NOT present
Pl. help.
sunil
Great tutorial!
I like your work!
Thanks for sharing your knowledge!
I’m very late on this but if anyone else ever has this issue; you’ll have to add the ESP boards to your additional board ulrs in the arduino IDE. found here: https://randomnerdtutorials.com/how-to-install-esp8266-board-arduino-ide/
Thank you for your efforts.
How would I implement a login page on this web server? I don’t want unauthorized users switching equipment that is hooked up to the ESP32. Great tutorial. Awesome website too!
Hi,
I know how to do it, but unfortunately I don’t have any tutorials on that subject…
Thanks for your feedback. Regards,
Rui
Thanks a lot for code.. Have nice day !
You’re welcome! 🙂
Bom dia Sara, está disponível ou conhece alguém que me possa desenvolver uma app com ESP32?
Hernanymanuelpt at gmail.com
Olá.
Nós não fazemos projetos à medida.
Infelizmente, não conheço ninguém que faça esse tipo de trabalho.
Cumprimentos,
Sara Santos
hi, i am using my on server to send from esp32 to server, but it did not work i share my code plz help
Hi,
This sketch is giving me error, on arduino IDE and on PlatormIO
The IP adress is connected.
I can access it from outside. The lamps are going on/off. No problem
But an error message is shown at the serial monitor.
The 2 server sketch is showing the same behavior but it could NOT be connected from “outside”.
WiFi connected.
IP address:
192.168.0.116
New Client.
GET /26/on HTTP/1.1
Host: 192.168.0.116
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_6 like Mac OS X) AppleWebKit/604.5.6 (KHTML, like Gecko) Version/11.0 MException in thread rx:
Traceback (most recent call last):
File “C:\Python27\Lib\threading.py”, line 801, in __bootstrap_inner
self.run()
File “C:\Python27\Lib\threading.py”, line 754, in run
self.__target(*self.__args, **self.__kwargs)
File “c:\users\jean-luc\.platformio\penv\lib\site-packages\serial\tools\miniterm.py”, line 448, in reader
self.console.write_bytes(data)
File “c:\users\jean-luc\.platformio\penv\lib\site-packages\serial\tools\miniterm.py”, line 63, in write_bytes
self.byte_output.write(byte_string)
IOError: [Errno 0] Error
Hi Jean,
As I said in a previous comment I don’t use PlatformIO.
That section describes the write behavior of the web server:
WiFi connected.
IP address:
192.168.0.116
New Client.
GET /26/on HTTP/1.1
Host: 192.168.0.116
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_6 like Mac OS X) AppleWebKit/604.5.6 (KHTML, like Gecko) Version/11.0 MException in
That’s exactly what it should be doing.
But where’s that error being printed?
Traceback (most recent call last):
File “C:\Python27\Lib\threading.py”, line 801, in __bootstrap_inner
self.run()
File “C:\Python27\Lib\threading.py”, line 754, in run
self.__target(*self.__args, **self.__kwargs)
File “c:\users\jean-luc\.platformio\penv\lib\site-packages\serial\tools\miniterm.py”, line 448, in reader
self.console.write_bytes(data)
File “c:\users\jean-luc\.platformio\penv\lib\site-packages\serial\tools\miniterm.py”, line 63, in write_bytes
self.byte_output.write(byte_string)
IOError: [Errno 0] Error
Works normally on a 64bits machine…
The two lines:
const char* ssid = “……”;
const char* password = “….”;
are giving me the following error in ARDUINO IDE:
“sketch_mar10a:33: error: invalid conversion from ‘const char*’ to ‘char*’ [-fpermissive]
WiFi.begin(ssid, password);”
I have to use:
char* ssid = “…..”;
char* password = “…..”;
On PlatformIO, this fault is not observed.
At the other hand, on PlatformIO, if I use “char*…” only, I’ve an error message.
Any idea?
Hi Jean,
I don’t use PlatformIO. Do you have the latest version of the ESP32 add-on for the Arduino IDE installed?
How could this be done with a pic microcontroller, which part of this code would go in the pic microcontroller?
Hello Cristian, unfortunately I don’t have any tutorials with the PIC microcontroller…
Thanks for asking,
Rui
I’m trying this in a hotel room and I get the following:
Connecting to Hilton Honors
…….
WiFi connected
IP address:
172.20.0.58
And then when I try to access IP using http://172.20.0.58 the web page basically times out. So I added 172.20.0.58 as a firewall connection security exclusion, and still no luck as the web browser still times out. I’m thinking that this has something to do with the Hotel’s network preventing me from “hacking” another computer. Any ideas? I’ll try this again when I get home….oh and BTW neat stuff you are doing here with your site, thanks for sharing.
Are you using Google Chrome? Can you try different web browser? Some readers experienced problems with this project on Safari. Your code is correct and you are accessing the right IP address, so it should load the web server. Trying on different devices or using a different browser might help you find what’s happening. (it shouldn’t be necessary to change any security or firewall configurations… unless you have a very strict antivirus that blocks many features).
Great Tutorial man! Cheers!
Thanks for reading!
cannot declare variable ‘server’ to be of abstract type ‘WiFiServer’
I am stuck, can you help?
Hi everbody. First of all thank you for the great tutorial.
Unfortunately i think i found a bug, this is what I read in my serial monitor when I use chrome:
New Client.
GET / HTTP/1.1
Host: 192.168.1.110
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate
Accept-Language: it-IT,it;q=0.9,en-GB;q=0.8,en;q=0.7,en-US;q=0.6
Client disconnected.
New Client.
As you can see there is a string that should not be there (“New Client.”).
I found this error on chrome, both from a PC and a smartphone, while the incognito mode seems to work properly. I’ve tried edge too and it works well.
Any suggestions?
Hi Simone.
That situation can be solved using the trick we show here: https://rntlab.com/question/solved-esp32-web-server-drops-connection-crashes/
I hope this helps,
Regards, Sara.
A lot of thanks for this amazing tutorial. But I am facing a trouble
New Client.
GET / HTTP/1.1
Host: 192.168.4.1
Connection: keep-alive
Accept-Language: en-GB, en, en-US, en
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0(Linux; Android 13; SAMSUNG SM-M526B) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/23.0 Chrome/115.0.0.0 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,/;q=0.8.application/signed-exchange; v=b3;q=0.7
Accept-Encoding: gzip, deflate
Client disconnected.
New Client.
After using the procedure given in the link: https://rntlab.com/question/solved-esp32-web-server-drops-connection-crashes/
Still I am facing this issue.
It works fine with Arduino IDE thanks
I’ve been searching the internet trying to find out how to add some code to this to make my ip static with no luck, is there a simple way to do this that maybe escaping my search? thanks
Hello Tracy,
Please take a look at this thread: https://rntlab.com/question/ip-address-of-server-keeps-changing/
Are you familiar with MAC Addresses? Basically a MAC address is a unique identifier assigned to your ESP32 (or any network device). You can use this function to retrieve your ESP32 MAC address while using a WiFi or web server example:
String mac = WiFi.macAddress();
Serial.println(mac);
Then, you login into your router dashboard (the router ip and login/pass are usually printed in the router label). You can assign a fixed IP address to your ESP MAC address, so it always has the same IP address.
The steps to assign a fixed IP to a MAC address is very similar to all the routers.
Hi,
I have some kit led + resistors, but somehow I have only 220 ohm and not 330 ohm resistors in my kit, is this will work?
Kind regards
Hi Peter!
Yes, you can use 220Ohm resistor without any problem.
Regards,
Sara 🙂
great!! nice tutorial…
Thanks 🙂
This is a great tutorial. I have the code working. Just one issue if I use ‘GET’ on WiFi credentials the are cached on the browser url, so can I use ‘POST’ instead. I tried but when I send the from with POST, the header.indexOf(“PUT…. does not see the data. Any idea what I am doing wrong?
Hi Anwar.
I personally, never used that method. So, I have no idea what may be wrong.
I’m sorry I can’t help.
Regards,
Sara 🙂
Hi Folks,
Great tutorials – I’m learning a lot. One startup problem though – it compiles and uploads nicely, then com7 starts laying down “…..”. If I push the Reset button on the ESP32, I get:
………ets Jun 8 2016 00:22:57
rst:0x1 (POWERON_RESET),boot:0x13 (SPI_FAST_FLASH_BOOT)
configsip: 0, SPIWP:0xee
clk_drv:0x00,q_drv:0x00,d_drv:0x00,cs0_drv:0x00,hd_drv:0x00,wp_drv:0x00
mode:DIO, clock div:1
load:0x3fff0018,len:4
load:0x3fff001c,len:808
load:0x40078000,len:6084
load:0x40080000,len:6696
entry 0x400802e4
Connecting to Chicken_Run
……………………………., and more dots. It never does connect though. It worked yesterday on the simpler issue, but I must have changed something.
Any ideas?
Thanks
Dave
Hi Dave.
You have to hold down the BOOT button, until the dots disappear.
Take a look at bullet 4) on the ESP32 troubleshooting guide: https://randomnerdtutorials.com/esp32-troubleshooting-guide/
Let me know if it helped.
Regards,
Sara 🙂
Hello Sara
i have the same problem the esp32 that i have it have auto-reset. however, I tried with other esp32 but it is the same result.
i read this guide but it doesn’t work in the problem that I have.
https://randomnerdtutorials.com/esp32-troubleshooting-guide/
do you have any suggestions for me.
You can also read this and see if it helps: https://randomnerdtutorials.com/solved-failed-to-connect-to-esp32-timed-out-waiting-for-packet-header/
Regards,
Sara
Hi Sara,
That worked perfectly – thank you.
It had connected nicely a couple of times, but I couldn’t get it to repeat. Your comment explains why – on those times it worked, I must have accidentally held the BOOT button down long enough for it to go through. Obviously (DOH!), I hadn’t put the length of the button press together with successful / unsuccessful connects, but your suggestion was – of course! – dead on.
Thank you. Your support is appreciated very much.
Dave, Canada
I’m glad it works!
Thank you! 🙂
Thanks for this. I am having a problem with pin 27. I have two ESP32 boards and the pin 27 doesn’t work either one with this code. I check the code and don’t see problem. What could this be?
Thank you!
Hi Vidar.
What is the problem with GPIO 27 exactly?
Which ESP32 board are you using?
Hello i have a question how i can add more buttons to controle more leds ?
You need to duplicate the web page section that generates the HTML buttons, but I don’t have any example on that exact subject
How can I make some changes in html code here, I mean make it more elegant (css)? 😉
Hi Chiefer.
You can add the CSS directly on the HTML code and send it directly on the client.println() lines.
Or you can create a separated CSS file that you mention in the HTML text.
I recommend taking a look at the following tutorial that uses separated CSS and HTML files. It is a much easier way to change the appearance of the page.
https://randomnerdtutorials.com/esp32-web-server-spiffs-spi-flash-file-system/
I hope this helps.
Regards,
Sara
Nice tutorial. Thanks for sharing Rui Santos. I have a problem want to ask. Could I implement this but using Ethernet cable to connect to the Internet instead of WiFi. And if yes how can I do that? Thanks a lot. Please answer me ASAP !!! 🙂
Hi Gia.
I’ve never used ESP32 with Ethernet. I just use it with Wi-Fi.
We have a tutorial with Arduino and Ethernet (we don’t have anything about ESP32 and Ethernet)
https://randomnerdtutorials.com/arduino-ethernet-web-server-with-relay/
Regards,
Sara
Diese Seite ist ja für die Ausländer, wo ist den die DEUTSCHE Seite?????????????????
Der Inhalt unserer Website ist nur in englischer Sprache
Hmm.. I get an IP in Seriel Monitor, but I can not Connect to it. Can not find that IP in my router or in Fing eighter! What am I doing wrong.
Hi.
Without any further details, it is very difficult to understand what might be wrong.
Can you provide more details?
Regards,
Sara
I can try 🙂
I start Programming the ESP32 With Arduino IDE!
Programming OK.
Serial Monitor tells me the IP adress
Try conecting to IP via browser but only get’s Time out!
CMD in Windows and try to ping the board
Pinging 10.99.10.226 with 32 bytes of data:
Request timed out.
Reply from 10.99.10.2: Destination host unreachable.
Reply from 10.99.10.2: Destination host unreachable.
Reply from 10.99.10.2: Destination host unreachable.
Times out or unreachable
Also tried With static IP
KingC – I have the same issue. Did you resolve your problem… If so, how?
Hey, nice tutorial, but a very important part would be: at every button push, to redirect the browser to the root, so in case of refresh, the switch will not be re-activated by mistake. Is there a way to do this?
Thanks
Hi Constantin.
To prevent the switch to be reactivated, you can add an if statement on your code checking the current state of the switch, and if it is the same, don’t do anything.
When you click the button, you are redirected to the /26/on url to make the request. So, I don’t know how to redirect the browser to the root to prevent making unnecessary requests. It should be possible, but I’m not familiar with that subject.
Regards,
Sara
Is there a way to show an image from an URL in this Project?
I would like to show a image from a surveillance camera beneath the buttons!
The URL would be something like: http://someurl/cgi-bin/snapshot.cgi
Hi, first of all I would like to thank you for this awesome tutorial.
Im just starting to work with the ESP32 itselft along with HTML and CSS . I understand that in order to style and build the web page, “in line style” was used but i don’t quite understand the syntax. I assume that it as to do with the Wifi library right? do you have any recommendations to where should i go in order to get a better understaning of how i should build my custom webpage using the same library?
Best regards from Portugal!
Jaime
Hi Jaime.
I agree with you that it is a bit tricky to integrate the CSS and HTML with the library we’re using.
Basically, what you should do is:
– compact your HTML (that should include the CSS) text in some lines, while being readable at the same time
– add a backslash (\) before every double quote (the HTML text has double quotes. To send those double quotes to the client, without interfering with the double quotes of the client.println(“”), you need to add an escape character called backslash ( \) before the double quotes)
– use the client.println() function to send the HTML text to the client.
Alternatively, you can compact all your HTML+CSS in a String variable and sent it all at once to the client. However, it will be more difficult to handle variables that change like the state of the output.
There’s also the alternative to load all your HTML and CSS from SPIFFS and use an asynchronous web server: https://randomnerdtutorials.com/esp32-web-server-spiffs-spi-flash-file-system/
I hope this helps and thank you for your interest in our work.
Regards,
Sara
Hello Rui.
I’m having trouble when I connect with the IP address I receive in my IDE.
When I put the IP in the browser (Chrome, Firefox), the following message appears:
html {font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;} .button {background-color: # 4CAF50; border: none; color: white; padding: 16px 40px; text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;} .button2 {background-color: # 555555;} ESP32 Web Server GPIO 26 – State off ON GPIO 27 – State off ON
What could be wrong?
Thank you very much.
Hi Jefferson.
I’m sorry you’re having issues with the project.
Are you using our exact code, or did you make any modifications?
I found that we had an issue displaying the code on the website.
Everything should be fixed now.
Can you copy the code again? https://raw.githubusercontent.com/RuiSantosdotme/ESP32-Course/master/code/WiFi_Web_Server_Outputs/WiFi_Web_Server_Outputs.ino
Regards,
Excelente!!!
Muito útil.
Hi, thx por your post. I tried your code and works very well. If I understood correctly, we connect ESP to our router, which provides an internal IP, then we connect another device to ESP throught our router. It is possible to do this without router? I mean, asigning an ip statically to ESP and then connect other device to ESP directly, without router.
Thx in advance
Hi Victor.
Yes, you can do that. You can set the ESP32 as an access point.
Read this tutorial: https://randomnerdtutorials.com/esp32-access-point-ap-web-server/
Regards,
Sara
Thx! This is exactly what I need.
I’m pretty new on ESP32 world. I have another question, It is possible to use ESP32 as proxy between a station and the router? I mean, every time the station (mobile, pc…) wants to reach internet, every package it wants to send to the router, it must past through the ESP32 first. Something like: station->ESP32->router->internet->router->ESP32->station. Routing tables whould be necessary?
Thx again for your time and patience.
Hello! I followed your instructions precisely… everything I did produced the exact outcome you documented. As the last step, I enabled the sketch but fail to get a connection. I get as far as “Connecting to mySSID……….” and then I just get an endless number of dots. I’m currently using a Mac OS with the Arduino IDE. I specifically took your advice and purchased an ESP32 DEVKIT DOIT board. I’m at a complete loss as to how to proceed. Up until the point where I would have viewed my board’s IP address on the Serial Monitor, everything had gone perfectly. Any thoughts?
Hi Keith.
That message with infinite dots, usually happens when one forgets to insert the network credentials on the code, or the network credentials are incorrect.
Please make sure that you have your network credentials inserted and without typos.
Regards,
Sara
Nope. still error. same error as him. wish this article will include troubleshoot problem or link. i tried different network credentials NONE works
Make sure your board is relatively close to your router.
Additionally, you may need to change your network name if it has spaces or special characters.
Regards,
Sara
Is it necessary to use the LEDs or can it be done without them?, And now it is being used and is looking for a server to communicate with an android application to make a gps
I’m sorry, but I didn’t understand your question.
Have been experimenting with the ESP 32 TTGO. Uploaded this example and you have given me lots to think about regarding talking to oled display and further capabilities.
Excellent code, concise instruction, loaded and running first attempt!
Thank You 🙂
Thank you for following our work.
Regards,
Sara
Rui thank you for a very complete tutorial. I used your project to remote control an old police lightbar that I converted to all LED. I used a pmos circuit to switch the higher amperage circuits and it all works great! I have 6 different function switches. I have video if you want.
Hi Eric.
That would be great.
Just send us an email saying you want to share your video and we’ll get back to you.
Use our contact page: https://randomnerdtutorials.com/support/
Thank you.
Regards,
Sara
Great tutorial…
I’m curious – can the 32 be a standalone webserver – meaning – no router / local network required?
I’d like to be able to connect to one using my cell phone without having to authenticate thru a wifi network.
Hopefully there’s a way where if you know the IP address – you could connect without requiring a router…
Hi Gaver.
Yes, you can do that.
You just need to set the ESP32 as an access point.
See our tutorial about setting the ESP32 as an access point: https://randomnerdtutorials.com/esp32-access-point-ap-web-server/
Regards,
Sara
Hi, how to add the range coverage of the wifi access point signal from esp32? I want to use in wide area, maybe the distance is 100 m
Hi.
It will depend on your router and the ESP32 board you’re using. You can add an external antenna to your board, and it will increase the wi-fi range.
For longer distances, it is better to use other communication protocols like LoRa or ESP-NOW:
– LoRa: https://randomnerdtutorials.com/?s=LoRa
– ESP-NOW: https://randomnerdtutorials.com/?s=ESP-NOW
I hope this helps.
Regards,
Sara
Thanks Sara for your quick and informative reply!
Very helpful…
It works fine. I am just wondering it it is possible to add password protection of the server as I am intend to use it over the internet by forwarding its localnet port. If it can be done, it will be much more useful.
Thanks for your good work.
Can the ESP32 have multiple clients ? ( not the one with browser, and a smartphone on another )
The ESP32 should be able to receive requests from a browser or SmartPhone on one end, and also other ESPxx “STA”tions at the other end.
I want to be able to connect multiple ESP8266 configured as STAtions and sending temperature/humidity/water flow etc to your article’s ESP32 configured as SoftAP and in turn this ESP32 will render the charts on a web server.
Essentially, ESP32 it will act as a AP to the end point STAs, and in turn act as an AP to the browser.
The next question is : Can this ESP32 be configured to talk to a Home Wireless router so that it can send data to the cloud after it gets data from multiple STAs.
Thanks
Hello!
I have problem with my serial monitor-only response from my esp32 is something like this: ⸮@$Ί}⸮⸮⸮Ì⸮f2⸮=9⸮/⸮⸮yS⸮
On another sites i read that this is because i have a wrong board configuration.
My board is esp32 devkit v1 and all settings I have same like you.
Maybe its because i have a 30 pin module and not 36?
Thanks
PS sorry for my english
Hi Tomas.
That is probably due to wrong baud rate on the Serial Monitor.
In the Serial Monitor, on the bottom right corner, select the 115200 baud rate.
That has nothing to do with the number of pins.
Regards,
Sara
Hello Sara and Rui,
I’m trying to combine lora receiver and web server to publish LoRAData.
I succeed to get LoRAData OR web server BUT never both at the same time ;-).
If I receive lora packets the web server doesn’t answer and if I change the code the web server is answering but no more LoRA packets received. As I’m not a C/C++ guru I ask your help. Below is the code when http server is OK but LoRa is NOK.
Thanks a lot in advance.
PS : Wordfence is blocking my code. How can I sent it to you ?
Bernard
Hi.
I see from your email that you have access to our “Learn ESP32 with Arduino IDE” course.
We have something similar to what you want to build on Module 11.
The code for receiving packets and building a web server simultaneously is on Unit 3.
Access your course here: https://rntlab.com
If you have any doubts, you can use the forum for the RNTLAB members.
Regards,
Sara
Hi Sara,
thanks for that, I will make a try on that.
Bernard
hello, could you please tell me where you got the files for the schematic diagram? thanks
Hi Marcos.
What do you mean?
We use Fritzing to design our diagrams.
Regards,
Sara
Boa Tarde Rui,
Usei esse exemplo de projeto e funcionou muito bem. Mas estou tendo um problema com o outros aparelhos conectados ao wifi, eles estão sendo desconectados quando o ESP está conectado. Por exemplo, o meu celular fica tentando se conectar e não consegue, até que eu desligue o ESP, ai ele volta a conseguir conectar.
Se puder me ajudar agradeço.
Hi,
How can we have the time with the wifi server?
JPD
Hi Jean Pierre.
You can follow this tutorial: https://randomnerdtutorials.com/esp32-ntp-client-date-time-arduino-ide/
Regards,
Sara
Hi, please don’t waste any time on my question, it was my error in inputting my SSID, once corrected the program worked fine.
Many thanks for such a well explained tutorial, essential for a beginner such as myself, I look forward to following your other tutorials.
Thanks again
Bob
Hi Robert.
I’m glad you’ve found the issue.
Thank you for following our projects.
Regards,
Sara
Is 5 V the output voltage on the GPIOs? Thanks.
The GPIO output is 3.3V.
Regards,
Sara
Thanks for all
Very clearfull
works perfect, thanks for the good explanation. Just what I was looking for.
I would like to use it on internet using my DDNS and opening an port on my router. Is there any way to add password protection?
your tutorial helped me a lot in a part of my project. Thank you.
Great tutorial! But how do I do when I want to integrate OTA updates into this code? You have a seperate tutorial* on OTA and I have tried myself to combine it with what is said here, but it was too complex for me. I guess it’s because two different “systems” are used; one being WiFi.h/WiFiServer and the other WebServer.h?
Can you guide us how to make a ESP32 webserver which has OTA capability?
*https://randomnerdtutorials.com/esp32-over-the-air-ota-programming/
It took me less than half an hour to mod the code to accept four relays instead of the coded two. This shows how good your code is as a template for any project involves multiple pins.
I came across a funny one ….
My dev board esp32 has the pins in inverse mode. So, your code display the opposite of what the pin status on. So, after uploading the web page indicates that the pins are ON and they actually off. !!!!
I checked the comments and no one had this situation….
Here are the details of my esp32 dev board.
https://www.aliexpress.com/item/32799809384.html
I know it entails mod the code , but I wanted to check with you first
Hi.
I never experimented with that board, so I’m not sure if it behaves differently than my ESP32.
Having the pins in inverse mode can be “normal” depending on the configuration of your relays.
For example:
Normally Closed configuration (NC):
HIGH signal – current is flowing
LOW signal – current is not flowing
Normally Open configuration (NO):
HIGH signal – current is not flowing
LOW signal – current in flowing
We have another tutorial specifically for relays that you may want to take a look at: https://randomnerdtutorials.com/esp32-relay-module-ac-web-server/
Thank you for your comment.
Regards,
Sara
Hello,
thanks for the very good instructions. Especially the description of the code is very helpful
Kind regards from Germany
Thanks 😀
The project works as advertised – Thanks for your good work!
I suggest you continue to link to your web page entitled [SOLVED] Failed to connect to ESP32: Timed out waiting for packet header at https://randomnerdtutorials.com/solved-failed-to-connect-to-esp32-timed-out-waiting-for-packet-header/ because I experienced this problem when loading this project.
In addition, if I leave the project running overnight it quits working. I either have to press the EN button or reload the sketch to get it working again. Since I will ultimately want to deploy my end application remotely I will want an implementation that does not require physical access. Is there another fix for the need to push the EN button?
Hi Ron.
Follow the suggestion in this discussion to check for a wi-fi connection and restart if it drops: https://rntlab.com/question/esp32-wifi-not-connecting-after-2-hours/
Regards,
Sara
Hi Sara,
Thanks, that did the trick. In some cases the ESP32 had to keep trying to reconnect (every 2 seconds) for two minutes before it got reconnected to WiFi. Don’t know what the problem is with the router, but this bandaids it.
I suggest both of these fixes be included in each project description. I only happened to know about the first fix because I saw it in another RNT project description. I had not run on to the second fix yet.
When the server receives a connection or the client refreshes the web page it momentarily causes the output to go high. I cannot work out why or find a way to stop this.
Hi.
Try this web server instead:
https://randomnerdtutorials.com/esp32-async-web-server-espasyncwebserver-library/
Regards,
Sara
Hi,
Thanks for the good tutorial. It works but both LED´s are blinking if they are on. On the Webpage the state is also ON.
It is the same Code copy from your example and insert in the Arduino IDE but i have no idea what is the reason for the blinking. I also change the ESP32 but there is the same problem. I change the LED´s but nothing happen.
Have you any idea for this problem?
Thanks.
Hello, test the leds outside esp32. Self blinking led are available on the market and perhaps and unfortunately you fall on them …..
hello, I also have the same problem as Marco. I have tested the LEDs outside esp32 (with Arduino UNO) and they work fine.
Could you help me?
Tank you in advance.
Hi Marco, I have the same problem as you. Have you found a solution?
Hello Marco. The fact is that not on all boards, the pin, that is shown as the ground in the diagram on this site, is the ground. I had the same issue with blinking. If you take a closer look, you will see that the marking is not GND, but CMD. Here is an example of such a pinout: https://europe1.discourse-cdn.com/arduino/optimized/4X/a/b/8/ab801a37c8d5240f8142c22b6a55fc02a6428467_2_1033x598.png
Switch the ground to another ground terminal.
Dernard,
when you start Wifi_service , why you need to set the currentTime and previousTime,and compare these two times for what, Can I dele all this comparation code?
Hi.
That’s needed because of this: https://rntlab.com/question/solved-esp32-web-server-drops-connection-crashes/
Regards,
Sara
Using KeeYee dev board/kit.
I have wired my dev kit as described in the tutorial and everything works well with a minor exception: the web page status for the LEDs, ie LED1 Status: ON/OFF or LED2 Status: ON/OFF is the inverse of what is stated. When the web page says the LED is on it is actually off and vice versa. The buttons work as expected turning the LEDs off and on and printing an output to the serial monitor.
If I change the “IF’ statements from: if(LED1status)…… to if(!LED1status)…. then the status of the LEDs and the text messages agree.
Do PULLUP resistors have any influence here? Do they invert the expected values?
If this has already been covered in a question/response please point me to the post in question.
Thank you.
Hi Sara, Rui, I’ve been trying to fetch a web page. I am not very skilled on server or html code. But I keep recieving a 403 forbidden response, when I make a GET request from Esp32. Not so through the browser and it does not happen to me with other web pages. Will it have to do with the User-Agent configuration?
Hi, I got this error when uploading the code. What is it about?
E (26) psram: PSRAM ID read error: 0xffffffff
Hi.
What is the board that you are using?
Regards,
Sara
Hey Rui and Sara,
Great tutorial, it’s exactly what I needed as an entry point into the world of ESP.
The only problem I’m having is that I can’t seem to connect to the IP address itself to manipulate the GPIOs. I’m using an ESP32-C3 board (and I made sure to use the appropriate Arduino package for this board) directly purchased from Espressif. I tried it on Chrome, Edge, and Safari on my phone, but no luck. After about 30 seconds I get an “ERR_CONNECTION_TIMED_OUT” error. Any help would be appreciated so I can at least get connected to the webpage to continue.
Also, I was wondering if you guys would know how to go about using the ESP APIs (in C++) instead of Arduino to do these kinds of projects?
Thanks in advance for your time and help!
Hello everyone,
i need to perform web server with mesh can anyone help me,
if so then please reply, i’m it will be grate if you help me,
thanks.
Hi.
Have you checked this example: https://github.com/gmag11/painlessMesh/tree/master/examples/webServer ?
Regards,
Sara
Hi, Great tutorial, Thanks for sharing. Keep up the great work!!!!
Thank you.
Regards,
Sara
How can I click on a button, send it high logic level, then count down a time to go back to low logic level and update that button on the page?
Hi.
Check this tutorial: https://randomnerdtutorials.com/esp32-esp8266-web-server-timer-pulse/
Regards,
Sara
Thank you!
Hello!
Thanks for this article. I really learned a lot from this code. Now I have a question,
How can I use this server with 3g/4g request through my cellphone?
Regards!
Anyone knows how to solve the infinite dots when deploying?
it always say connecting to:
… … … etc etc just infinite dots.
i have the correct credentials
hi
Thanks for this article. my problem when I compile the code I have this error “cannot declare variable ‘server’ to be of abstract type ‘WiFiServer’ “
Hi.
Make sure you copied the whole code to your Arduino IDE.
Make sure you have the ESP32 boards installed: https://randomnerdtutorials.com/installing-the-esp32-board-in-arduino-ide-windows-instructions/
Double-check that you have an ESP32 board selected in Tools > Board.
Regards,
Sara
Sara, great example.
I’m having a problem with chrome on windows 10 accessing my heltec esp32 reliably. I was testing under a softap, but I found the same issue comes up with your project out of the box (changed led port # and used heltec serial and wifi).
The issue appears to be random and can be best seen by inspector network waterfall for a request. In your project, my normal response time is between 150 to 250 ms. This is a closed network and no other clients are connecting. Every now and then, the response time is 2 seconds, and sometimes much more up to a timeout. Chrome, of course, does an auto reload and then it may load the page.
It just occurred to me that this could be related to the heltec wifi driver. Any ideas?
I just remembered I have another esp32 of a different brand. Your example works perfectly on that board. I’ll contact Heltec for further assistance.
Thank you in advance.
Ok.
Thanks for clarifying.
Regards,
Sara
I found I could use an ESP8266 board instead of the ESP32 board simply by replacing the
#include <WiFi.h>
with
#include <ESP8266WiFi.h>
But since the ESP8266 board uses reverse logic on the output pins on many ESP8266 boards, you may have to modify the HIGH and LOW logic.
Hi.
We have similar tutorials for ESP8266.
Check this one: https://randomnerdtutorials.com/esp8266-web-server/
Regards,
Sara
Hi
The code works fine. I can change the color and the width of the buttons, but I would like to make my own site with a lot of different buttons. Please give a hint, how to create it.
Best regards
Josef
You need to study HTML and CSS to do that.
Or you can also use a framework.
Regards,
Sara
I know some basics in HTML, but I didn’t found the basic definitions of the buttons = position, activity, …
Best regards
Hi.
Thank you so much for your codes and informations.
The webserver works fine but I have a problem with my project.
I am working on a thermostat with a touch display ILI9341. If I access through the wifi it works fine, but when I connect whithout using the wifi, using the remote access to the router, the webserver works but the touch screen ILI9341 doesn’t work. It does nothing when I touch it.
Do you have any idea that what is the problem?
Thank you again.
Best regards
Thank you for the tutorials. It is VERY helpful and help me very much.
Hello Sir,
I enjoyed your tutorial and understood the code of the project.
I still have a fundamental question that has been bugging my mind…..We are using the Client methods like client.println() to send data FROM SERVER TO CLIENT while the documentation of the library wifi.h suggests it is used to perform the opposite action that is to send any data from Client to the server. So how do we get around that use the client methods to perform operations from server side ?
Hi,
I successfully implemented your code but for a different need: I do not send commands but I receive a sensor’s measure. I was wondering if the web page could refresh each time a new value is received instead of having to do it manually on the web browser ?
Thanks for your great tutorials !
Thank you Rui for an awesome bunch of ESP32 tutorials. Using your instructions I was able to implement a small weather station/ patio light control at my house connected to our WiFi network. w3schools.com has been invaluable in helping me understand the html and CSS needed to make it look good. I have one question that I have not been able to find an answer for. In several instances, but specifically the tags, you put a backslash after the href= attribute
client.println(”
ON
“);
and then after the class= attribute. I can’t locate any information on why you use this , but it must be important. Is it part of a relative path notation? Or does it reference itself as the webpage link? If that is so, why does class=\”button\” need it as well.
Thanks for all the great instruction.
Hi.
In this example, you send text to the client using client.println(). You should write as an argument the text you want to send—it must be a string. So, it must go between double quotes.
There are some parts of the HTML file that contain double quotes (“”).
To send those double quotes to the client, without interfering with the double quotes of the client.println(“”), you need to add an escape character called backslash ( ) before the double quotes you want to maintain.
I hope this is not confusing.
Regards,
Sara
Thank you for your webserver tutorial. I found this utility, which might make it easier for people to convert html code for arduino devices. It adds backslashes for each ” in html coding. https://www.freecodeformat.com/add-backslash.php
Hi.
Great tool.
Thanks for sharing.
Regards,
Sara
Sorry on that last comment my line of code ended up getting formatted as html so it was lost
” href=\”/led/on\”>ON”
Why are there backslashes after the equal signs? is is concatenating to the current url?
hi
I am trying to use the web server by powering the esp32 with 3.5V at the VIN pin isn’t it possible to use the server without the serial port
Thanks for the sketch, works fine.
Great!
Thank you, Sara and Louis for this tutorial.
it works fine and i learned something new today.
Greetings, Ton
Hi, I have an ESP32 WROVER with camera. I’ve already written the sktech to make it work as a TCP/IP server to receive commands from client PC using home WiFi, which runs on port 100 of ESP32 WROVER with IP 192.168.1.81.
Now I would also like the ESP32 WROVER to send the camera images to the client PC, using port 80 (so I also use it as a Web Server).
Is it possible to do this on the ESP32 WROVER ?
If yes, could you just show me a simple piece of code to handle this ?
Hi.
To learn how to serve images via web server, we have this tutorial: https://randomnerdtutorials.com/display-images-esp32-esp8266-web-server/
Regards,
Sara
Does this apply to camera video as well ?
Hi,
Thanks for this! Works flawlessly!
Quick question, just trying to understand the code:
The part with the else if conditional statements that check if header request is for example “GET/26/ON”, can you tell me which part of the code sends such request? I cannot see from the code, where and how GET/26/ON or GET/26/OFF or GET/27/ON or GET/27/OFF are sent . Thanks!
how to set the SSID with de IP address?
example “ESP32_AP: ” + IP so the user will see:
“ESP32_AP: 192.168.4.1” as SSID
Hi, Good tutorial with elaborate explanation. Very useful for beginners like me.
I had a question about the working of the Webpage. In the WebPage, when the user presses a button, the browser sends a http request to the ESP. Where is this functionality coming from ?. Is it already defined in the HTML code of the web page that is sent by the ESP32 ?
Hi.
It is defined in the HTML of the web page.
Check the part of the code after the “// Display the HTML web page” line.
Regards,
Sara
Hello,
thanks for this tutorial. I’ve tried to compile the code, but got this error:
error: cannot declare variable ‘server’ to be of abstract type ‘WiFiServer’
It’s happening on this line:
WiFiServer server(80);
Can you please help me how to fix this?
Hi.
Make sure you have an ESP32 board selected in Tools > Board, before compiling the code.
Regards,
Sara
Built this on a ESP32-S3 from seeed (https://www.seeedstudio.com/XIAO-ESP32S3-p-5627.html). I added the LED_BUILTIN and changed the two external LED’s to GPIO6 & GPIO7. Works great!
I get (connecting to SSID) and looking for it forever.
Serial Monitor at a baud rate of 115200.
Password and ssid are in the right place, window 11 and my WiFi works find.
HELP
Hi.
Make sure you’re board is relatively close to your router and that you’ve inserted the network credentials correctly (uppercase/lowercase matters, as well as blank spaces).
Regards,
Sara
Aren’t the two lines which read millis and set last millis switched? Looks like you are comparing the same values.
First of all, very good tutorials, thank you for sharing your wisdom.
Secondly, I have been “playing” with the ESP8266 and ESP32 family of microprocessors for a long time, specifically IOT functions, and several websites have helped me a lot when designing web pages for my projects.
– http://www.w3schools.com/ – Everything related to html, css, java with explanations and examples.
– front-end-tools.com/en/ – It has several tools to create elements, such as buttons, shadows, borders, etc.
– file-examples.com/ – It contains many files of different formats and sizes, useful for testing downloads/shortcuts for your applications.
I hope this information helps many makers or curious people 🙂
Great.
Thanks for sharing those resources.
Regards,
Sara
Hi Sara
The problem I am having extending this tutorial is that once one of the buttons is pressed, the URL requested by the client remains indefintely as, for example, “26/on” until another button is pressed.
This is fine if the purpose of a button press is to change state, but cant be extended to a situation in which a button press causes a counter to be incremented. The code, as implemented will increment the counter each time loop() is executed.
How can the href (URL) be reset to “/” after the server initially proceses “26/on”
Endre
Hi.
I think the following example is probably a better starting point for what you want to do:
https://randomnerdtutorials.com/esp32-esp8266-web-server-outputs-momentary-switch/
I hope this helps.
Regards,
Sara
Sara
Many thanks. This was just what I was looking for.
I can only recommend to all readers to review several of the tutorials on this site. They give an indication of the diversity of mechanisms that can be used to fruitfully utilize the ESP32 (quite amazing for such a small chip)
Endre
That’s right.
Thank you for your comment.
Regards,
Sara
Hi, tried step by step what you wrote in this tutorial(great), but my ESP32 seems to be stuck at Connecting to …and it doesnt show any IP address. Can you tell what I am doing wrong?
My device is ESP32-WROOM-32U , and in settings I have tried both ESP32- Dev module and ESP32 WROOM-DA module, with no change…..(password and WIfi SSID is entered correctly)
Rebooting…
23:04:33.500 -> ets Jun 8 2016 00:22:57
23:04:33.500 ->
23:04:33.500 -> rst:0xc (SW_CPU_RESET),boot:0x13 (SPI_FAST_FLASH_BOOT)
23:04:33.500 -> configsip: 0, SPIWP:0xee
23:04:33.500 -> clk_drv:0x00,q_drv:0x00,d_drv:0x00,cs0_drv:0x00,hd_drv:0x00,wp_drv:0x00
23:04:33.533 -> mode:DIO, clock div:1
23:04:33.533 -> load:0x3fff0030,len:1344
23:04:33.533 -> load:0x40078000,len:13964
23:04:33.533 -> load:0x40080400,len:3600
23:04:33.533 -> entry 0x400805f0
23:04:33.804 -> Connecting to
Hi.
Make sure you modified the code with your network credentials.
Double-check the network credentials and make sure they are correct.
Finally, ensure that your board is relatively close to your router so that it can catch Wi-Fi signal.
Regards,
Sara
good evening Sara
I am facing the same issue
Credentials are ok but no connection
I tried also other your great tutorials but with the same no connection
Regards
Stefano
Try power cycling the ESP32 and all WiFi modems and access points.
Excellent project for a beginner with clear explanations
Has anyone tried this recently using Visual Studio Code ?
I get this error when I compile
‘ledcAttachChannel’ was not declared in this scope
I have done a search on the internet and it implies that I should use ledcAttach, however this does not work!
I have changed the lines of code to
ledcAttach(ledPin1, freq, resolution);
ledcAttachChannel(ledPin2, freq, resolution, ledChannel2);
ledcAttachChannel(ledPin3, freq, resolution, ledChannel3);
my platformio file is
[env:esp32dev]
platform = espressif32
board = esp32dev
framework = arduino
monitor_speed = 115200
lib_deps = ESP Async WebServer
arduino-libraries/Arduino_JSON @ 0.1.0
board_build.filesystem = littlefs
The project compiles if I use the Arduino ide rather than visual studio code,
I just do not know where to look to try and fix it.
Hi.
You need to update your ESP32 boards in PlatformIO to use the latest version of the Arduino core, version 3.
Go to Home > Platforms, then click on the Updates tab at the top, and then update espressif32.
Regards,
Sara
Hi.
It seems that platformIO doesn’t update to the latest core automatically.
After searching and testing for a while I found out that you need to include the following on your paltformio.ini file so that it uses core 3.0
platform_packages=
framework-arduinoespressif32 @ https://github.com/espressif/arduino-esp32.git#3.0.1
framework-arduinoespressif32-libs @ https://github.com/espressif/arduino-esp32/releases/download/3.0.1/esp32-arduino-libs-3.0.1.zip
This works for me.
Let me know if this solves your issue.
Regards,
Sara
Hi,
I am doing a project with ESP-32 in which we need to connect a fingerprint sensor of 6 pins. The problem we are facing is that there is very little information related to this project if someone could help me find the relevant data I would be very grateful to you.
Hi, I’ve tried to reproduce this project and I can’t get it to work. The server never connects.
The monitor doesn’t even show me the IP address.
Hi.
Did you insert the right network credentials?
What do you get on the serial monitor?
Regards,
Sara
Yes.
// Replace with your network credentials
const char* ssid = “Mr Camer”;
const char* password = “12345678”;
….
// Connect to Wi-Fi network with SSID and password
Serial.print(“Connecting to “);
Serial.println(ssid);
WiFi.begin(ssid, password);
In the serial Monitor:
load:0x40080400,len:4
load:0x40080404,len:3180
entry 0x400805b8
Connecting to Mr Camer
………………………………………………………..
and never connenct wifi
Try power cycling the ESP32 and all WiFi modems and access points.
It might not be software, I have just had problems with an ESP8266 not connecting to my WiFi, and it turns out it was because I had moved the ESP less than foot into a filing cabinet so I could,program it from my PI.
Physically relocated it and it connects.
I proved the ESP was okay by downloading the WiFi scan projec5 from the arduino ide.