Sending sensor value from ESP32 to website using JSON POST issue

hello everyone, so what im trying to do here is sending data to a hosted dashboard website using JSON POST, the ESP32 is done sending the data (because http code is showing 200 which mean the data is successfully sended) but the issue is the website didn't receive the data properly, below are part of my ESP32 code and php code i can provide

..........................................................
//esp32
  //HTTP server (websocket)
  if (useWebsocket) {
    server.on("/flow", handleFlowData);
    server.begin();
  }
} 

void loop() {
  if (useWebsocket) {
    server.handleClient();
  }

  flowRate = random(1,70) / 10.0;
  totalWater += flowRate / 60.0 * 2.0;

  sendToDashboard();
  delay(2000);
}

void sendToDashboard() {
  if (WiFi.status() != WL_CONNECTED) {
    Serial.println("Wifi Disconnected");
    return;
  }

  DynamicJsonDocument doc(128);
  doc["flow"] = flowRate;
  doc["total"] = totalWater;
  String jsonPayLoad;
  serializeJson(doc, jsonPayLoad);

  if (!useWebsocket) {
    HTTPClient http;
    http.begin(serverUrl);
    http.addHeader("Content-type", "application/json");
    Serial.println("Sending: " + jsonPayLoad);

    int httpCode = http.POST(jsonPayLoad);
    if (httpCode > 0) {
      Serial.printf("HTTP Sent: %d\n", httpCode);
    } else {
      Serial.printf("HTTP Error: %d\n", http.errorToString(httpCode).c_str());
    }
    http.end();
  }
  else {
    Serial.println("Websocket Data: " + jsonPayLoad);
  }
}

void handleFlowData(){
  DynamicJsonDocument doc(128);
  doc["flow"] = flowRate;
  doc["total"] = totalWater;
  String jsonPayLoad;
  serializeJson(doc, jsonPayLoad);

  server.send(200, "application/json", jsonPayLoad);
  
}



//api php code for the website
<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json");

$data = json_decode(file_get_contents('php://input'), true);

if (!isset($data['flow']) || !isset($data['total'])) {
    http_response_code(400);
    die(json_encode(["error" => "Invalid data"]));
}

file_put_contents('sensor_data.json', json_encode($data));

echo json_encode(["status" => "success"]);
?>

"$data = json_decode(file_get_contents('php://input'), true); "is this part of my php code wrong? or do i miss something?

sry i dont know much about php but you can use postman to verify something like in postman in post api you can test your api .if it works and if you are receiving the data which means you need to look for the php part. in post man use post method < ESP32IP >/flow .if you receive the data in json there you can freely check the php code

Note : Make sure ESP32 and your PC are in same network

1 Like

I have some doubts now .Where are you sending the data . Are you trying to send data from ESP32 to website . Also where is the website hosted in ESP32 or external

1 Like

yes... i also considering this method after several failure

the website hosted in free domain (infinityfree). and yes, im trying to send data from ESP32 to the website.

If you have to send data from esp32 to your hosted website its kind of tricky one .Since esp32 is local hosted it is only accessible in your local network or you port forward it if you have static ip from your service provider. I 'll suggest if you can host API or websocket or any other medium you can make esp32 as client and can connect to the website and feed their data but as ESP32 as server is kind trouble one .

Can you tell me what you are trying to accomplish may be i can give you some alternative ideas

1 Like

I really appreciate you for answering very quickly, I actually manage to find the main problem after asking several colleague. turn out the issue is because of hosting security problem, infinityfree only support javascript based communication, Which explain why my esp cant reach out the website. Solved the problem after change the hosting to render platform.

Again thank you so much for considering to help my problem.

If relevant to you, there’s an effortless way to build an ESP32 device dashboard using the open source Mongoose Library and their Mongoose Wizard. They provide a step-by-step tutorial along with a short demo video:
https://mongoose.ws/articles/esp32-device-dashboard/

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.