NodeMCU: Membuat Web Server (ESP8266, WeMos, Lua)

Pada tulisan ini saya mencoba melakukan eksplorasi lanjutan setelah sebelumnya membuat Telnet Server yang digunakan untuk mengemulasikan console NodeMCU Lua yang dilengkapi dengan perintah ls, sntp dan time. Pada bagian ini kita mencoba membuat Web Server mini yang nantinya dapat mengendalikan LED BUILTIN dengan menggunakan klik pada button ON atau OFF.

Secara umum pembuatan server web adalah tidak berbeda dengan telnet server, yang membedakan keduanya adalah nomor port yang digunakan, jika telnet server melakukan listen pada port 23, maka http server adalah melakukan listen pada port 80. Berikut ini adalah source code yang saya adaptasi dari berbagai sumber dari internet.

app.lua

position = "off"

function led_builtin(position)
    gpio.mode(4, gpio.OUTPUT)
    if (position == "on") then
        gpio.write(4, gpio.LOW) -- LED BUILTIN ON
    else
        gpio.write(4, gpio.HIGH) -- LED BUILTIN ON
    end
end

function receive(conn, payload)
    --debug
    print(payload)

    -- extra path and variables
    local _,_,method,path,vars = string.find(payload,"([A-Z]+) (.+)?(.+) HTTP")
    if(method==nil) then
      _, _, method, path = string.find(payload,"([A-Z]+) (.+) HTTP")
    end

    -- extract the variables passed in the url
    local _GET = {}
    if (vars~=nil) then
      for k,v in string.gmatch(vars,"(%w+)=(%w+)&amp;*") do
        _GET[k] = v
        --debug
        print(k .. ":" .. v)
      end

      if (_GET['led'] ~= nil) then
        position = _GET['led']       
      end     
    end

    -- turn led ON/OFF
    led_builtin(position)

    local content="&lt;!DOCTYPE html>"
     .. "&lt;html>"
     .. "&lt;head>"
     .. "&lt;link rel='icon' type='image/png' href='http://nodemcu.com/favicon.png' />"
     .. "&lt;/head>"
     .. "&lt;body>"
     .. "&lt;h1>LED BUILTIN is " .. position .. "&lt;/h1>"
     .. "&lt;p>"
     .. "&lt;a href='?led=on'>&lt;button>on&lt;/button>&lt;/a>"
     .. "&lt;a href='?led=off'>&lt;button>off&lt;/button>&lt;/a>"
     .. "&lt;/p>"
     .. "&lt;/body>"
     .. "&lt;/html>"
    
    local contentLength=string.len(content)

    conn:on("sent", function(sck) sck:close() collectgarbage() end)
    conn:send("HTTP/1.1 200 OK\r\nContent-Type: text/html\r\nContent-Length:" .. contentLength .. "\r\n\r\n" .. content)
end
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://www.ekokepet.com/index.php/2019/08/23/membuat-aplikasi-android-menggunakan-ionic-framework/" target="_self" class="u876b510bc0ac63cc3373f0cfa6cc7bc9"><!-- INLINE RELATED POSTS 1/3 //--><style> .u876b510bc0ac63cc3373f0cfa6cc7bc9 , .u876b510bc0ac63cc3373f0cfa6cc7bc9 .postImageUrl , .u876b510bc0ac63cc3373f0cfa6cc7bc9 .centered-text-area { min-height: 80px; position: relative; } .u876b510bc0ac63cc3373f0cfa6cc7bc9 , .u876b510bc0ac63cc3373f0cfa6cc7bc9:hover , .u876b510bc0ac63cc3373f0cfa6cc7bc9:visited , .u876b510bc0ac63cc3373f0cfa6cc7bc9:active { border:0!important; } .u876b510bc0ac63cc3373f0cfa6cc7bc9 .clearfix:after { content: ""; display: table; clear: both; } .u876b510bc0ac63cc3373f0cfa6cc7bc9 { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #E67E22; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); } .u876b510bc0ac63cc3373f0cfa6cc7bc9:active , .u876b510bc0ac63cc3373f0cfa6cc7bc9:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #D35400; } .u876b510bc0ac63cc3373f0cfa6cc7bc9 .centered-text-area { width: 100%; position: relative; } .u876b510bc0ac63cc3373f0cfa6cc7bc9 .ctaText { border-bottom: 0 solid #fff; color: #ECF0F1; font-size: 16px; font-weight: bold; margin: 0; padding: 0; text-decoration: underline; } .u876b510bc0ac63cc3373f0cfa6cc7bc9 .postTitle { color: #2C3E50; font-size: 16px; font-weight: 600; margin: 0; padding: 0; width: 100%; } .u876b510bc0ac63cc3373f0cfa6cc7bc9 .ctaButton { background-color: #D35400!important; color: #ECF0F1; border: none; border-radius: 3px; box-shadow: none; font-size: 14px; font-weight: bold; line-height: 26px; moz-border-radius: 3px; text-align: center; text-decoration: none; text-shadow: none; width: 80px; min-height: 80px; background: url(https://www.ekokepet.com/wp-content/plugins/intelly-related-posts/assets/images/simple-arrow.png)no-repeat; position: absolute; right: 0; top: 0; } .u876b510bc0ac63cc3373f0cfa6cc7bc9:hover .ctaButton { background-color: #E67E22!important; } .u876b510bc0ac63cc3373f0cfa6cc7bc9 .centered-text { display: table; height: 80px; padding-left: 18px; top: 0; } .u876b510bc0ac63cc3373f0cfa6cc7bc9 .u876b510bc0ac63cc3373f0cfa6cc7bc9-content { display: table-cell; margin: 0; padding: 0; padding-right: 108px; position: relative; vertical-align: middle; width: 100%; } .u876b510bc0ac63cc3373f0cfa6cc7bc9:after { content: ""; display: block; clear: both; } </style><div class="centered-text-area"><div class="centered-text" style="float: left;"><div class="u876b510bc0ac63cc3373f0cfa6cc7bc9-content"><span class="ctaText">Baca Juga:</span>  <span class="postTitle">Membuat Aplikasi Android Menggunakan Ionic Framework</span></div></div></div><div class="ctaButton"></div></a></div>
function connection(conn)
    conn:on("receive", receive)
end

-- check whether server is already started
if srv~=nil then
    print("stop existing server...")
    srv:close()
    print("OK")
end

-- start a new server
print("start a new server ...")
srv=net.createServer(net.TCP, 1)
srv:listen(80, connection)
print("OK")

position = "off"

function led_builtin(position)

gpio.mode(4, gpio.OUTPUT)

if (position == "on") then

gpio.write(4, gpio.LOW) -- LED BUILTIN ON

else

gpio.write(4, gpio.HIGH) -- LED BUILTIN ON

end

function receive(conn, payload)

--debug

print(payload)

-- extra path and variables

local _,_,method,path,vars = string.find(payload,"([A-Z]+) (.+)?(.+) HTTP")

if(method==nil) then

_, _, method, path = string.find(payload,"([A-Z]+) (.+) HTTP")

end

-- extract the variables passed in the url

local _GET = {}

if (vars~=nil) then

for k,v in string.gmatch(vars,"(%w+)=(%w+)&*") do

_GET[k] = v

--debug

print(k .. ":" .. v)

end

if (_GET['led'] ~= nil) then

position = _GET['led']

end

-- turn led ON/OFF

led_builtin(position)

local content="<!DOCTYPE html>"

.. "<html>"

.. "<head>"

.. "<link rel='icon' type='image/png' href='http://nodemcu.com/favicon.png' />"

.. "</head>"

.. "<body>"

.. "<h1>LED BUILTIN is " .. position .. "</h1>"

.. "<p>"

.. "<a href='?led=on'><button>on</button></a>"

.. "<a href='?led=off'><button>off</button></a>"

.. "</p>"

.. "</body>"

.. "</html>"

local contentLength=string.len(content)

conn:on("sent", function(sck) sck:close() collectgarbage() end)

conn:send("HTTP/1.1 200 OK\r\nContent-Type: text/html\r\nContent-Length:" .. contentLength .. "\r\n\r\n" .. content)

end

function connection(conn)

conn:on("receive", receive)

end

-- check whether server is already started

if srv~=nil then

print("stop existing server...")

srv:close()

print("OK")

end

-- start a new server

print("start a new server ...")

srv=net.createServer(net.TCP, 1)

srv:listen(80, connection)

print("OK")

Gambar 1. Verbose Web Server pada Esplore

Gambar 2. Turn LED BUILTIN ON/OFF via Web

NodeMCU: Membuat Web Server (ESP8266, WeMos, Lua)

Gallery

Today's Story

Bakpao Boldy Malang

8 HP Canggih dan Unik di Dunia

Tutorial kendali LED via BLYNK

Pantai Papuma

Senaputra FM

Suara Surabaya FM

Kosmonita FM

Hardrock FM

Related Articles

IoT Dasar : Seting Modul ESP8266

Packet Size Network MTU dan Maximum TCP

Inilah Cara Mengunci WhatsApp dengan Fingerprint