ESP8266 Web Server

A Web server is a program that uses HTTP (Hypertext Transfer Protocol) to serve the files that form Web pages to users, in response to their requests, which are forwarded by their computers’ HTTP clients.
To implement web server on ESP, there are two ways to make your first web server first connect to your WiFi router or make ESP as access point.

Web Server Step by Step

As we know that all web servers have a web page to be served.

Step 1: Creating web server on ESP8266

ESP can acts as access point and it can connect to access point or both.

First we make program to connect to WiFi hot spot (Access Point)

Program to connect to Access point and Make web server

We need these libraries to make web server.

ESP8266WiFi.h is required for doing all WiFi related functionalities such as connection, AP, etc.

WiFiClient.h this file is required to send request to web browser

ESP8266WebServer.h it handles all HTTP protocols

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>

Define your SSID and Password of your WiFi router, where the ESP connects

//SSID and Password of your WiFi router
const char* ssid = "your_ssid";
const char* password = "password";

Web server is on port 80, you can use other ports also, default HTTP port is 80, to open web page with different port number you have to enter port number after IP address. Ex. For port number 81 you have to type 192.168.2.2:81 in browser.

ESP8266WebServer server(80); //Server on port 80

There are two ways to make web server one is to connect to WiFi hot spot or make ESP as hot spot (Access Point).

This command is used to connect to your WiFi Access point. The term Access Point (AP) is same as WiFi Hot Spot. If the network is open you can remove password field from command.

  WiFi.begin(ssid, password);     //Connect to your WiFi router

After connection request we wait for WiFi to get connect. ESP8266 once connected and disconnected afterwards due to signal loss or any reason, there is no need to give this command again, it will try to connect again automatically. This is handled by its OS, you may find some stack errors displayed in serial monitor, and these errors come from its internal OS.

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

To get IP address i.e. assigned to ESP8266 by your WiFi router use this command

WiFi.localIP();

When client request a web page by entering ESP IP address which data to be sent is handled by subroutine and that subroutine name is defined in server.on(path,subroutine_name).

  server.on("/", handleRoot); //Which routine to handle at root location

Example: If you have two pages you can define like this

Server.on(“/”,root); //192.168.2.2 (IP of ESP) this is root location

Server.on(“/page1”,First_page); //”192.168.2.2/page1” this is first page location

Server.on(“/page2”,Second_page); //”192.168.2.2/page2” this is second page location

You have three subroutines that handle client requests.

To start the server use this command

server.begin();                  //Start server

In main loop we handle client request

server.handleClient();          //Handle client requests

This subroutine is called when you enter IP address in web browser and hit enter. This routine sends the test “hello from esp8266” to web browser.

void handleRoot() {
  server.send(200, "text/plain", "hello from esp8266!");
}

Complete Program for Hello from esp8266

/*
 * Hello world web server
 * circuits4you.com
 */
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>

//SSID and Password of your WiFi router
const char* ssid = "Circuits4you.com";
const char* password = "9422212729";

ESP8266WebServer server(80); //Server on port 80

//===============================================================
//     This rutine is exicuted when you open its IP in browser
//===============================================================void handleRoot() {
  server.send(200, "text/plain", "hello from esp8266!");
}

//==============================================================
//                  SETUP
//==============================================================
void setup(void){
  Serial.begin(9600);
  
  WiFi.begin(ssid, password);     //Connect to your WiFi router
  Serial.println("");

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

  //If connection successful show IP address in serial monitor
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());  //IP address assigned to your ESP
 
  server.on("/", handleRoot);      //Which routine to handle at root location

  server.begin();                  //Start server
  Serial.println("HTTP server started");
}
//==============================================================
//                     LOOP
//==============================================================
void loop(void){
  server.handleClient();          //Handle client requests
}

Results

To see the result first get the IP address from serial monitor, Open serial monitor and press reset. It sends IP and shows its connection status, if it is not able to connect it will show “……..” dots in serial monitor. Check you ssid and password.

//SSID and Password of your WiFi router
const char* ssid = "your_ssid";
const char* password = "password";

Once connected it will show following

Open web browser and enter this IP (192.168.2.2), Make sure that your laptop or phone must be connected to the same network. You can see this web page in all the devices which are connected to the WiFi router, where the ESP8266 is connected.