SnowCron Robotics ×


Home

Donate


3d printer DIY


Tutorials

Robotics: Hardware
Software: AI Related
Robotics: DIY

ESP8266 Examples: NodeMCU Web Server

In this post we will build an ESP8266 based Web Server and walk through both the code and schematics. This tutorial is a step-by-step guide that shows how to build a standalone ESP8266 Web Server that controls a single output (one LED). This ESP8266 NodeMCU Web Server is mobile responsive and it can be accessed with any device with a browser in your local network.

Please pay attention to the last statement: we are going to create a web server that works with your modem within your LOCAL network. It can not be seen from the outside Internet. So you can use this approach for your IOT projects, but can not post data to the Web (a different approach exists, it is just... different).

The Code

In the following code, replace placeholders for login and password with ones for your home WiFi network. Note, that your WiFi router has to have 2.4 GHz enabled (get to router's admin page and make sure it is on).

This is a close copy of https://randomnerdtutorials.com/esp8266-web-server/, except one diode is used instead of two.

		
/*********
  Rui Santos
  Complete project details at https://randomnerdtutorials.com  
*********/

// Load Wi-Fi library
#include 

// Replace with your network credentials
const char* ssid     = "this_is_my_id";
const char* password = "this_is_my_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 output2State = "off";

// Assign output variables to GPIO pins
const int output2 = 4;

// 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(output2, OUTPUT);
  
  // Set outputs to LOW
  digitalWrite(output2, 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()
{
  // Listen for incoming clients
  WiFiClient client = server.available();   

  if (client) 
  {                                         
    // If a new client connects,
	// print a message out in the serial port
	// make a String to hold incoming data from the client
    Serial.println("New Client.");          
    String currentLine = "";                
    currentTime = millis();
    previousTime = currentTime;
    
    // loop while the client's connected
    while (client.connected() 
		&& currentTime - previousTime <= timeoutTime) 
    { 
      currentTime = millis();         
	  
	  // if there's bytes to read from the client
      if(client.available())                
      {
		// read a byte, then
		// print it out the serial monitor
        char c = client.read();             
        Serial.write(c); 
        header += c;
        
		// if the byte is a newline character
        if(c == '\n')                       
        {
          // 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 /2/on") >= 0) 
            {
              Serial.println("GPIO 2 on");
              output2State = "on";
              digitalWrite(output2, HIGH);
            } 
            else if (header.indexOf("GET /2/off") >= 0) 
            {
              Serial.println("GPIO 2 off");
              output2State = "off";
              digitalWrite(output2, LOW);
            }
            
            // Display the HTML web page
            client.println("");
            client.println(
				"");
            client.println("");
            // CSS to style the on/off buttons 
            // Feel free to change the background-color and 
			// font-size attributes to fit your preferences
            client.println("");
            
            // Web Page Heading
            client.println("

ESP8266 Web Server

"); // Display current state, and ON/OFF buttons for GPIO 2 client.println("

GPIO 2 - State " + output2State + "

"); // If the output2State is off, it displays the ON button if (output2State=="off") { client.println("

"); client.println("

"); } else { client.println("

"); client.println("

"); } client.println(""); // 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 = ""; } // if you got anything else but a carriage return character, // add it to the end of the currentLine else if (c != '\r') currentLine += c; } } // Clear the header variable header = ""; // Close the connection client.stop(); Serial.println("Client disconnected."); Serial.println(""); } }

Click the Upload arrow icon on top-left of Arduino IDE, and wait for your code to be transfered to the chip.

Parts required

ESP8266 NodeMCU

LED

Resistor (220 - 330 ohms should work just fine)

Breadboard

Jumper wires

Note that we use the same schematics as in blinker example.

Testing the Web Server

Now, you can upload the code, and it will work straight away. Don’t forget to check if you have the right board and COM port selected in Arduino IDE, otherwise you’ll get an error when trying to upload. Open the Serial Monitor at a baud rate of 115200.

Finding the ESP IP Address

Press the ESP8266 RESET button, and it will output the ESP IP address on the Arduino IDE's Serial Monitor. Alternatively, wait until connection succeeded: the address will be displayed in the monitor.

Accessing the Web Server

Open your browser, type the ESP IP address, and you’ll see the following page. This page is sent by the ESP8266 when you make a request on the ESP IP address.

Click the button: the LED diode goes on and off.

(C) snowcron.com, all rights reserved

Please read the disclaimer