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