Blog navigation

Blog categories

View all categories

Search in blog

Latest posts

View all latest posts

Popular posts

View all popular posts

Featured posts

View all featured posts

Blog tags

arduino micro atmega32u4 esp32 web server platformio

Photo gallery

  • ESP32

    ESP32

View all Photos

Archived posts

Latest comments

View all comments

Top authors

View all authors

 Blog Rss

WEB server on ESP32

554 Views
1 Comment
(5)
Posted on: 12/29/2022
 

This project uses network concepts such as: IP addressing and client-server exchanges. In order not to weigh down this article, these concepts will be presented in other articles.

Wi-Fi connection

To connect the ESP32 to your WiFi, you need to know your SSID and password, assuming your WiFi is protected. The SSID (Service Set Identifier) ​​is the name of your Wifi network. In this project I will use the network SSID devRouter and the password #1234#fafa , but you will need to replace this information with your SSID/Password.

Here's the code we are going to use.

#include <Arduino.h> 
#include <WiFi.h> 

// Wi-Fi network information 
// You must replace the information with your network information 
const char* ssid = "devRouter"; 
const char* password = "#1234#fafa"; 

void setup()  
{ 
  // We will use the console to display information 
  Serial.begin(9600); 

  //Begin network connection 
  Serial.print("Network connection"); 
  Serial.println(ssid); 
  WiFi.disconnect(); 
  WiFi.begin(ssid, password); 

  // As long as the ESP32 is not connected, wait... 
  while (WiFi.status() != WL_CONNECTED)  
  { 
    delay(500); 
    Serial.print(".");
  } 

  // Once connected, we display the IP address of the ESP32 
  Serial.println(""); 
  Serial.println("Connected to WiFi"); 
  Serial.println("IP address = "); 
  Serial.println(WiFi.localIP()); 
} 

void loop()  
{ 
  // nothing yet. 
}

Here are some explanations of what the code does.

  Serial.begin(9600);

The console will be used to display the connection status.

 Serial.print("Network connection");
 Serial.println(ssid);
 WiFi.disconnect();
 WiFi.begin(ssid, password);

Displays a message on the console to signify the start of the connection. The Wifi.disconnect() will disconnect the module if it was already connected to the network. The Wifi.begin() starts the wifi connection for the SSID and password configured at the beginning of the code.

while (WiFi.status() != WL_CONNECTED) 
 {
   delay(500);
   Serial.print(".");
 }

This loop waits for the ESP32 to successfully connect to Wi-Fi. If this step fails, check the SSID and password. You can also validate Wi-Fi information with a computer, a tablet or phone.

Serial.println("");
Serial.println("Connected to Wi-fi");
Serial.println("Adresse IP = ");
Serial.println(WiFi.localIP());

This segment executes only if the connection is successful. It displays the IP address received on the network, which will be needed to display the ESP32 web page.

After compiling and downloading, here is what you should see in the console.

Connection to the devRouter network 
. 
Connected to Wi-fi 
IP address = 
192.168.0.198

Web server setup

To create a web server, you must create an instance of the WiFiServer class. The input parameter is the port number, which is 80 by default for http in browsers.

WiFiServer server(80);

We will also create an instance of the String class, in which we will write the html code for our web page.

String pageHtml = 
"<HTML> \n \
   <BODY> \n \
     <H1> My ESP32 says hello </H1> \n \
   </BODY> \n \
</HTML> \n ";

The \n are not required. They make it possible to structure the html code with line endings. The \ at the end allow to write the contents of the String on several lines in order to facilitate its reading.

In the setup() function, we will start the server with the following line.

server.begin();
 
In the loop() function, we will add the code that will process client requests. When you open a web page at your module's IP address, your browser connects to the module and will make a request to obtain the HTML page.
 
// Check if there is a client on the 
  WiFiClient server client = server.available(); 
  if(client) 
  { 
    Serial.println("New client."); 
    // stay in the loop as long as the client is connected 
    while (client.connected()) 
    { 
     if (client.available()) // Check if the client has sent data 
     { 
        char rxData = client.read();  
        Serial.write(rxData);         
        if (rxData == '\n') // if this is the end of the received command 
        { 
          Serial.println(""); 
          Serial.println("Load HTML page"); 
          client.println("HTTP/1.1 200 OK"); //send new page
          client.println("Content-Type: text/html");
          client.println();
          client.print(pageHtml);     
          client.stop();
        }
     }
    }
  }

At each pass in the loop function, there is verification of the presence of a new client and recovery of its request. In this example, the query is displayed in the console but its content is ignored. In other examples, we will use the request data to interact with the user and the physical environment of the ESP32. 

After receiving the request, the ESP32 returns its HTML page and then terminates the connection. The other two transmissions that precede the HTML page are responses to the request. The first “HTTP/1.1 200 OK” tells the client that the request was received successfully. The second informs about the format of the data that will follow.

Complete Code

Here is the complete code for this project:

#include <Arduino.h> 
#include <WiFi.h> 

// Wi-Fi network information 
// You must replace the information with your network information 
const char* ssid = "devRouter"; 
const char* password = "#1234#fafa"; 

// Create a server on port 80 
WiFiServer server(80); 

// Create a string for the HTML code 
String pageHtml = 
"<HTML> \n \ 
  <BODY> \n \ 
    <H1> My ESP32 says hello </H1> \n \ 
  </BODY> \n \ 
</HTML >\n"; 

void setup()  
{ 
  // We will use the console to display information 
  Serial.begin(9600);

  Serial.print("Network connection"); 
  Serial.println(ssid); 
  WiFi.disconnect(); 
  WiFi.begin(ssid, password); 

  // While status is not connected, wait... 
  while (WiFi.status() != WL_CONNECTED)  
  { 
    delay(500); 
    Serial.print("."); 
  } 

  // Once connected, we display the IP address of the ESP32 
  Serial.println(""); 
  Serial.println("Connected to WiFi"); 
  Serial. println("IP address = "); 
  Serial.println(WiFi.localIP()); 

  server.begin(); 
} 

void loop()  
{ 
  // Check if there is a client on the 
  WiFiClient server client = server.available();
  if (client)
  { 
    Serial.println("New client."); 
    // stay in the loop as long as the client is connected 
    while (client.connected())  
    {  
      if (client.available()) // Check if the client has sent data 
      { 
        char rxData = client.read();  
        Serial.write(rxData);         
        if (rxData == '\n') // if this is the end of the received cmd
        { 
          Serial.println(""); 
          Serial.println("Load HTML page"); 
          client.println("HTTP/1.1 200 OK"); //send new page 
          client.println("Content-Type: text/html"); 
          client.println(); 
          client.print(pageHtml);     
          client.stop();
        }
      }
    }
  }
}

 

 
Was this blog post helpful to you?
Tags : Esp32, Web server
Posted in: ESP32, Arduino

Leave a comment

Security code

Comments

  • It's done!
    By: MacIT On 01/09/2023
    Rating:
    5.0

    Thanks a lot. It took me some times to make it but after a few minors bugs, it's working. Can you show us how to display the I/O states on the Web Page ?

    Replied by: Marc Juneau On 01/09/2023 Hello MacIt,
    I did something like what you are asking in this post ESP32 SERVER AND I/O
    https://econo-robot.com/shop/en/blog/post/esp32-server-and-io.html
    I hope it can help you.
    Marc

Related posts