How do I put this on Real-Time? I already put (async: True) but it doesnt work

Question

I finally made it working with AJAX but the problem is, it's not real-time whenever I change some data in phpMyAdmin, I need to refresh it on the website.

Here's my code: ajax.js

$(document).ready(function() {
    $.ajax({
        url: "http://localhost/projectZeus/private/data.php",
        method: "GET",
        async: true,
        success: function(data) {
            var energy = [];

            for(var i in data) {
                energy.push(data[i].energyPercent);
            }   

            var chartdata = {
                labels: ["Jan", "Feb", "Mar", "Apr", "May"],
                datasets: [{
                    label: "Harvested",
                    lineTension: 0.3,
                    backgroundColor: "rgba(2,117,216,0.2)",
                    borderColor: "rgba(2,117,216,1)",
                    pointRadius: 6,
                    pointBackgroundColor: "rgba(2,117,216,1)",
                    pointBorderColor: "rgba(255,255,255,0.8)",
                    pointHoverRadius: 8,
                    pointHoverBackgroundColor: "rgba(2,117,216,1)",
                    pointHitRadius: 20,
                    pointBorderWidth: 2,
                    data: energy
                }]
            };

            var ctx = $("#AreaChart");

            var lineChart = new Chart(ctx, {
                type: 'line',
                data: chartdata
            });
        },
        error: function(data) {

        }
    });
});

Here's my code in data.php

<?php
require_once('initialize.php');

header('Content-Type: application/json');
global $db;

$sql = "SELECT energyPercent FROM energy";
$result = mysqli_query($db, $sql);

$data = array();
foreach($result as $row) {
    $data[] = $row;
}
mysqli_free_result($result);

echo json_encode($data);

?>

How can I get it to real-time without refreshing the page? Please help, thanks!

score 6 · Answer 1 · answered Mar 03 '18 at 05:35

Instead of polling, you can use server-sent-events, which does not put as much strain on the server as data is only sent if a new event has happened (like a new row). More can be found out about them here: https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events

Here is an example, as the one in the link is not that good.

The result will look like the following gif:

chart.html

<html>

<head>
    <meta charset="UTF-8">
    <title>Server-sent events demo</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>

    <div id="chart_div"></div>

    <button>Close the connection</button>

    <script>
        // google chart function
        function chart(chart_data) {
            google.charts.load('current', { packages: ['corechart', 'line'] });
            google.charts.setOnLoadCallback(drawBasic);

            function drawBasic() {

                var data = new google.visualization.DataTable();
                data.addColumn('number', 'X');
                data.addColumn('number', 'Dogs');

                data.addRows(chart_data);

                var options = {
                    hAxis: {
                        title: 'Time'
                    },
                    vAxis: {
                        title: 'Popularity'
                    }
                };

                var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

                chart.draw(data, options);
            }
        }

        // stop button
        var button = document.querySelector('button');

        // the rest is the EventSource, simplez.. 
        var evtSource = new EventSource('sse.php', { withCredentials: true });

        evtSource.onopen = function() {
            chart([])
        }

        evtSource.onmessage = function(e) {
            chart(JSON.parse(e.data))
        }

        evtSource.onerror = function() {
            console.log("EventSource failed.");
        }

        button.onclick = function() {
            console.log('Connection closed');
            evtSource.close();
        }

        /**
        * or you could use addEventListener's to listen to specific events, like event: chartdata (or incase you wanted to send multiple events in the same stream)
        */
        //   evtSource.addEventListener("ping", function(e) {
        //      // do somthing with JSON.parse(e.data)
        //   }, false);      

        //   evtSource.addEventListener("message", function(e) {
        //      // do somthing with JSON.parse(e.data)
        //   }, false);
    </script>
</body>

</html>

Then the event loop, note that this is not an infinite loop nor do you need to maintain it, it will get created once a client connects and exit once the client disconnects.

sse.php

<?php
// no normal requests
if ($_SERVER['HTTP_ACCEPT'] !== 'text/event-stream') {
    exit();
}

// make session read-only
session_start();
session_write_close();

// disable default disconnect checks
ignore_user_abort(true);

// set headers for stream
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
header("Access-Control-Allow-Origin: *");

// a new stream or an existing one
$lastEventId = intval(isset($_SERVER["HTTP_LAST_EVENT_ID"]) ? $_SERVER["HTTP_LAST_EVENT_ID"] : 0);

if ($lastEventId === 0) {
    // resume from a previous event
    $lastEventId = intval(isset($_GET["lastEventId"]) ? $_GET["lastEventId"] : 0);
}

echo ":".str_repeat(" ", 2048)."\n"; // Padding for IE
echo "retry: 2000\n";

// query initial data, or select by event id
$data = [
    [0, 0],
    [1, 5],
    [2, 15],
    [3, 45],
    [4, 34],
    [5, 21],
];

// mock we at event 6
$lastEventId = 6;

// start stream
while (true) {

    // user disconnected, kill process
    if (connection_aborted()) {
        exit();
    } else {

    // force an update, normally you would assign ids to your events/data
    $latestEventId = $lastEventId+1;

    //
    if ($lastEventId < $latestEventId) {

        // generate some data, use array_shift() before to limit array leght whilst rolling
        $data[] = [$latestEventId, rand(0, 100)];

        echo "id: " . $latestEventId . "\n";
        echo "event: message\n";
        echo "data: ".json_encode($data)."\n\n";

        $lastEventId = $latestEventId;
    } else {
        echo "event: ping\n";
    }
  }

  // flush buffer
  ob_flush();
  flush();

  // 2 second sleep
  sleep(2);
}

Hope it helps, avoid polling its 2018!

Great! Thanks! I'm still confused though, i'll research on that — Cyril, Mar 03 '18 at 08:53
Heres a simple chat script made with the same idea: https://github.com/lcherone/sse-chat-example — Lawrence Cherone, Mar 13 '18 at 14:19

score 1 · Answer 2 · answered Mar 03 '18 at 04:53

1

What you can do is set a timer, then execute your ajax call every n seconds/minutes, but this is expensive if your data is too large/big. I recommend using web socket, as this will only one time open a bridge connection from your server side to your client side, then it will just cost minimal resources to transfer data between.

ref for php web socket: http://socketo.me/

Or just do the timer thing with your javascript:

setInterval(function() {
   //call your ajax function here
}, 5 * 1000) //1000 millisecond = 1 second, so multiply by 5 for 5 seconds

answered Mar 03 '18 at 04:53

Tenten Ponce

2,436
1
13
40

1

At least you mentioned websockets, also server sent events as there is no need for 2-way data. – Lawrence Cherone Mar 03 '18 at 04:55
Thanks for clarification, maybe I should read more about how it works. hehe. – Tenten Ponce Mar 03 '18 at 04:59

score 0 · Answer 3 · answered Mar 03 '18 at 05:00

there are two ways to do this (there is much more, I know). the first is you create a javascript function that executes this request from time to time, (this will cost processing).

function functionAjax () {
    console.log ('Running');
}
var interval = setInterval (Ajax function, 3000);

the other is you study something that is fashionable, RXJS, a javascript technology, you will need a good time to study. If it is only for study, I recommend FireBase (google technology) in which it provides this database in real time

RxJs documentation

Simple Ajax implementation with RxJS

And always remember to search before posting anything, maybe you find the answer that you are looking for, good study =)

How do I put this on Real-Time? I already put (async: True) but it doesnt work

3 Answers3

Linked