How Do I Put This On Real-time? I Already Put (async: True) But It Doesnt Work
Solution 1:
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><metacharset="UTF-8"><title>Server-sent events demo</title><scripttype="text/javascript"src="https://www.gstatic.com/charts/loader.js"></script></head><body><divid="chart_div"></div><button>Close the connection</button><script>// google chart functionfunctionchart(chart_data) {
google.charts.load('current', { packages: ['corechart', 'line'] });
google.charts.setOnLoadCallback(drawBasic);
functiondrawBasic() {
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 buttonvar button = document.querySelector('button');
// the rest is the EventSource, simplez.. var evtSource = newEventSource('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 requestsif ($_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 IEecho"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 streamwhile (true) {
// user disconnected, kill processif (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!
Solution 2:
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 secondsSolution 3:
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).
functionfunctionAjax () {
console.log ('Running');
}
var interval = setInterval (Ajaxfunction, 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
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 =)
 But It Doesnt Work){kind=link}
Post a Comment for "How Do I Put This On Real-time? I Already Put (async: True) But It Doesnt Work"