Arduino Slovakia - ESP8266 - HTTP server, favicon and error handling

Hierarchy: ESP8266

In the previous article, we found that our HTTP server cannot handle hypertext that points to a nonexistent page. We've found that the browser will also request favicon.ico for each page. Therefore, today we will learn how to handle errors and how to create a small icon that the browser displays on a bookmark that displays page content.

Used parts

This is a simple project, so we will need some board with the ESP8266 microcontroller, which can be directly connected to USB. To avoid a possible short circuit, you can plug the board into a breadboard.

ESP8266 {linkESP8266}
Breadboard {linkBreadBoard}

Error handling

In order to conveniently click on the hypertext that leads to a non-existent page, I have modified the page's source text and added a distinctive hypertext PageError. After clicking on the hypertext, the browser attempts to retrieve the page /pageerror from the ESP8266.

favicon.ico

I borrowed the icon from arduino.cc. It's a small picture of the Arduino logo, originally in PNG format, which has a renamed extension to ICO.

SPIFFS

Be sure to upload the files to SPIFFS using the plugin. See the article on using the SPIFFS file system for instructions.

Example

Voči predchádzajúcemu príkladu som urobil iba dve zmeny.

server.serveStatic("/favicon.ico", SPIFFS, "/favicon.ico"); - This line ensures that the browser downloads favicon.ico from SPIFFS and displays it as a thumbnail on the tab.
server.onNotFound([]()... - This line will send a simple error message for each non-existing page request.

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <FS.h>
#include "arduino_secret.h"

ESP8266WebServer server(80);

void setup(void) {
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  SPIFFS.begin();

  server.serveStatic("/", SPIFFS, "/page1.html");
  server.serveStatic("/page2", SPIFFS, "/page2.html");
  server.serveStatic("/page3", SPIFFS, "/page3.html");
  server.serveStatic("/favicon.ico", SPIFFS, "/favicon.ico");

  server.onNotFound([]() {
    server.send(404, "text/plain", "404: Not Found");
  });

  server.begin();
  Serial.println("HTTP server started");
}

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

Source code

The source code is located on GitHub.

simple_http_server_favicon

20.05.2019

ESP8266 - HTTP server, favicon and error handling