tonyp7 / esp32-wifi-manager

Captive Portal for ESP32 that can connect to a saved wireless network or start an access point where you can connect to existing wifis.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Send data to display on the website from ESP32?

N9SHazpnhYW opened this issue · comments

Hi. I've started to use your awesome WIFI manager in a little project im working on. I got pretty far along with it, but am a bit confused on how I can send data from the ESP32 to display on the website. For example, sending temperature sensor data to the website.

I'm able to create a new req->uri statement which links to my new call, /getdata/

else if(strcmp(req->uri, "/getdata/") == 0){

        ESP_LOGI(TAG, "get_Data()!");  //just log that we are running the get_Data() function in terminal
        uint8_t databuf[128];
        get_Data(databuf);  //gets the sensor data, stores it in databuf[128]
        
         //Print out the sensor data in the ESP32 terminal
        ESP_LOGI(TAG, "\r\n-----Sensor Data-----\r\n%s\r\n-----End Sensor Data -----", databuf);

        //create http response
        httpd_resp_set_status(req, http_200_hdr);
        httpd_resp_set_type(req, http_content_type_txt);
        httpd_resp_set_hdr(req, http_cache_control_hdr, http_cache_control_no_cache);
        httpd_resp_set_hdr(req, http_pragma_hdr, http_pragma_no_cache);
        
        //send the sensor data to the website???
        httpd_resp_send(req, (char*)databuf, strlen((char*)databuf));  

I am able to successfully see the http response come through in my web browser's console...but I dont see any of the data that I sent.
Am I sending the data correctly? If so, maybe I need to extract the data from the result differently? This is how I am doing it on the javascript side:

async function get_Data() {
    console.log("Getting Sensor Data");

    try {
        let res = await fetch("getdata/");
        console.log(res);  //this prints a big http response in javascript console, but cant find any data from the databuf variable
        console.log(JSON.stringify(res));  //this prints a blank array {} in javascript console
    } catch (e) {
        console.info("error getting key");
    }
}

My end goal is to be able to unpack the data in the javascript variable "res", which contains my ESP32 sensor data...and display it on the website...most likely using a <div id=""> to set the data in javascript.

Thanks in advance!!!

i figured it out! posting in here for the future in case anyone else has the same question:

        //send the message buffer to http
        httpd_resp_set_hdr(req, "Custom-Header-1", "Message");
        httpd_resp_send(req, (char*)msgbuf, msglength);
        
        /* 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");
        }
    try {
        let res = await fetch("data/");
        res.body.getReader().read().then(function(value) {
            console.log("Display data in id txtData in html");
            console.log(value.value);
            document.getElementById("txtData").innerHTML = value.value; //set the element id in html to data
        });
    } catch (e) {
        console.info("error getting message");
    }