CODEWITHSUNDEEP
httppostarduino
Leia
Leia

Reputation: 21

Receive sensor data, publish on webpage - http.POST(jsonData)

I'm new to programming a php page, so I may ask too much, hope you bear out with me.

My case

I have an Arduino Bee Hive monitoring system that sends live data, temperature and weight.

On my LAN I have a web server on my Synology NAS running php 7.4

I think this code is based websocket, not sure.

On web server no values are seen, if received I don't know.

Code for Arduino sender side is running and also state that "Data sent successfully":

#include <HTTPClient.h>
#include <WiFi.h>
#include <Ethernet.h>

const char* host = "192.168.0.5"; //web server synology NAS
const int port = 9978;  // http port Synology

const char* ssid = "nettUser";
const char* password = "nettPass";
//web login
char username[] = "serverUser";
char userpassword[] = "serverPass";


void loop() {
  // Read sensor values and store in temperature and humidity
  // Read the temperature and weight values
  float temperature = 25.0;    // for php test purpose, fixed values
  float weight = 50.0;

  // Create a JSON object to store the data
  String jsonData = "{\"temperature\":" + String(temperature) + ",\"weight\":" + String(weight) + "}";

  // Create an instance of the HTTPClient class
  HTTPClient http;

  // Make a POST request to the server
  http.begin("http://" + String(host) + ":" + String(port));
  http.addHeader("Content-Type", "application/json");
  http.setAuthorization(username, userpassword);
  int httpCode = http.POST(jsonData);

  // Check the response code
  if (httpCode > 0) {
    Serial.println("Data sent successfully");
  } else {
    Serial.println("Error sending data");
  }

  // Close the connection
  http.end();
 
  Serial.print("[WiFi] IP address: ");
  Serial.println(WiFi.localIP());
  Serial.println(temperature_f);
  Serial.println(humidity_f);

  delay(5000);
  }
}

Arduino output

Server side: Code I found on internet, with some modifications

saved as index.php

<html>
  <head>
    <script>
      function updateData() {
        const xhr = new XMLHttpRequest();
        xhr.open("GET", "http://192.168.0.52:80");
        xhr.onreadystatechange = function() {
          if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
              const data = JSON.parse(xhr.responseText);
              document.getElementById("temperature").innerHTML = data.temperature;
              document.getElementById("weight").innerHTML = data.weight;
            } else {
              console.error(xhr.statusText);
            }
          }
        };
        xhr.send();
      }
      setInterval(updateData, 1000);
    </script>
  </head>
  <body>
    <h1>HiveMon - v 1</h3>
    <h3>Temperature: <span id="temperature"></span>&#8451;</h3>
    <h3>Weight: <span id="weight"></span>%</h3>
  </body>
</html>

Web page

Code above is running now.

I have not tried much, but I tested in web server code to enter web server ip 192.168.0.5 instead of 192.168.0.52 with no help

Upvotes: 2

Views: 654

Answers (1)

kernel
kernel

Reputation: 55

I guess you are trying to get a "live" update of your sensor's data on your web page, right?

If so, I may suggest implementing the following pattern:

enter image description here

From the above, you are only missing the request handler!

This mechanism is straightforward; when Arduino sends a request, it tells the request handler to save the data temporarily into the data handler and any time the web app pulls data, the request handler responds with the data previously submitted by Arduino.

So following is the code that implements this

request_handler.php (Created at your root folder)

<?php
$post_data = file_get_contents("php://input"); //as you send data as raw json

if ($post_data) { //when request comes from arduino, you will have post data
    $json_data = json_encode($post_data);
    if (file_put_contents("data.txt", $json_data)) {
        echo "Ok";
    } else {
        http_response_code(400); //when data did not save
        echo "Bad Request";
    }
} else { //when the web app make a call to the request handler
    $previous_data = file_get_contents("data.txt");
    echo $previous_data;
}

And slightly change your arduino code to :

#include <HTTPClient.h>
#include <WiFi.h>
#include <Ethernet.h>

const char* host = "192.168.0.5"; //web server synology NAS
const int port = 9978;  // http port Synology

const char* ssid = "nettUser";
const char* password = "nettPass";
//web login
char username[] = "serverUser";
char userpassword[] = "serverPass";


void loop() {
  // Read sensor values and store in temperature and humidity
  // Read the temperature and weight values
  float temperature = 25.0;    // for php test purpose, fixed values
  float weight = 50.0;

  // Create a JSON object to store the data
  String jsonData = "{\"temperature\":" + String(temperature) + ",\"weight\":" + String(weight) + "}";

  // Create an instance of the HTTPClient class
  HTTPClient http;

  // Make a POST request to the server
  http.begin("http://" + String(host) + ":" + String(port) + "/request_handler.php");
  http.addHeader("Content-Type", "application/json");
  http.setAuthorization(username, userpassword);
  int httpCode = http.POST(jsonData);

  // Check the response code
  if (httpCode > 0) {
    Serial.println("Data sent successfully");
  } else {
    Serial.println("Error sending data");
  }

  // Close the connection
  http.end();
 
  Serial.print("[WiFi] IP address: ");
  Serial.println(WiFi.localIP());
  Serial.println(temperature_f);
  Serial.println(humidity_f);

  delay(5000);
  }
}

Finally your index.php

<html>
  <head>
    <script>
      function updateData() {
        const xhr = new XMLHttpRequest();
        xhr.open("GET", "http://192.168.0.52:80/request_handler.php");
        xhr.onreadystatechange = function() {
          if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
              const data = JSON.parse(xhr.responseText);
              document.getElementById("temperature").innerHTML = data.temperature;
              document.getElementById("weight").innerHTML = data.weight;
            } else {
              console.error(xhr.statusText);
            }
          }
        };
        xhr.send();
      }
      setInterval(updateData, 1000);
    </script>
  </head>
  <body>
    <h1>HiveMon - v 1</h3>
    <h3>Temperature: <span id="temperature"></span>&#8451;</h3>
    <h3>Weight: <span id="weight"></span>%</h3>
  </body>
</html>

Hope it helps!

Upvotes: 1

Related Questions