My first web server!
Posted: Thu Oct 22, 2015 5:25 pmI have been building websites for a number of years now (I'm no web guru though!) and messing around with electronics since I was a kid, I always wanted a way to combine the two hobbies. Now I can, thanks to the ESP8266.
Now, it's never going to compete with a PC running Apache, PHP and MySQL, but in the few short days since my ESP arrived, I've managed to build, and program, a simple webserver!
This example allows you to turn two LEDs on and off from any browser using two links on the page. The links change to show the current state of the LEDs and because the ESP has so much memory available (even after all the WiFi stuff!), I decided to add a little CSS too.
Feel free to use and abuse as you see fit, all comments and suggestions welcome.
Natty
Now, it's never going to compete with a PC running Apache, PHP and MySQL, but in the few short days since my ESP arrived, I've managed to build, and program, a simple webserver!
This example allows you to turn two LEDs on and off from any browser using two links on the page. The links change to show the current state of the LEDs and because the ESP has so much memory available (even after all the WiFi stuff!), I decided to add a little CSS too.
Code: Select all
/* Simple Web Server for ESP8266-12E
* NattyFido 2015
* www.nattyfido.co.uk (shameless plug!)
*/
#include <ESP8266WiFi.h>
const char* ssid = "YOUR-SSID"; // SSID of LAN/WLAN
const char* password = "YOUR-PASSWORD"; // password
const int port = 80; // port to serve pages through
const int led0 = 13;
const int led1 = 12;
const int led2 = 14;
int v1 = 0;
int v2 = 0;
WiFiServer server(port);
void setup() {
Serial.begin(115200); // start serial for debug
delay(10);
pinMode(led0, OUTPUT); // all outputs for LEDs
pinMode(led1, OUTPUT);
pinMode(led2, OUTPUT);
digitalWrite(led0, 0); // all LEDs off to start
digitalWrite(led1, 0);
digitalWrite(led2, 0);
Serial.println();
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password); // connect to WiFi network
while (WiFi.status() != WL_CONNECTED) { // wait until connected
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
server.begin(); // Start the server
Serial.println("Server started");
Serial.println(WiFi.localIP()); // Print the servers IP address
}
void loop() {
WiFiClient client = server.available(); // Check if a client has connected
if (!client) {
return;
}
Serial.println("New client"); // Wait until the client sends some data
while (!client.available()) {
delay(1);
}
String req = client.readStringUntil('\r'); // Read the first line of the request
Serial.println(req);
client.flush();
if (req.indexOf("/led1/0") != -1) // if req = /led1/0
v1 = 0; // set flag to turn LED1 off
else if (req.indexOf("/led1/1") != -1) // if req = /led1/1
v1 = 1; // set flag to turn LED1 on
else if (req.indexOf("/led2/0") != -1) // if req = /led2/0
v2 = 0; // set flag to turn LED2 off
else if (req.indexOf("/led2/1") != -1) // if req = /led2/1
v2 = 1; // set flag to turn LED2 on
else {
Serial.println("Invalid request"); // URL not recognised
String r = HTMLHeader(); // display home page
r += HTMLPage();
r += HTMLFooter();
client.print(r); // send page to clients browser
client.stop(); // disconnect client
return;
}
digitalWrite(led1, v1); // set LED1 according to v1
digitalWrite(led2, v2); // set LED2 according to v2
client.flush();
String s = HTMLHeader(); // display page
s += HTMLPage();
s += HTMLFooter();
digitalWrite(led0, 1); // page is being sent
client.print(s); // send the response to the client
client.stop(); // disconnect client
digitalWrite(led0, 0); // finished sending page
delay(1);
Serial.println("Client disonnected");
Serial.println("");
}
String HTMLHeader() { // standard HTML header
String h = "HTTP/1.1 200 OK\r\n";
h += "Content-Type: text/html\r\n\r\n";
h += "<!DOCTYPE HTML>\n";
h += "<html>\n";
h += "<body>\n";
return h;
}
String HTMLFooter() { // standard HTML footer
String f = "<table width=\"100%\" bgcolor=\"black\" cellpadding=\"12\" border=\"0\">\n";
f += "<tr><td><p style = \"color: white; background: black;font-size: 0.8em;";
f += "font-weight: bold; text-align: center; margin: 0px 10px 0px 10px;\">\n";
f += "<a href = \"http://www.nattyfido.co.uk\">Dean Fowler</a> © 2015</p></td></tr>";
f += "</table>";
f += "</body>\n";
f += "</html>\n";
return f;
}
String HTMLPage() { // main HTML for page, edit to suit your application
String p = "<h1>Simple Webserver</h1>\n";
p += "<p>Running on a <b>ESP8266-12E</b></p>\n";
p += "<p>Code written in <b>Arduino IDE</b> by <i>NattyFido</i></p>\n";
// display links depending on current state of LEDs 1 & 2
p += (v1) ? "<p><a href = \"/led1/0\">Turn LED 1 off</a></p>\n" : "<p><a href = \"/led1/1\">Turn LED 1 on</a></p>\n";
p += (v2) ? "<p><a href = \"/led2/0\">Turn LED 2 off</a></p>\n" : "<p><a href = \"/led2/1\">Turn LED 2 on</a></p>\n";
return p;
}
Feel free to use and abuse as you see fit, all comments and suggestions welcome.
Natty