ESP32 Forum

Posted: **Mon Sep 24, 2018 9:47 am**

I was reading the api-reference for HTTP SERVER here:
https://docs.espressif.com/projects/esp ... erver.html

I tried the example in \esp-idf\examples\protocols\http_server\simple, and it works just fine.
Yet its all clear as mud to me.
I added a handler to catch a request to the main page, and this worked fine, but yet now i am stumped on the proper way to serve an actual html page. I know the .html to send, but how to place it inside the main_page_get_handler() properly and with the correct response type. I have always been a example type of learner. Reading a doc like that means very little to me. Without an actual example serving a web page, or showing it turning on/off say a led I get stumped quickly with just the api-referenece.

Anyone mind sharing some tid bits ?

I have added my own httpd_register_uri_handler(server, &mainPage);

Code: Select all


esp_err_t main_page_get_handler(httpd_req_t *req)
{
    printf("Main Page Requested\r\n");

    return ESP_OK;
}

httpd_uri_t mainPage = {
    .uri       = "/",
    .method    = HTTP_GET,
    .handler   = main_page_get_handler,
    /* Let's pass response string in user
     * context to demonstrate it's usage */
    .user_ctx  = NULL
};

Posted: **Mon Sep 24, 2018 1:38 pm**

Not sure I know enough to give you the best answer, but here's an attempt anyway...

The example for http_server has a function to return 'Hello World!' to the browser if you try to visit <esp32-ip-address>/hello :

Code: Select all

/* An HTTP GET handler */
esp_err_t hello_get_handler(httpd_req_t *req)
{
    char*  buf;
    size_t buf_len;

    /* Get header value string length and allocate memory for length + 1,
     * extra byte for null termination */
    buf_len = httpd_req_get_hdr_value_len(req, "Host") + 1;
    if (buf_len > 1) {
        buf = malloc(buf_len);
        /* Copy null terminated value string into buffer */
        if (httpd_req_get_hdr_value_str(req, "Host", buf, buf_len) == ESP_OK) {
            ESP_LOGI(TAG, "Found header => Host: %s", buf);
        }
        free(buf);
    }

    buf_len = httpd_req_get_hdr_value_len(req, "Test-Header-2") + 1;
    if (buf_len > 1) {
        buf = malloc(buf_len);
        if (httpd_req_get_hdr_value_str(req, "Test-Header-2", buf, buf_len) == ESP_OK) {
            ESP_LOGI(TAG, "Found header => Test-Header-2: %s", buf);
        }
        free(buf);
    }

    buf_len = httpd_req_get_hdr_value_len(req, "Test-Header-1") + 1;
    if (buf_len > 1) {
        buf = malloc(buf_len);
        if (httpd_req_get_hdr_value_str(req, "Test-Header-1", buf, buf_len) == ESP_OK) {
            ESP_LOGI(TAG, "Found header => Test-Header-1: %s", buf);
        }
        free(buf);
    }

    /* Read URL query string length and allocate memory for length + 1,
     * extra byte for null termination */
    buf_len = httpd_req_get_url_query_len(req) + 1;
    if (buf_len > 1) {
        buf = malloc(buf_len);
        if (httpd_req_get_url_query_str(req, buf, buf_len) == ESP_OK) {
            ESP_LOGI(TAG, "Found URL query => %s", buf);
            char param[32];
            /* Get value of expected key from query string */
            if (httpd_query_key_value(buf, "query1", param, sizeof(param)) == ESP_OK) {
                ESP_LOGI(TAG, "Found URL query parameter => query1=%s", param);
            }
            if (httpd_query_key_value(buf, "query3", param, sizeof(param)) == ESP_OK) {
                ESP_LOGI(TAG, "Found URL query parameter => query3=%s", param);
            }
            if (httpd_query_key_value(buf, "query2", param, sizeof(param)) == ESP_OK) {
                ESP_LOGI(TAG, "Found URL query parameter => query2=%s", param);
            }
        }
        free(buf);
    }

    /* Set some custom headers */
    httpd_resp_set_hdr(req, "Custom-Header-1", "Custom-Value-1");
    httpd_resp_set_hdr(req, "Custom-Header-2", "Custom-Value-2");

    /* Send response with custom headers and body set as the
     * string passed in user context*/
    const char* resp_str = (const char*) req->user_ctx;
    httpd_resp_send(req, resp_str, strlen(resp_str));

    /* After sending the HTTP response the old HTTP request
     * headers are lost. Check if HTTP request headers can be read now. */
    if (httpd_req_get_hdr_value_len(req, "Host") == 0) {
        ESP_LOGI(TAG, "Request headers lost");
    }
    return ESP_OK;
}

httpd_uri_t hello = {
    .uri       = "/hello",
    .method    = HTTP_GET,
    .handler   = hello_get_handler,
    /* Let's pass response string in user
     * context to demonstrate it's usage */
    .user_ctx  = "Hello World!"
};

Now, ignore all the header and query parsing and look at this section:

Code: Select all

    /* Send response with custom headers and body set as the
     * string passed in user context*/
    const char* resp_str = (const char*) req->user_ctx;
    httpd_resp_send(req, resp_str, strlen(resp_str));

user_ctx is passed by the handler and contains 'Hello World!' - this is what appears on your browser if you hit the right URL. Seems to me that replacing this text in .user_ctx with some actual HTML should do the trick.

Now, to my inexperienced mind, it's messy as hell - but then it's enough to get you started. Once that's up and running, you can look at using the ESP-IDF file system (SPIFFS?) to serve up HTML, CSS and JS files to the browser. At least, that's what I'll be doing as soon as I get round to it!

Posted: **Mon Sep 24, 2018 2:29 pm**

All you need to do is use httpd_resp_send to send the web page. If for example you have a web page with the filename upload.html, then you can convert this to an C file that can be included in the code with

Code: Select all

xxd  -i upload.html  web_upload.h

then you can display this web page by first declaring a structure

Code: Select all

typedef struct {
    const unsigned char *resp;
    size_t              *resp_len;
} WEBKIT_RESPONSE_ARGS;

WEBKIT_RESPONSE_ARGS webkit_upload_args = { upload_html, &upload_html_len };

httpd_uri_t webkit_upload_req =   { .uri = "/upload.html",      .method = HTTP_GET, .handler = webkit_request_handler, .user_ctx  = (void *)&webkit_upload_args };

esp_err_t webkit_request_handler(httpd_req_t *req)
{
    WEBKIT_RESPONSE_ARGS* args = (WEBKIT_RESPONSE_ARGS *)(req->user_ctx);
    
    httpd_resp_set_type(req, HTTPD_TYPE_TEXT);    
    httpd_resp_send(req, (const char*)args->resp, *(args->resp_len));
    return ESP_OK;
}

then start the webserver with

Code: Select all

    if (httpd_start(&server, &config) == ESP_OK) {
        httpd_register_uri_handler(server, &webkit_upload_req);
    }

Posted: **Tue Sep 25, 2018 1:24 pm**

But where do we tell it the Response code (I.E., 200 OK) and Content type (I.E., text/html) at ?

Posted: **Tue Sep 25, 2018 3:07 pm**

https://docs.espressif.com/projects/esp ... PKc6size_t

If no status code and content-type were set, by default this will send 200 OK status code and content type as text/html. You may call the following functions before this API to configure the response headers : httpd_resp_set_status() - for setting the HTTP status string, httpd_resp_set_type() - for setting the Content Type, httpd_resp_set_hdr() - for appending any additional field value entries in the response header

Posted: **Tue Sep 25, 2018 4:36 pm**

@ chegewara, thanks.

I got so overwhelmed that i just didn't take the time to read more.

ESP32 Forum

api-reference HTTP SERVER help

api-reference HTTP SERVER help

Re: api-reference HTTP SERVER help

Re: api-reference HTTP SERVER help

Re: api-reference HTTP SERVER help

Re: api-reference HTTP SERVER help

Re: api-reference HTTP SERVER help