A WEB Server and the HTTP Protocol

Exercise 1: Write a Hello World WEB Server

Write a simplistic WEB server, serving a single WEB page. This server is very similar to the TCP server written in the [WiFi]] exercises. It now waits for a connection on port 80, reads a request from the browser, and sends a simple HTML page as its response. Interpretation of the incoming request is not necessary because the server is only capable of sending a single page anyway.

Print the incoming HTTP request, which will look similar to this:

http.png

The request starts with "Content Get / HTTP/1.1"

The page seen by the browser will look similar to this:

helloWorldWebServerV1.png

Exercise 2: picoweb

Download picoweb and its example programms from gitthub: https://github.com/pfalcon/picoweb.

You can find several tutorials on picoweb on the Internet:

You may neglect the chapters on picoweb installation because the MicroPython firmware already contains a copy of picoweb:

picowebInstallation.png

For more information on the use of picoweb you will have to study the examples distributed with the github repository or picoweb itself. The examples demonstrate most of picoweb's features.

Re-write the example from exercise 1 using the picoweb framework. Now the HTML page is separated from the code and must be stored in a separate file. Upload this file to the ESP32 into a folder named html. Create the folder if it does not exist yet. You may also compress the HTML file with gzip and transfer the compressed file to the browser thus limiting the size of the message that must be sent.

Exercise 3: Provide Measurement Data on the WEB Page

Modify the WEB server to provide temperature and humidity measured with the SHT30. The easiest way to accomplish this is static text like in the Hello World HTML page into which the measurements can be inserted. This can be done with utemplates, which are provided by picoweb. Have a look in the utemplates README.MD and in the examples directory of picoweb to understand how this is implemented.

This is how your WEB site for SHT30 measurements might look like (screen dump of the solution script):

sht30WebSite.png

Exercise 4: Ajax

The above exercise has a major flaw: For each measurement you must reload the entire page. It would be much nicer it the WEB page could be updated whenever a new is requested.

-- Uli Raich - 2020-05-27

Comments

Topic attachments
I Attachment History Action Size Date Who Comment
PNGpng helloWorldWebServerV1.png r1 manage 38.8 K 2022-10-03 - 08:22 UliRaich  
PNGpng http.png r1 manage 105.1 K 2022-10-03 - 08:17 UliRaich  
PNGpng picowebInstallation.png r1 manage 13.3 K 2022-10-03 - 09:57 UliRaich  
PNGpng sht30WebSite.png r1 manage 15.5 K 2020-05-27 - 19:53 UliRaich  
Edit | Attach | Watch | Print version | History: r11 | r9 < r8 < r7 < r6 | Backlinks | Raw View | Raw edit | More topic actions...
Topic revision: r7 - 2022-10-03 - UliRaich
 
  • Edit
  • Attach
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 2008-2024 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback