In the following example I deliver live data to a web page. It's possible to do this quite easily using node.js and socket.io. However most of the websites I create are delivered through a shared server and the providers won't let me install node.js, so here I provide an alternative.
In this instance I use a combination of HTML, JavaScript and PHP. It would also be possible to use jQuery instead of straight JavaScript and PHP with something like python or indeed any other language. I also use a JSON file which could be replaced by any other data source.
Let's begin with data source tester.json
[
{
"name": "Aragorn",
"race": "Human"
},
{
"name": "Gimli",
"race": "Dwarf"
}
]
Now, the HTML file (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Live data connectivity</title>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Race</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script src="updatetables.js"></script>
<script src="run.js"></script>
</body>
</html>
Basically we need to check if the HTML table has any data inside. if it doesn't we take data from the data source. If the HTML table does contain data, it will be updated with the contents of the data source. To achieve this we'll use a function inside updatetables.js.
function updateTable(jd, id)
{
var tbody = document.getElementById(id).tBodies[0];
for (var i = 0; i < jd.length; i++)
{
if(tbody.rows[i] == null)
{
/* No data in HTML table */
var row = tbody.insertRow(i);
var x = row.insertCell(0);
x.innerHTML = jd[i].name;
x = row.insertCell(1);
x.innerHTML = jd[i].race;
}
else
{
/* Data in HTML table. Needs updating. */
var row = tbody.rows[i];
tbody.rows[i].cells[0].innerHTML = jd[i].name;
tbody.rows[i].cells[1].innerHTML = jd[i].race;
}
}
}
Now that we have a means of updating the table, we need to get the data using stream.php
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$JSON = file_get_contents('tester.json');
echo 'data: '.json_encode($JSON).PHP_EOL.PHP_EOL;
flush();
?>
Finally we can use the JavaScript EventSource object to call stream.php and get our data. Once we have our data, we can pass it to updatetables.js. This is done through run.js
var source = new EventSource('stream.php');
var tableid = 'myTable';
source.onmessage = function(event)
{
var jsonData = JSON.parse(event.data);
jsonData = JSON.parse(jsonData);
updateTable(jsonData, tableid);
};
If you have recreated these files, to test it all works, try changing the values of items in tester.json and see the updates on your page without refresh.
Showing posts with label EventSource. Show all posts
Showing posts with label EventSource. Show all posts
Tuesday, 24 April 2018
Subscribe to:
Posts (Atom)