ESP32 Arduino HTTP Server: Serving HTML and JavaScript

The objective of this post is to explain how to serve a HTML webpage with some JavaScript from a HTTP webserver running on the ESP32, using the Arduino core. The tests of this ESP32 tutorial were performed using a DFRobot’s ESP-WROOM-32 device integrated in a ESP32 development board.

Introduction

The objective of this post is to explain how to serve a HTML webpage with some JavaScript from a HTTP webserver running on the ESP32, using the Arduino core.

You can check here in detail how to install and get started with the HTTP web server library we are going to use, which allows to run the HTTP web server asynchronously.

In terms of Arduino code, it will be the same we have covered in this previous post, which explains how to serve a HTML page from PROGMEM. In this case, the changes in the code will be performed in the HTML code, which will now have additional JavaScript.

We will use the HTML example from that post, which contains a very simple form with two fields for the user to input the access credentials to a WiFi network, namely the network name and the password.

Previously, when we clicked the submit button, nothing happened. Now, we will add some JavaScript that will get the form data, convert it to JSON and print it in a popup window.

The tests of this ESP32 tutorial were performed using a DFRobot’s ESP-WROOM-32 device integrated in a ESP32 FireBeetle board.

The JavaScript code

In this section, we will only analyze the JavaScript code, which will be inside a Script tag on the HTML code. Thus, we will develop a function to be executed when the form is submitted.

In JavaScript, the syntax for declaring a function corresponds to the function keyword, followed by the name of the function. After the name of the function, we specify the parameters inside parenthesis, separated by commas if we have multiple.

Note that since JavaScript is a dynamically typed language, we don’t specify the type of the arguments (like we do in Arduino or C++, for example) and thus we just need to specify their names.

In our case, we will call our function formToJson and it will receive an argument called form. This argument will be an object representing our form, from which we will gather the information inputted by the user.

The body of the JavaScript function is then specified inside brackets, as can be seen below.

function formToJson(form){
// function code goes here
}

Inside our function we will retrieve the values that the user has inserted for both the password and ssid fields into two distinct JavaScript variables.

In JavaScript, we can declare a variable using the var keyword followed by the name of the variable. Then, we assign it with the equal operator (=).

We will need to retrieve the values from the form object that we defined as input of our JavaScript function.

We can access an object representing each input field of the form using their tag name attribute, which we need to define in the HTML  input tags nested inside the form tag. We will see HTML part in the following section.

So, we will assume that the HTML input field of the form for the password will be named “pass” and the HTML input field for the network name will be “ssid” (from service set identifier, which is the technical term used to denominate the name of a WiFi network).

So, in JavaScript, we can retrieve these objects by accessing our form object like this:

form.pass // Assumes an input HTML tag with name = "pass" nested in the HTML form tag
form.ssid // Assumes an input HTML tag with name = "ssid" nested in the HTML form tag

In both cases, we end up accessing objects representing each input and to get their actual value, we need to access their value attribute, as shown below.

var pass = form.pass.value;
var ssid = form.ssid.value;

{
pass:pass,
ssid:ssid
}

var jsonFormInfo = JSON.stringify({
    pass:pass,
    ssid: ssid
});

To finalize, we will call the alert method of the window object to create a popup window in the browser with an alert dialog, which will be our JSON string. The final code can be seen below, and already includes the call to this function, passing as input the JSON string.

function formToJson(form){
 
    var pass = form.pass.value;
    var ssid = form.ssid.value;
 
    var jsonFormInfo = JSON.stringify({
        pass:pass,
        ssid: ssid
    });
 
    window.alert(jsonFormInfo);
 
}

<script language = "JavaScript">
    function formToJson(form){
         
        var pass = form.pass.value;
        var ssid = form.ssid.value;
         
        var jsonFormInfo = JSON.stringify({
            pass:pass, 
            ssid: ssid
        });
 
        window.alert(jsonFormInfo);
         
    }
</script>

<form onSubmit = "event.preventDefault(); formToJson(this);">
...
</form>

Remember that both the input tags which we will use to render the input fields for the network name and password will need to have their name attributes matching the ones we have used in the JavaScript code. If the names don’t match, then we will not be able to retrieve the values.

<input type = "text" name = "ssid"/>
...
<input type = "text" name = "pass"/>

<script language = "JavaScript">
    function formToJson(form){
         
        var pass = form.pass.value;
        var ssid = form.ssid.value;
         
        var jsonFormInfo = JSON.stringify({
            pass:pass, 
            ssid: ssid
        });
 
        window.alert(jsonFormInfo);
         
    }
</script>
 
<form onSubmit = "event.preventDefault(); formToJson(this);">
    <label class="label">Network Name</label>
    <input type = "text" name = "ssid"/>
    <br/>
    <label>Password</label>
    <input type = "text" name = "pass"/>
    <br/>
    <input type="submit" value="Submit">
</form>

"<script language=\"JavaScript\">function formToJson(form){var pass=form.pass.value;var ssid=form.ssid.value;var jsonFormInfo=JSON.stringify({pass:pass, ssid: ssid});window.alert(jsonFormInfo);}</script> <form onSubmit=\"event.preventDefault(); formToJson(this);\"> <label class=\"label\">Network Name</label> <input type=\"text\" name=\"ssid\"/> <label>Password</label> <input type=\"text\" name=\"pass\"/> <input type=\"submit\" value=\"Submit\"></form>"

#include <WiFi.h>
#include <FS.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
 
const char* ssid = "yourNetworkName";
const char* password = "yourNetworkPass;
 
AsyncWebServer server(80);
const char HTML[] PROGMEM = "<script language=\"JavaScript\">function formToJson(form){var pass=form.pass.value;var ssid=form.ssid.value;var jsonFormInfo=JSON.stringify({pass:pass, ssid: ssid});window.alert(jsonFormInfo);}</script> <form onSubmit=\"event.preventDefault(); formToJson(this);\"> <label class=\"label\">Network Name</label> <input type=\"text\" name=\"ssid\"/> <label>Password</label> <input type=\"text\" name=\"pass\"/> <input type=\"submit\" value=\"Submit\"></form>";

The remaining code will be done in the setup function. We will first open a serial connection and then connect the ESP32 to the WiFi network. After the connection, we will print the ESP32 IP on the network, so we can later reach the server using a web browser.

Next we will configure a route in the “/html” path, which will listen to incoming HTTP GET requests. Its handling function will correspond to return the previously declared HTML string.

To finalize, we call the begin method on our server object, so it starts listening to the incoming requests. The Arduino loop function will be left empty since the server works asynchronously and thus no periodic client handling calls need to be done.

The full source code can be seen below.

#include <WiFi.h>
#include <FS.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
 
const char* ssid = "yourNetworkName";
const char* password =  "yourNetworkPass;
 
AsyncWebServer server(80);
 
const char HTML[] PROGMEM = "<script language=\"JavaScript\">function formToJson(form){var pass=form.pass.value;var ssid=form.ssid.value;var jsonFormInfo=JSON.stringify({pass:pass, ssid: ssid});window.alert(jsonFormInfo);}</script> <form onSubmit=\"event.preventDefault(); formToJson(this);\"> <label class=\"label\">Network Name</label> <input type=\"text\" name=\"ssid\"/> <label>Password</label> <input type=\"text\" name=\"pass\"/> <input type=\"submit\" value=\"Submit\"></form>";
 
void setup(){
  Serial.begin(115200);
 
  WiFi.begin(ssid, password);
 
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }
 
  Serial.println(WiFi.localIP());
 
  server.on("/html", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(200, "text/html", HTML);
  });
 
  server.begin();
}
 
void loop(){
}

Testing the code

To test everything, first compile and upload the Arduino code to the ESP32. Then, open the serial monitor to retrieve the IP of the device on the WiFi network.

Once you have the IP, open a web browser of your choice and paste the following in the address bar, changing {yourDeviceIP} for the IP you have just copied from the serial monitor.
http://{yourDeviceIP}/html

You should get the HTML page we have just implemented, with the form inputs and the submit button. To test it, insert some values in both fields and click the submit button. As indicated in figure 1, you should get an alert window with a JSON string containing the submitted values.

Figure 1 – Output of the alert window, after submitting the form.

DFRobot supply lots of esp32 arduino tutorials and esp32 projects for makers to learn.