ESP8266 Web Server Tutorial

Written by Rui Santos - Get free updates of new posts here

If you want to learn more about the ESP8266 module, first read my Getting Started Guide for the ESP8266 WiFi Module. In this project you’ll create a standalone web server with an ESP8266 that can toggle two LEDs.

First, watch the video demonstration below

Why flashing your ESP8266 module with NodeMCU?

NodeMCU is a firmware that allows you to program the ESP8266 modules with LUA script. And you’ll find it very similar to the way you program your Arduino. With just a few lines of code you can establish a WiFi connection, control the ESP8266 GPIOs, turning your ESP8266 into a web server and a lot more.

DOWNLOAD FREE PDF: Getting Started with ESPlorer IDE and ESP8266

Where to buy?

You can click here to get this module on eBay for less than $4.

Click the image above, to see on ebay. — Click the image above, to see on eBay.

Schematics (3.3V FTDI Programmer)

And you can buy one FTDI programmer on eBay here.
esp8266_pinout_h-569x236

Wiring:

RX -> TX
TX -> RX
CH_PD -> 3.3V
GPIO 0 -> GND
VCC -> 3.3V
GND -> GND

Downloading NodeMCU Flasher for Windows

After wiring your circuit, you have to download the NodeMCU flasher. It’s a .exe file that you can download using one of the following links:

Win32 Windows Flasher
Win64 Windows Flasher

You can click here to find all the information about NodeMCU flasher.

Flashing your ESP8266

Open the flasher that you just downloaded and a window should appear (as shown in the following figure).
nodemcu_flaser

Press the button “Flash” and it should start the flashing process immediately (You might have to change some of the settings on the Advanced tab). After finishing this process, it should appear a green circle with a check icon.

Schematics

Now follow the schematics bellow to create your web server to control two LEDs.

How to upload code

I recommend using the ESPlorer program created by 4refr0nt to create and save LUA files into your ESP8266. Follow these instructions to download and install ESPlorer:

Click here to download ESPlorer
Unzip that folder
Go to the dist folder (here’s the path: ESPlorer-master\ESPlorer\dist)
Run ESPlorer.jar. It’s a JAVA program, so you need JAVA installed on your computer.
Open the ESPlorer

GND one no Connect
esplorer start

You should see a window similar to the preceding Figure, follow these instructions to upload a LUA file:

Connect your FTDI programmer to your computer
Select your FTDI programmer port
Press Open/Close
Select NodeMCU+MicroPtyhon tab
Create a new file called init.lua
Press Save to ESP

Everything that you need to worry about or change is highlighted in red box.

Code

Upload the following code into your ESP8266 using the preceding software. Your file should be named “init.lua“. You can click here to download the file.

        
        wifi.setmode(wifi.STATION)
wifi.sta.config("YOUR_NETWORK_NAME","YOUR_NETWORK_PASSWORD")
print(wifi.sta.getip())
led1 = 3
led2 = 4
gpio.mode(led1, gpio.OUTPUT)
gpio.mode(led2, gpio.OUTPUT)
srv=net.createServer(net.TCP)
srv:listen(80,function(conn)
    conn:on("receive", function(client,request)
        local buf = "";
        local _, _, method, path, vars = string.find(request, "([A-Z]+) (.+)?(.+) HTTP");
        if(method == nil)then
            _, _, method, path = string.find(request, "([A-Z]+) (.+) HTTP");
        end
        local _GET = {}
        if (vars ~= nil)then
            for k, v in string.gmatch(vars, "(%w+)=(%w+)&*") do
                _GET[k] = v
            end
        end
        buf = buf.."<h1> ESP8266 Web Server</h1>";
        buf = buf.."<p>GPIO0 <a href=\"?pin=ON1\"><button>ON</button></a>&nbsp;<a href=\"?pin=OFF1\"><button>OFF</button></a></p>";
        buf = buf.."<p>GPIO2 <a href=\"?pin=ON2\"><button>ON</button></a>&nbsp;<a href=\"?pin=OFF2\"><button>OFF</button></a></p>";
        local _on,_off = "",""
        if(_GET.pin == "ON1")then
              gpio.write(led1, gpio.HIGH);
        elseif(_GET.pin == "OFF1")then
              gpio.write(led1, gpio.LOW);
        elseif(_GET.pin == "ON2")then
              gpio.write(led2, gpio.HIGH);
        elseif(_GET.pin == "OFF2")then
              gpio.write(led2, gpio.LOW);
        end
        client:send(buf);
        client:close();
        collectgarbage();
    end)
end)

Don’t forget to replace your WiFi Station details in that code above (Network Name and Password).

Accessing your web server

When your ESP8266 restarts it prints in your serial monitor the IP address of your ESP8266. If you type your ESP8266 IP address in your web browser, you can access your web server. In my case it’s http://192.168.1.82.
web server esp8266

Related Content: Like ESP8266? Check out Home Automation Using ESP8266

For a video demonstration of this project make sure you watch the video above in the introduction of this post.

Do you have any questions? Leave a comment down below!

Thanks for reading. If you like this post probably you might like my next ones, so please support me by subscribing my blog and my Facebook Page.

ESP8266

Monday, 29 February 2016