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.
MIT License
648 stars 214 forks source link

Send data to display on the website from ESP32? #132

Closed N9SHazpnhYW closed 3 years ago

N9SHazpnhYW commented 3 years ago

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!!!

N9SHazpnhYW commented 3 years ago

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");
    }