Creating an Arduino Web Server

From scratch hardware and software

Web Servers

Simpler than you think

A web server

Listens for connections

Parses requests

Send back status messages and resource requested

Arduino Overview

Open source physical computing platform

Multiple form factors

Easy to code (C/C++ like) and use (USB)

Low cost

Great for prototypes, wearable computers, sensor networks etc

Arduino Hardware

ATMega 8 bit microcontroller

32K program memory, 2K SRAM, 1K EEPROM

Dual purpose digital inputs and outputs

Analog inputs

High performance (16 MIPS)

Low power (3.3V or 5V)

Arduino IDE/Software

Open source

Cross platform (Mac, PC and Linux)

Alpha but stable

Simple to use

Includes documentation, help, samples and library for common tasks

Arduino Shields

Hardware can be easily extended

Shields plug in on top of standard boards

Build your own or buy off the shelf (lots available)

Stackable, can use more than one

Ethernet Shields

Several shields available

Two main types DHCP and non DHCP

Some configuration required

Non DHCP you set IP and MAC address in code

IP and MAC address

Set IP address and MAC address in your code

Need to be careful with duplicates

Set up like so:Ethernet.begin(mac, ip);

Ethernet Library

Standard ethernet library

Includes Client and Server classes

Create server like so:Server server(80);server.begin();

Bare bones web server about 20 lines of code and 5K compiled

HTTP Protocol

HyperText Transfer Protocol

Used by web servers to transfer web pages to be displayed in your web browser

Connection (usually) on port 80

TCP Connections

TCP three way connection handshake

Client sends SYN with random number (A)

Server replies with SYN-ACK containing A+1 and random number (B)

Client replies with ACK containing B+1

Luckily ethernet library does this for you!

Connection Code

Create a clientClient client = server.available();

Connectedwhile (client.connected(){....}

HTTP Requests

Start with request “GET index.html HTTP/1.1”

Optional headers “Accept-Language: en”

Empty line

Optional message body (POST and other requests)

HTTP Request Hack

Standard GET request have request followed by blank line

So just ignore what is requested and check for blank line

Request Code

Read characterschar c = client.read();

If newline and last character was newlineif (c == '\n' && blankline) { ...}if (c == '\n') { blankline = true;}

HTTP Response

Send back status line "HTTP/1.1 200 OK"

Send back content type "Content-Type: text/html"

Send blank line

Send (HTML) content

Response Code

Send status and content typeclient.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); client.println();

Send contentfor (int i =0; i < nolines; i++) { client.println(content[i]);}

Close Connections

Clear up after youclient.flush();client.stop();

Arduiono Web Server Demo

Aruino IDE

Web browser