Reconfigurable computing

Small Embedded Systems

Unit 5.2
Using the ESP8266 as a Web Server

Introduction
Simple HTML and HTTP examples
Using the ESP8266 on WiFi as a Web server
Using the ESP8266 as a WiFi access point
Controlling devices from a web page using the ESP8266

ESP8266
32-bit microcontroller
Built-in WiFi (IEEE 802.11b/g/n)
80 MHz clock frequency
4 Mbyte flash
32 kByte RAM

Feather Huzzah
NodeMCU

The HTTP Protocol Overview
HTTP:
Hypertext transfer protocol
The protocol of the Web
Client/server model:
Client: browser that requests, receives, (using HTTP protocol) and displays Web objects
Server: Web server sends (using HTTP protocol) objects in response to requests

HTTP request

HTTP response

HTTP request

HTTP response
PC running
Chrome browser
Server

iPhone running
Safari browser

The HTTP Protocol
Web page consists of objects
Object can be HTML file, JPEG image, Java applet, audio file,…
Web page consists of base HTML-file which may include referenced objects
Each object is addressable by a URL, e.g.,

www.uab.edu/home/sitelogo.jpg
Host name

Path name

HTML

Who has the better logo?

I prefer ours

HTML uses tags to tell browser how to render file, e.g.
turn on bold text
turn off bold text

HTTP overview
Uses TCP:
Client initiates TCP connection to server, port 80
Server accepts TCP connection from client
HTTP messages (application-layer protocol messages) exchanged between browser (HTTP client) and Web server (HTTP server)
TCP connection closed

HTTP request message
HTTP request message:
ASCII (human-readable format)

Request line
(GET, POST,
commands)

Header
lines

Carriage return,
line feed at start
of line indicates
end of header lines
GET index.html HTTP/1.1\r\n
Host: www.birmingham.ac.uk\r\n
User-Agent: Firefox/3.6.10\r\n
Accept: text/html,application/xhtml+xml\r\n
Accept-Language: en-GB,en;q=0.5\r\n
Accept-Encoding: gzip,deflate\r\n
Accept-Charset: ISO-8859-1,utf-8;q=0.7\r\n
Connection: keep-alive\r\n
\r\n

Method types
GET
request a web page
POST
send data to a web page
HEAD
asks server to leave requested object out of response (we just want to get the headers)
PUT
uploads file in entity body to path specified in URL field
DELETE
deletes file specified in the URL field

Example response
HTTP/1.1 200 OK
Content-Length: 271
Connection: Keep-Alive
Content-Type: text/html

Hello

This is a very, very simple HTML document.

Returned from server

Renders in browser as

HTTP response status codes
Status code appears in first line in server response message.
Some sample codes:

200 OK
request succeeded, requested object later in this message
303 Redirect
redirect to a new location specified later in this message
400 Bad Request
request message not understood by server
404 Not Found
requested document not found on this server

Uploading Data with Form Input
If a Web page wants us to send data, this is done with a “form”

Input type can be:
“text” – displays a box for the user to type text
“radio” – displays a radio button (for multiple choice)
“submit” – displays a button (click to activate)
Value is the text printed on the button
Action is the function that will be triggered by a button press
This will be defined in our Arduino code, and will toggle the LED on the board
Method shows how we will submit our response

Uploading Data with Form Input
Here is an example:

Lab example

We’ll use this button lab:

When we Press the Button …
The browser submits this POST request to the server

POST /LED HTTP/1.1
Host: esp-1a69ff
Content-Length: 0

plus other stuff that isn’t important to us

This will be used to trigger the desired action

Global internet
Using the Huzzah with WiFi
WiFi access point (e.g. home router)
Access point broadcasts SSID
Service set identifier: the name of the network
Wireless devices join network by supplying password associated with SSID
Router allocates IP addresses to each device
Devices communicate with each other via the access point
Devices communicate with global Internet visa access point

Local area network

Using the Huzzah as a Web Server
#include
#include
#include
#include

ESP8266WebServer server(80);

void setup() {
WiFi.begin(“SSID”, “password”);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
}
server.begin();
}

void loop(void) {
server.handleClient();
}
Create web server object on port 80
WiFi Credentials go here
Wait until connection confirmed
Check once per second
Start the server
Handle incoming connections

Using mDNS
Normally, human-friendly URLs (www.birmingham.ac.uk) are converted to IP addresses (147.148.217.94) by an Internet service called DNS (Domain Naming Service)
Our Huzzah only exists on the local network (no DNS)
mDNS (multicast DNS) allows a device to broadcast a human-friendly name within a network:

Depending on your setup, the ESP8266 will be given the name
esp8266.local, or
esp-XXXXXX
XXXXXX is the last 6 digits of the ESP8266’s MAC address
On my system and in these examples, it is esp-1A69FF

MDNS.begin(“esp8266”);

The previous listing just establishes a connection
To make it useful, we also need to add handlers for incoming connection

void setup() {
WiFi.begin(“SSID”, “password”);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
}
MDNS.begin(“ESP8266”);

server.on(“/”, HTTP_GET, handleRoot);
server.onNotFound(handleNotFound);

server.begin();
}
Making it Useful
Handle request for base HTML

Handle unrecognised request
Function to be invoked

Handler Functions
This function handles requests for the default file at the URL:

200 is the HTML code for “OK, here’s the data”
“text/html” is the type of the data
The HTML is rendered by the browser as:

void handleRoot() {server.send(200, “text/html”, “

Hello

This is a simple HTML document.

“);
}

Handler Functions
This function handles requests for an unknown file under the URL :

void handleNotFound(){
server.send(404, “text/plain”, “404: Not found”);
}

We never defined this

Handling POST Requests
Earlier we looked at this POST example

Lab example

We’ll use this in lab:

In lab, we will extend this to use a button on a web page to toggle the LED:
This invokes function handleLED when button is pressed

void setup() {
WiFi.begin(“SSID”, “password”);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
}
MDNS.begin(“ESP8266”);

server.on(“/”, HTTP_GET, handleRoot);
server.on(“/LED”, HTTP_POST, handleLED);
server.onNotFound(handleNotFound);

server.begin();
}
Handling POST Requests

When the button is pressed, this function is invoked

It toggles the LED, then redirects the browser (HTTP code 303) to the base HTML page esp-1a69ff/

void handleLED() {
digitalWrite(LED_PIN,!digitalRead(LED_PIN));
server.sendHeader(“Location”,”/”);
server.send(303);
}
Handling POST Requests

Security
The universities’ network Eduroam is configured with an enhanced security protocol
PEAP: Protected Extensible Authentication Protocol
It will refuse to connect to our Huzzah boards

Global internet
Local area network

Using the Huzzah as an Access Point
A Huzzah can be configured as a WiFi Access Point
Other devices (phones, other Huzzah boards,…) can communicate with each other via the access point
In this configuration we are not connected to the Global Internet
That’s a good thing, because security is less of an issue

Local area network

Setting up a Soft Access Point
#include
#include

const char *ssid = “ESP8266 Access Point”;
const char *password = “thereisnospoon”;

ESP8266WebServer server(80);

void setup() {
WiFi.softAP(ssid, password);
server.on(“/”, HTTP_GET, handleRoot);
server.onNotFound(handleNotFound);
server.begin();
}

void loop(void) {
server.handleClient();
}
Choose you own SSID and password here

Setting up a Soft Access Point
Use your phone’s WiFi settings to connect to the access point
The default IP address for the Huzzah is 192.168.4.1
mDNS doesn’t work in AP mode, so it doesn’t have a “name”
Your phone may want to auto disconnect when it sees that there is no connection to global Internet
Solution is device-specific, but should be something like “Advanced Settings” → “Manage Router” before it disconnects

Local area network

Summary
ESP8266 can connect to WiFi access point as a client or
Act as an Access point for other devices to connect to, forming a private network
Responses to HTML requests are defined in handler functions

/docProps/thumbnail.jpeg