ESP8266: Setting up a simple web server with Arduino IDE

Introduction

In recent years the ESP8266 has become one of my go-to choices for smart home/IoT devices or projects requiring WiFi. It is cheap (around $1.5 on Amazon)¹, has WiFi, and can be programmed using the Arduino IDE, making it an easy replacement for Arduinos if we need WiFi connectivity.

This post is a short example of how to setup a basic web server on your ESP8266 module using the Arduino IDE. It is part of a complete ESP8266 reference you can find here.

A basic web server example

There are many ways/libraries to set up a basic web server on the ESP. Each with its pros and cons. For this example, we will choose my personal favorite (ESP8266WebServer.h).

First, we must configure the WiFi settings and include the necessary libraries. In this case, we will connect to an existing WiFi named "MyWiFi" with the password "123456" and a random mac address we generated, e.g. here.

//---------------------------------------------------
#include <ESP8266WiFi.h>
const char *ssid = "MyWiFi";    //wifi name
const char *password = "123456";    //wifi password
uint8_t mac[6] {0x5C, 0x26, 0x19, 0x40, 0x86, 0x62}; //mac address
//---------------------------------------------------
#include <ESP8266WebServer.h>
ESP8266WebServer server(80);  //listen to port 80

Next, we connect to WiFi, log to the serial console and start the web server inside the setup function. Furthermore, we tell the ESP8266WebServer instance to call the " MyFunction " function if the root directory "/" is accessed. Suppose our ESP has the IP XXX.XXX.XXX.XXX, and we navigate to http://XXX.XXX.XXX.XXX/ on the same WiFI, the function "MyFunction" will be executed.

void setup() {
    Serial.begin(115200); //start the serial output
    Serial.println();
    Serial.println("Starting up");
    Serial.print("Connecting to ");
    Serial.println(ssid);

    // Print local IP address and start web server
    Serial.println("");
    wifi_set_macaddr(0, const_cast(mac));
    WiFi.mode(WIFI_STA);//disable ap advertising 
    WiFi.begin(ssid, password);//connect to wifi
    while (WiFi.status() != WL_CONNECTED) {
        Serial.print(".");
        delay(500);
    }
    Serial.println("WiFi connected.");
    Serial.println("IP address: ");
    Serial.println(WiFi.localIP());

    Serial.println("------------------------------");
    server.on ( "/", MyFunction );
    server.begin(); //start the web server
    Serial.println("web server started");

    Serial.println("Startup finished");
    Serial.println("****************");
}

The loop is quite minimalistic. Although other code can be added, we might want to avoid using "delay()" and use millis() with a global variable instead.

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

Lastly, we take a look at the "MyFunction" callback function.

void MyFunction() {
    Serial.println("New request for \"/\"");
    if(server.hasArg("getTemp") && server.arg("getTemp").toInt() > 0){
      server.send ( 200, "application/json",  "{\"temperature\": " + String(MyTempVariable) + "}"  );
    } else{
        server.send ( 200, "text/html",  String(SomeDefaultVariable)  );
    }
}

In this example, the server waits for a connection on "/". We can use the functions "server.hasArg() and server.arg() to check if a GET argument was provided and to get its value.

If we access http://XXX.XXX.XXX.XXX/, the server will return a text/html response with the text stored inside "SomeDefaultVariable". If we provide the GET argument "getTemp" with value 100 by accessing http://XXX.XXX.XXX.XXX/?getTemp=100 the server will return a text/json response with the value of "MyTempVariable".

Of course, we could also control the gpio pins before or after sending a response from inside "MyFunction". In reality, we would probably read the temperature sensor first before replying with the json, including temperature data.

More Info

This post is part of a complete ESP8266 reference/guide. You can find more information on how to use your ESP8266 module effectively at blog.hirnschall.net/esp8266/.

References

License

The content published on this page (with exceptions) is published under the CC Attribution-NonCommercial 3.0 Unported License. You are free to share on commercial blogs/websites as long as you link to this page and do not sell material found on blog.hirnschall.net/* or products with said material.

Amazon Links

1: As an Amazon Associate I earn from qualifying purchases.