s=socket.socket(socket.AF_INET,socket.SOCK_STREAM)
s.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1) try:
s.bind(('',80))
except OSError as exception:
if exception.args[0] == uerrno.EADDRINUSE:
print("Socket is already bound, please reset the machine")
sys.exit()

The server then starts listening for an incoming connection request and establishes a connection by accepting it.

s.listen(5) print("Starting the Hello World WEB server on IP address ",ipaddr,"port 80")
while True:
conn,addr=s.accept() print("GOT a connection from %s" % str(addr))

Finally it reads an http request from the connection and answers with its Hello World page:

https://docs.micropython.org/en/latest/library/usocket.html

Version 2:

In the second version we will separate the HTML text from the server and store it in the html directory (to be created with ampy: ampy mkdir /html) on the ESP32. Now we can use a ready made Web server for MicroPython, picoweb to serve the page. picoweb and utemplates (see exercise 2) are already included in the MicroPython binary.

Studying example_webapp.py in the base directory of picoweb will show you how to do this.

Version 3:

If we do not use an external SD card, then space for the HTML pages is rather limited. It may therefore be interesting to use gzip compresses pages. Modify your picoweb server to use gzipped HTML.

Making the WEB page interactive

The WEB server above has one major flaw: for each measurement the complete page must be reloaded. Wouldn't it be nice if we could keep the table and only replace the measurement results and time stamp?

Such types of actions can be accomplished with javascript. javascript is a full programming language for WEB programming running on the client side, in the browser. Teaching also javascript would largely exceed the scope of this course. However, if you don't know javascript well enough (as was the case for me!) here is a nice tutorial which will put you on track quickly:

https://www.w3schools.com/js/DEFAULT.asp

Controlling the ESP32 User Led

Before looking at how to display the SHT30 measurements on our WEB server let's first try to give WEB control to the user LED on the ESP32 CPU board. We want to create a WEB page allowing to switch this LED on and off.

We will start off with the light bulb example from the introduction in this tutorial replacing the light bulb with a blue LED (simulating the LED on the ESP32 CPU board.

Communication between the WEB client, on which javascript is running, and the WEB server on the ESP 32 can be accomplished with Asynchronous JavaScript And XML (AJAX). To understand this you will have to go through yet another tutorial: the AJAX tutorial.

Essentially you must create aXMLHttpRequest, which you send from the client to the server and to which the server will respond. You use the answer from the server to update the HTML page using javascript.