![\"esp32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/11\/esp32-led-server-micropython.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/p>\nLearn how to build a web server to control the ESP32 or ESP8266 outputs using MicroPython framework. As an example we’ll build a web server with ON and OFF buttons to control the on-board LED of the ESP32\/ESP8266. We’ll use sockets and the Python socket API.<\/p>\n
<\/p>\n
<\/p>\n
To program the ESP32 and ESP8266 with MicroPython, we use uPyCraft IDE as a programming environment. Follow the next tutorials to install uPyCraft IDE and flash MicroPython firmware on your board:<\/p>\n
If this is your first time dealing with MicroPython you may find these next tutorials useful:<\/p>\n
For this tutorial you need an ESP32 or ESP8266 board:<\/p>\n
You can use the preceding links or go directly to MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p> Connect the ESP32 or ESP8266 board to your computer. Open uPyCraft IDE, and go to Tools<\/strong> > Serial<\/strong> and select the serial port.<\/p>\n You should see the files on the ESP32\/ESP8266 board on the device folder. By default, when you burn MicroPython firmware, a boot.py<\/em> file is created.<\/p>\n For this project you’ll need a boot.py<\/em> file and a main.py<\/em> file. The boot.py<\/em> file has the code that only needs to run once on boot. This includes importing libraries, network credentials, instantiating pins, connecting to your network, and other configurations.<\/p>\n The main.py<\/em> file will contain the code that runs the web server to serve files and perform tasks based on the requests received by the client.<\/p>\n Copy the following code to the ESP32\/ESP8266 boot.py<\/em> file.<\/p>\n View raw code<\/a><\/p>\n As mentioned previously, we create our web server using sockets and the Python socket API. The official documentation imports the socket<\/span> library as follows:<\/p>\n We need to import the Pin<\/span> class from the machine<\/span> module to be able to interact with the GPIOs.<\/p>\n After importing the socket<\/span> library, we need to import the network<\/span> library. The network<\/span> library allows us to connect the ESP32 or ESP8266 to a Wi-Fi network.<\/p>\n The following lines turn off vendor OS debugging messages:<\/p>\n Then, we run a garbage collector:<\/p>\n A garbage collector is a form of automatic memory management. This is a way to reclaim memory occupied by objects that are no longer in used by the program. This is useful to save space in the flash memory.<\/p>\n The following variables hold your network credentials:<\/p>\n You should replace the words highlighted in red with your network SSID and password, so that the ESP is able to connect to your router.<\/p>\n Then, set the ESP32 or ESP8266 as a Wi-Fi station:<\/p>\n After that, activate the station:<\/p>\n Finally, the ESP32\/ESP8266 connects to your router using the SSID and password defined earlier:<\/p>\n The following statement ensures that the code doesn\u2019t proceed while the ESP is not connected to your network.<\/p>\n After a successful connection, print network interface parameters like the ESP32\/ESP8266 IP address \u2013 use the ifconfig()<\/span> method on the station<\/span> object.<\/p>\n Create a Pin<\/span> object called led<\/span> that is an output, that refers to the ESP32\/ESP8266 GPIO2:<\/p>\n Copy the following code to the ESP32\/ESP8266 main.py<\/em> file.<\/p>\n View raw code<\/a><\/p>\n The script starts by creating a function called web_page()<\/span>. This function returns a variable called html<\/span> that contains the HTML text to build the web page.<\/p>\n The web page displays the current GPIO state. So, before generating the HTML text, we need to check the LED state. We save its state on the gpio_state<\/span> variable:<\/p>\n After that, the gpio_state<\/span> variable is incorporated into the HTML text using “+” signs to concatenate strings.<\/p>\n After creating the HTML to build the web page, we need to create a listening socket to listen for incoming requests and send the HTML text in response. For a better understanding, the following figure shows a diagram on how to create sockets for server-client interaction:<\/p>\n Create a socket using socket.socket()<\/span>, and specify the socket type. We create a new socket object called s<\/span> with the given address family, and socket type. This is a STREAM TCP socket:<\/p>\n Next, bind the socket to an address (network interface and port number) using the bind()<\/span> method. The bind()<\/span> method accepts a tupple variable with the ip address, and port number:<\/p>\n In our example, we are passing an empty string ‘ ‘ as an IP address and port 80. In this case, the empty string refers to the localhost IP address (this means the ESP32 or ESP8266 IP address).<\/p>\n The next line enables the server to accept connections; it makes a \u201clistening\u201d socket. The argument specifies the maximum number of queued connections. The maximum is 5.<\/p>\n In the while loop is where we listen for requests and send responses. When a client connects, the server calls the accept()<\/span> method to accept the connection. When a client connects, it saves a new socket object to accept and send data on the conn<\/span> variable, and saves the client address to connect to the server on the addr<\/span> variable.<\/p>\n Then, print the address of the client saved on the addr<\/span> variable.<\/p>\n The data is exchanged between the client and server using the send()<\/span> and recv()<\/span> methods.<\/p>\n The following line gets the request received on the newly created socket and saves it in the request<\/span> variable.<\/p>\n The recv()<\/span> method receives the data from the client socket (remember that we\u2019ve created a new socket object on the conn<\/span> variable). The argument of the recv()<\/span> method specifies the maximum data that can be received at once.<\/p>\n The next line simply prints the content of the request:<\/p>\n Then, create a variable called response<\/span> that contains the HTML text returned by the web_page()<\/span> function:<\/p>\n Finally, send the response to the socket client using the send()<\/span> and sendall()<\/span> methods:<\/p>\n In the end, close the created socket.<\/p>\n Upload the main.py<\/em> and boot.py<\/em> files to the ESP32\/ESP8266. Your device<\/em> folder should contain two files: boot.py<\/em> and main.py<\/em>.<\/p>\n After uploading the files, press the ESP EN\/RST on-board button.<\/p>\n After a few seconds, it should establish a connection with your router and print the IP address on the Shell.<\/p>\n Open your browser, and type your ESP IP address you’ve just found. You should see the web server page as shown below.<\/p>\n When you press the ON button, you make a request on the ESP IP address followed by \/?led=on<\/span>. The ESP32\/ESP8266 on-board LED turns on, and the GPIO state is updated on the page.<\/p>\n Note:<\/strong> some ESP8266 on-board LEDs turn on the LED with an OFF command, and turn off the LED with the ON command.<\/p>\n When you press the OFF button, you make a request on the ESP IP address followed by \/?led=off<\/span>. The LED turns off, and the GPIO state is updated.<\/p>\n Note:<\/strong> to keep this tutorial simple, we’re controlling the on-board LED that corresponds to GPIO 2. You can control any other GPIO with any other output (a relay, for example) using the same method. Also, you can modify the code to control multiple GPIOs or change the HTML text to create a different web page.<\/p>\n This tutorial showed you how to build a simple web server with MicroPython firmware to control the ESP32\/ESP8266 GPIOs using sockets and the Python socket library. If you’re looking for a web server tutorial with Arduino IDE, you can check the following resources:<\/p>\n If you’re looking for more projects with the ESP32 and ESP8266 boards, you can take a look at the following:<\/p>\n We hope you\u2019ve found this article about how to build a web server with MicroPython useful. To learn more about MicroPython, take a look at our eBook: MicroPython Programming with ESP32 and ESP8266<\/a><\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":" Learn how to build a web server to control the ESP32 or ESP8266 outputs using MicroPython framework. As an example we’ll build a web server with ON and OFF buttons to … <\/p>\n![](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&quality=100&strip=all&ssl=1\")
<\/a><\/p>\nPreparing the Files<\/h2>\n
![\"uPyCraft](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/10\/uPyCraft-IDE-Select-Serial-Port-COM5.png?resize=692%2C576&quality=100&strip=all&ssl=1\")
<\/p>\nCreating the main.py<\/em> file on your board<\/h3>\n
\n
![\"\"](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/10\/uPycraft-ide-tools-menu-new-file.png?resize=135%2C41&quality=100&strip=all&ssl=1\")
<\/p>\n\n
![\"\"](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/10\/uPycraft-ide-tools-menu-save-file.png?resize=142%2C47&quality=100&strip=all&ssl=1\")
<\/p>\n<\/li>\n![\"\"](\"https:\/\/i1.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/10\/new-file-created-uPyCraft-IDE.png?resize=402%2C112&ssl=1\")
<\/p>\n\n
![\"\"](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/10\/main-py-file-created.png?resize=744%2C476&ssl=1\")
<\/p>\n\n
![\"\"](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/10\/uPycraft-ide-tools-menu-download-and-run.png?resize=238%2C45&quality=100&strip=all&ssl=1\")
<\/p>\n\n
![\"uPycraft](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/10\/upload-file-to-esp32.png?resize=824%2C498&quality=100&strip=all&ssl=1\")
<\/p>\nboot.py<\/h3>\n
# Complete project details at https:\/\/RandomNerdTutorials.com\n\ntry:\n import usocket as socket\nexcept:\n import socket\n\nfrom machine import Pin\nimport network\n\nimport esp\nesp.osdebug(None)\n\nimport gc\ngc.collect()\n\nssid = 'REPLACE_WITH_YOUR_SSID'\npassword = 'REPLACE_WITH_YOUR_PASSWORD'\n\nstation = network.WLAN(network.STA_IF)\n\nstation.active(True)\nstation.connect(ssid, password)\n\nwhile station.isconnected() == False:\n pass\n\nprint('Connection successful')\nprint(station.ifconfig())\n\nled = Pin(2, Pin.OUT)\n<\/code><\/pre>\n\ttry:\n import usocket as socket\nexcept:\n import socket<\/code><\/pre>\nfrom machine import Pin<\/code><\/pre>\nimport network<\/code><\/pre>\nimport esp\nesp.osdebug(None)<\/code><\/pre>\nimport gc\ngc.collect()<\/code><\/pre>\nssid = 'REPLACE_WITH_YOUR_SSID'\npassword = 'replace_with_your_password'<\/code><\/pre>\nstation = network.WLAN(network.STA_IF)<\/code><\/pre>\nstation.active(True)<\/code><\/pre>\nstation.connect(ssid, password)<\/code><\/pre>\nwhile station.isconnected() == False:\n pass<\/code><\/pre>\nprint('Connection successful')\nprint(station.ifconfig())<\/code><\/pre>\nled = Pin(2, Pin.OUT)<\/code><\/pre>\nmain.py<\/h3>\n
# Complete project details at https:\/\/RandomNerdTutorials.com\n\ndef web_page():\n if led.value() == 1:\n gpio_state="ON"\n else:\n gpio_state="OFF"\n \n html = """<html><head> <title>ESP Web Server<\/title> <meta name="viewport" content="width=device-width, initial-scale=1">\n <link rel="icon" href="data:,"> <style>html{font-family: Helvetica; display:inline-block; margin: 0px auto; text-align: center;}\n h1{color: #0F3376; padding: 2vh;}p{font-size: 1.5rem;}.button{display: inline-block; background-color: #e7bd3b; border: none; \n border-radius: 4px; color: white; padding: 16px 40px; text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}\n .button2{background-color: #4286f4;}<\/style><\/head><body> <h1>ESP Web Server<\/h1> \n <p>GPIO state: <strong>""" + gpio_state + """<\/strong><\/p><p><a href="\/?led=on"><button class="button">ON<\/button><\/a><\/p>\n <p><a href="\/?led=off"><button class="button button2">OFF<\/button><\/a><\/p><\/body><\/html>"""\n return html\n\ns = socket.socket(socket.AF_INET, socket.SOCK_STREAM)\ns.bind(('', 80))\ns.listen(5)\n\nwhile True:\n conn, addr = s.accept()\n print('Got a connection from %s' % str(addr))\n request = conn.recv(1024)\n request = str(request)\n print('Content = %s' % request)\n led_on = request.find('\/?led=on')\n led_off = request.find('\/?led=off')\n if led_on == 6:\n print('LED ON')\n led.value(1)\n if led_off == 6:\n print('LED OFF')\n led.value(0)\n response = web_page()\n conn.send('HTTP\/1.1 200 OK\\n')\n conn.send('Content-Type: text\/html\\n')\n conn.send('Connection: close\\n\\n')\n conn.sendall(response)\n conn.close()\n<\/code><\/pre>\n\tdef web_page():<\/code><\/pre>\nif led.value() == 1:\n gpio_state=\"ON\"\nelse:\n gpio_state=\"OFF\"<\/code><\/pre>\nhtml = \"\"\"<html><head> <title>ESP Web Server<\/title> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<link rel=\"icon\" href=\"data:,\"> <style>html{font-family: Helvetica; display:inline-block; margin: 0px auto; text-align: center;}\nh1{color: #0F3376; padding: 2vh;}p{font-size: 1.5rem;}.button{display: inline-block; background-color: #e7bd3b; border: none; \nborder-radius: 4px; color: white; padding: 16px 40px; text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}\n.button2{background-color: #4286f4;}<\/style><\/head><body> <h1>ESP Web Server<\/h1> \n<p>GPIO state: <strong>\"\"\" + gpio_state<\/strong> + \"\"\"<\/strong><\/p><p><a href=\"\/?led=on\"><button class=\"button\">ON<\/button><\/a><\/p>\n<p><a href=\"\/?led=off\"><button class=\"button button2\">OFF<\/button><\/a><\/p><\/body><\/html>\"\"\"<\/pre>\nCreating a socket server<\/h3>\n
![\"python](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/10\/socket-server.png?resize=394%2C515&quality=100&strip=all&ssl=1\")
<\/p>\ns = socket.socket(socket.AF_INET, socket.SOCK_STREAM)<\/code><\/pre>\ns.bind(('', 80))<\/code><\/pre>\ns.listen(5)<\/code><\/pre>\nconn, addr = s.accept()<\/code><\/pre>\nprint('Got a connection from %s' % str(addr))<\/code><\/pre>\nrequest = conn.recv(1024)<\/code><\/pre>\nprint('Content = %s' % str(request))<\/code><\/pre>\nresponse = web_page()<\/code><\/pre>\nconn.send('HTTP\/1.1 200 OK\\n')\nconn.send('Content-Type: text\/html\\n')\nconn.send('Connection: close\\n\\n')\nconn.sendall(response)<\/code><\/pre>\nconn.close()<\/code><\/pre>\nTesting the Web Server<\/h2>\n
![\"esp32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/10\/esp32-EN-enable-button.jpg?resize=608%2C471&quality=100&strip=all&ssl=1\")
<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/11\/ip-address.png?resize=552%2C45&quality=100&strip=all&ssl=1\")
<\/p>\n![\"esp32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/11\/micropython-web-server-browser.png?resize=514%2C469&quality=100&strip=all&ssl=1\")
<\/p>\n![\"web](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/11\/DSC02551.jpg?resize=750%2C500&quality=100&strip=all&ssl=1\")
<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/11\/DSC02584.jpg?resize=750%2C500&quality=100&strip=all&ssl=1\")
<\/p>\nWrapping Up<\/h2>\n
\n
\n