espwebserver

ESP8266 Tutorial Part 3 – Running a simple Web Server





You can download our e-book ‘Learn Arduino’ from this link

Last time you learned how to connect the ESP8266 to a WiFi network and download data from a URL. Today we will explore a way to listen to connections just like a server; a web server in fact. The ESP will listen for connections on port 80 and will serve simple pages to connected clients. For this example, a different approach will be taken to program the ESP8266. The structure we used in our last tutorial was purely procedural. The problem with procedural structured programs is that it is difficult and messy to handle multiple simultaneous connections. In this example we will use handlers which are a way of structuring our programs to serve multiple clients and at the same time keeping the code pretty.

The code will listen for connections on port 80, will server a web page showing a link with “LED On” or “LED Off”. Once clicked the on board LED switches on or off respectively. The on board LED is on GPIO 1, the pin used by TXD, so we won’t be able to use Serial.print() in our program.

We start off with the basics. Loading libraries and connecting to a WiFi network.

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

const char* ssid = "your wifi SSID";
const char* password = "password";

ESP8266WebServer server(80);

MDNSResponder mdns;

String pageTurnOn = "<html><body><h1>LED is ON</h1><a href=\"/turnoff\">Turn Off</a></body></html>";

String pageTurnOff = "<html><body><h1>LED is OFF</h1><a href=\"/turnon\">Turn On</a></body></html>";

void setup() {

  pinMode(LED_BUILTIN, OUTPUT);

  WiFi.begin(ssid, password);
 
  delay(1000);

  while (WiFi.status() != WL_CONNECTED) {
    delay(200);

    //a flashing LED means the ESP is not connected
    digitalWrite(LED_BUILTIN,!digitalRead(LED_BUILTIN));
  }

  //a stable LED on means the ESP is now connected
  digitalWrite(LED_BUILTIN,true);

  mdns.begin("esp8266", WiFi.localIP());





Do not forget to to change the SSID and PASSWORD for your own.

MDNSResponder lets us name our ESP8266 and use it instead of the IP address. Think of it as a personal local domain. The LED_BUILTIN is the LED on board the ESP which is connected to GPIO1. “digitalWrite(LED_BUILTIN,!digitalRead(LED_BUILTIN));” line will keep the LED flashing until a connection to the WiFi network is established. Then we call the MDNS to allow us to use the name “esp8266.local”. Next we define our commands which are basically calls for a different web page.

  server.on("/turnon", [](){
   server.send(200, "text/html", pageTurnOn);

   digitalWrite(LED_BUILTIN,HIGH);

 });

 server.on("/turnoff", [](){
   server.send(200, "text/html", pageTurnOff);

   digitalWrite(LED_BUILTIN,LOW);
 });

   server.onNotFound([](){

     server.send(404, "text/html", "Command Not Found");

   });

  server.begin();

}

void loop(void){
  server.handleClient();
}

The structure server.on acts just like events. When a certain criteria (the page) is met, execute some commands.

server.on(“/turnon”, [](){
   server.send(200, “text/html”, pageTurnOn);
   digitalWrite(LED_BUILTIN,HIGH);
});

The lines in red are part of the handler declaration, while the green ones are the operations to be executed once this handler is triggered.

The server.send is the command we use to send the web page to clients. The 200 is the HTTP server error code which in this case is OK. The second is the type of data called mime type.




Our server can now be accessed from this url http://esp8266.local/turnon

When we access esp8266.local/turnon the LED is turned on and the page with text in pageTurnOn var will be sent to the client, and provides a link to turn off the led.

The server.onNotFound is a special handler. It processes requests which are not part of any server.on. So the notFound is triggered when we don’t know what the client sent us. This time we are sending a different error code, error 404, Not Found

Happy Coding!!

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *