Tutorial: ESP32 Web Server | Control something through ESP32 WiFi in Station Mode

Aug 10, 2020 · 5 min read · ESP32 internet of things IOT ·

Introduction

ESP32 has a WIFI capability where we can take advantage for controlling anything remotely

In this tutorial we will learn how to use ESP32 to host a website for controlling anything lets say turning ON or OFF of the light at home. In this video, we will just use LEDs for demonstration. If you decided to use it in the actual application, you may connect a relay instead of the LED.

Circuit Diagram

Video Demonstration

Call To Action

If you have any question, please write it in the comment box so I may try it to the best I can do. Please LIKE, SHARE, and SUBSCRIBE.

Thank you and have a good day.

Source Code

  1 
  2 /*  Simple ESP32 Web Server
  3 *    The ESP32 Wifi is configured as station mode.
  4 *    
  5 */
  6 #include <WiFi.h>  
  7   
  8 #define BLUE_LED  25  
  9 #define GREEN_LED  26  
 10 #define RED_LED   27  
 11   
 12 // Create the objects for server and client  
 13 WiFiServer server(80);  
 14 WiFiClient client;  
 15   
 16 const char* ssid   = "your ssid";  
 17 const char* password = "your password";  
 18   
 19 // Create the global variable  
 20 String http;  
 21 String bluLedState = "off";  
 22 String grnLedState = "off";  
 23 String redLedState = "off";  
 24   
 25 void setup() {  
 26  Serial.begin(115200);  
 27  pinMode(BLUE_LED, OUTPUT);  
 28  pinMode(GREEN_LED, OUTPUT);  
 29  pinMode(RED_LED, OUTPUT);  
 30  digitalWrite(BLUE_LED, LOW);  
 31  digitalWrite(GREEN_LED, LOW);  
 32  digitalWrite(RED_LED, LOW);  
 33  Serial.print("Connecting to ");  
 34  Serial.println(ssid);  
 35   
 36  // Connect the Wifi to the router  
 37  WiFi.begin(ssid, password);  
 38  while (WiFi.status() != WL_CONNECTED) {  
 39   delay(500);  
 40   Serial.print(".");  
 41  }  
 42   
 43  Serial.println("");  
 44  Serial.println("WiFi connected.");  
 45  Serial.println("IP address: ");  
 46  Serial.println(WiFi.localIP());  
 47   
 48  // Start our ESP32 server  
 49  server.begin();  
 50 }  
 51   
 52 void loop(){  
 53    
 54  if ( client = server.available() ) {  // Checks if a new client tries to connect to our server  
 55   Serial.println("New Client.");  
 56   String clientData = "";  
 57   while ( client.connected() ) {      // Wait until the client finish sending HTTP request  
 58    if ( client.available() ) {        // If there is a data,  
 59     char c = client.read();           //  read one character  
 60     http += c;                        //  then parse it  
 61     Serial.write(c);    
 62     if (c == 'n') {                  // If the character is carriage return,   
 63                                       //  it means end of http request from client  
 64      if (clientData.length() == 0) {  //  Now that the clientData is cleared,  
 65       sendResponse();                 //    perform the necessary action  
 66       updateLED();  
 67       updateWebpage();  
 68       break;  
 69      } else {  
 70       clientData = "";               //  First, clear the clientData  
 71      }  
 72     } else if (c != 'r') {          // Or if the character is NOT new line  
 73      clientData += c;                //  store the character to the clientData variable  
 74     }  
 75    }  
 76   }   
 77   http = "";  
 78   client.stop();                     // Disconnect the client.  
 79   Serial.println("Client disconnected.");  
 80   Serial.println("");  
 81  }  
 82 }  
 83   
 84 void sendResponse() {  
 85  // Send the HTTP response headers  
 86  client.println("HTTP/1.1 200 OK");  
 87  client.println("Content-type:text/html");  
 88  client.println("Connection: close");  
 89  client.println();   
 90 }  
 91   
 92 void updateWebpage() {  
 93  // In here we will display / update the webpage by sending the HTML   
 94  //  to the connected client  
 95  // In order for us to use the HTTP GET functionality,  
 96  //  the HTML hyperlinks or href is use in the buttons.   
 97  //  So that, when you press the buttons, it will send a request to the   
 98  //  web server with the href links by which our ESP32 web server will  
 99  //  be check using HTTP GET and execute the equivalent action  
100    
101  // Send the whole HTML  
102  client.println("<html>");  
103  client.println("<head>");  
104  client.println("<title>ESP32 WiFi Station</title>");  
105  client.println("</head>");  
106    
107  // Web Page Heading  
108  client.println("<body><h1>Simple ESP32 Web Server</h1>");  
109   
110  // Display buttons for Blue LED  
111  client.println("<p>1. Blue LED is " + bluLedState + "</p>");    
112  if (bluLedState == "off") {  
113   client.println("<p><a href="/BLUE_LED/on"><button>Turn ON</button></a></p>");  
114  } else {  
115   client.println("<p><a href="/BLUE_LED/off"><button>Turn OFF</button></a></p>");  
116  }   
117   
118  client.print("<hr>");  
119    
120  // Display buttons for Green LED  
121  client.println("<p>2. Green LED is " + grnLedState + "</p>");    
122  if (grnLedState == "off") {  
123   client.println("<p><a href="/GREEN_LED/on"><button>Turn ON</button></a></p>");  
124  } else {  
125   client.println("<p><a href="/GREEN_LED/off"><button>Turn OFF</button></a></p>");  
126  }   
127   
128  client.print("<hr>");  
129      
130  // Display buttons for Red LED  
131  client.println("<p>3. Red LED is " + redLedState + "</p>");    
132  if (redLedState == "off") {  
133   client.println("<p><a href="/RED_LED/on"><button>Turn ON</button></a></p>");  
134  } else {  
135   client.println("<p><a href="/RED_LED/off"><button>Turn OFF</button></a></p>");  
136  }  
137   
138  client.println("</body></html>");  
139  client.println();  
140 }  
141   
142 void updateLED() {  
143  // In here we will check the HTTP request of the connected client  
144  //  using the HTTP GET function,  
145  //  Then turns the LED on / off according to the HTTP request  
146  if    (http.indexOf("GET /BLUE_LED/on") >= 0) {  
147   Serial.println("Blue LED on");  
148   bluLedState = "on";  
149   digitalWrite(BLUE_LED, HIGH);  
150  } else if (http.indexOf("GET /BLUE_LED/off") >= 0) {  
151   Serial.println("Blue LED off");  
152   bluLedState = "off";  
153   digitalWrite(BLUE_LED, LOW);  
154  } else if (http.indexOf("GET /GREEN_LED/on") >= 0) {  
155   Serial.println("Green LED on");  
156   grnLedState = "on";  
157   digitalWrite(GREEN_LED, HIGH);  
158  } else if (http.indexOf("GET /GREEN_LED/off") >= 0) {  
159   Serial.println("Green LED off");  
160   grnLedState = "off";  
161   digitalWrite(GREEN_LED, LOW);  
162  } else if (http.indexOf("GET /RED_LED/on") >= 0) {  
163   Serial.println("Red LED on");  
164   redLedState = "on";  
165   digitalWrite(RED_LED, HIGH);  
166  } else if (http.indexOf("GET /RED_LED/off") >= 0) {  
167   Serial.println("Red LED off");  
168   redLedState = "off";  
169   digitalWrite(RED_LED, LOW);  
170  }  
171 }