15/12/2017
Live events
Today:

Tomorrow:

Basket
Leagues in Basket
0

Price (total)
€0

(0 €/m)

League table

Introduction

Learn how to integrate our XML feeds with this step-by-step tutorial. In this tutorial, we implement a simple league table. It works for Linux and you can make it work for Windows with various changes. The result will be a live-updated league table, but you can show many other things (see the XML Reference) using this method. It is asumed that you have some knowledge of javascript. If you did not buy any football leagues, you can still try the demo with our example XML files. Please be adviced that we do not provide support and that this tutorial is meant to get you started rather than be a fully fledged production ready solution.

Frontend with simple JSON backend

In this tutorial, we will keep the backend really, really simple. In fact, our backend will simply convert the XML files to JSON. The frontend will do all the work, fetching the JSON files regularly via AJAX. The fetched sports data will be shown in a HTML page.

This solution is not optimal in terms of performance, but it makes minimal asumptions about your server environment and it uses only basic web technologies (HTML and Javascript).

Verify that your server can download XML files

In your order confirmation email, there are 5 links. As described in How it works, you need to setup a regular automatic download of those 5 XML files to your own server.

In this tutorial, we will use wget to download the XML files. Wget is available on most systems and has decent performance. Let us start by downloading one of the files manually once, just to check that wget is installed and is able to download. Enter the command below (you must change "7384" to whatever it says in your order confirmation email) in a terminal (i.e. login to your server via SSH). Remember to run this command from your server since the XML file is restricted to the IP address you entered when you placed your order.

wget -o ~/ http://xml.livescoreshop.com/7384/standing.xml && less ~/standing.xml

If you are unfamiliar with the command line, do not despair, it is not as complicated as it looks. The double ampersand (&&) separates commands. First "wget" is executed. If it does not fail, the "less" command is executed. In other words, first we download the Standing XML. If the file was successfully downloaded, we view it to make sure it contains XML.

Downloading does not work?

Your XML files should be available about 15 minutes after you bought them and the command above should download the Standing XML file to your home directory on the server. However, it is possible that you may not be able to download the XML files.

A possible reason is that you did not enter your server's IP address correctly when you placed your order. To verify that you entered the correct IP address, find the IP address of your server. When you have found your IP address, login and go to My Profile. Enter the IP address, and try downloading again.

The download may also fail if there is a problem with your server setup. If the wget command above does not work, it may be easier for you to write a custom download script in the language you are the most familar with. In PHP, you can use file_get_contents to download a file, for instance. Then you may be able to figure out what is wrong by looking at your servers error log.

Yet another reason could be that there are currently simply no matches being played in any of the leagues you bought. Check when your leagues start and end. If the leagues are not in season, you may want to test your script with our example XML data. Download the example files and upload them to your server. If you test your solution using our example XML data, it is important that you test your solution again later when there are live matches in case the Premier League example data has more coverage than the leagues you bought.

Converting the XML feed to JSON

Now that we have tried downloading an XML file and can see it contains data (or at the very least have example XML files to test with), we will implement a script that converts an XML file to JSON. JSON files are very easy to work with in Javascript, and that is what we will use to show our league table. The following PHP script loads a single XML file (that was previously fetched by wget) and saves it as a JSON file. Note that the script is so simple that it should be easy to implement in another language.

/tutorial/feed/xml_to_json.php
<?php // Get the filenames of the XML file and JSON file from the command line arguments $xml_filename = $argv[0]; $json_filename = $argv[1]; // Load the XML file and parse it into an array $xml = simplexml_load_file($xml_filename); // Convert the XML file into JSON format $json = json_encode($xml); // Save the JSON file somewhere on our server file_put_contents($json_filename, $json);

Error handling has been omitted to keep the code simple.

Setting up an automatic update

Now we know how to download XML files and convert them to JSON. Let us automate this by setting up an update process that automatically downloads the Standing XML and converts it to JSON.

Note that you have to download the files into a directory where your web server can access them. This is also known as the web servers public directory. Below, we will asume that your website is stored in /var/www/sport.com/ , and that you will want to put the JSON files in the "tutorial/feed" subdirectory, meaning that the Standing file will be available as JSON via the URL /tutorial/feed/standing.json.

With Linux, you can setup a cronjob. If you are not familar with Cron, please refer to a Cron tutorial. Let us say you wish to update once a minute. Edit the crontab, as described in the Cron tutorial. Adding the following line will download the standing.xml file and run the xml_to_json.php script once a minute:

* * * * * wget -o /var/www/sport.com/feed/ http://xml.livescoreshop.com/7384/standing.xml && /var/www/sport.com/tutorial/feed/xml_to_json.php /var/www/sport.com/tutorial/feed/standing.xml /var/www/sport.com/tutorial/feed/standing.json

This should start updating the Standing XML. You can verify if it works by opening the JSON file directly in your browser (/tutorial/feed/standing.json). When you know there is a match, you can press F5 to verify that the file changes when goals are scored, etc.

But wait, how dare we call it livescore if it only updates once a minute? Surely that is not live. It turns out that Cron can normally only run a script once a minute, but fortunately that is easy to solve. Let us run our script every 15 seconds by calling our PHP script 4 times with a 15 second delay between each call.

* * * * * sleep 0 && wget -o /var/www/sport.com/feed/ http://xml.livescoreshop.com/7384/standing.xml && /var/www/sport.com/tutorial/feed/xml_to_json.php /var/www/sport.com/tutorial/feed/standing.xml /var/www/sport.com/tutorial/feed/standing.json * * * * * sleep 15 && wget -o /var/www/sport.com/feed/ http://xml.livescoreshop.com/7384/standing.xml && /var/www/sport.com/tutorial/feed/xml_to_json.php /var/www/sport.com/tutorial/feed/standing.xml /var/www/sport.com/tutorial/feed/standing.json * * * * * sleep 30 && wget -o /var/www/sport.com/feed/ http://xml.livescoreshop.com/7384/standing.xml && /var/www/sport.com/tutorial/feed/xml_to_json.php /var/www/sport.com/tutorial/feed/standing.xml /var/www/sport.com/tutorial/feed/standing.json * * * * * sleep 45 && wget -o /var/www/sport.com/feed/ http://xml.livescoreshop.com/7384/standing.xml && /var/www/sport.com/tutorial/feed/xml_to_json.php /var/www/sport.com/tutorial/feed/standing.xml /var/www/sport.com/tutorial/feed/standing.json

Now that is more live. If you wanted it to update every 10 seconds, merely run it 6 times with a delay of 10 between each call.

Update frequency

By now, you may be wondering how often we update data. Only the Live XML file is updated live, the other XML files are updated every 15 minutes. This means that updating a league table every 15 seconds is overkill, but it does show how you can fetch the Live XML file very frequently.

The update frequency of the Live XML depends on the league. Big leagues such as the Premier League is covered by more than one updater so it is updated quickly with minimal delays. Depending on the league, you can typically expect delays of approximately 5-15 seconds and up to approximately 30 seconds. The delay depends on various things, but we are confident you will be satisfied with the update frequency of major leagues.

We do not offer a demo feed, but if you want to measure our performance, consider buying access for one month to one of the smaller leagues that still have live coverage and measure the delay from when you see it on TV to when it appears in your file (taking any delays from Cron etc into account). Minor leagues may have a longer delay, depending on things such as how many matches are played simultaneously throughout the world.

The frontend view

Now that we have the standings available as JSON, let us try showing a league table. First, we write the HTML. Notice that we are including jQuery (hard to avoid jQuery these days, huh?). After that we include our own javascript file (frontend_standing.js) that we are going to write in the next section.

/tutorial/frontend_example.html
<!DOCTYPE HTML> <html> <head> <title>Standing tutorial</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="/tutorial/frontend_standing.js"></script> <link rel="stylesheet" type="text/css" href="/tutorial/frontend_example.css" /> </head> <body> <h1>Standing</h1> <div id="league_table"></div> </body> </html>

That is all the HTML we need to show a standing. The HTML of the league table will be inserted into "league_table" by the javascript in the next section.

The javascript controller

The real meat of our frontend solution is a javascript file, we will name it frontend_standing.js. The javascript will fetch standing.json (generated by our PHP backend script) regularly via AJAX and update the document with the data found in that file.

/tutorial/frontend_standing.js
// we save the last JSON data as a global variable, // so we can inspect it using Firebug's javascript console. var last = false; // wait until the DOM is ready $(function() { // you may have to change this line var json_url = "/tutorial/feed/"; // how often we update the standing var seconds_between_updates = 60 * 1000; // calls load_json after one minute function schedule_ajax_request() { setTimeout(load_json, seconds_between_updates); } // call update_standing with the data in /tutorial/feed/standing.json function load_json() { $.getJSON(json_url + "standing.json") .done(update_standing) .fail(ajax_failed); } // update the standing function update_standing(json) { // remember the last JSON last = json; // refer to the Standing XML reference documentation. // not all browsers support "forEach". var html = ""; html += "<table>"; html += "<tr><th>Rank</th><th>Team</th><th>Points</th></tr>"; json.standing[0].participant.forEach(function(participant) { var attributes = participant["@attributes"]; html += "<tr>"; html += "<td>" + attributes.rank + "</td>"; html += "<td>" + attributes.participantname + "</td>"; html += "<td>" + attributes.points + "</td>"; html += "</tr>"; }); html += "</table>"; // put the generated HTML into our HTML view $("#league_table").html(html); // schedule a new AJAX request schedule_ajax_request(); } // called if an AJAX request failed function ajax_failed() { alert("The AJAX request failed. Try using Firebug to see why it failed."); } // initialize AJAX var options = {cache: false}; $.ajaxSetup(options); // start updating load_json(); });

Inspecting sports data

Notice the comments in the first lines of the javascript. It says that the last data fetched from standing.json is stored in the global variable last. This means that you can inspect the data via your browsers javascript console. Open the demo. Right click the page and select Inspect element (if you do not see it, upgrade to Firefox or Chrome). Click the Console tab. Now type "last" and press Enter.

Screenshot: Inspect element

As you can see, last is an object that has two properties. The first is named "@attributes". These are the attributes of the outermost XML element. If you look at the Standing XML, you can see that the outermost XML element is named "spocosy". The other property is named "standing", and it is an array of the "standing" XML elements found in the Standing XML. Notice that you can expand the little treeview-icons in the javascript console.

Screenshot: Manchester United

Given this knowledge, try typing the following in the javascript console:

alert(last["standing"][0]["participant"][0]["@attributes"]["participantname"]);

If you are with us so far, you will soon feel confident reading the XML files and know how to access the data via javascript.

The stylesheet

Let us write a simple stylesheet, just to make our standing look a wee bit prettier. Of course, in your own app, maybe you would like your standing to be more fancy, maybe using responsive design, perhaps coloring odd and even rows differently, etc.

body { margin: 0px; padding: 0px; background: white; } h1 { padding-top: 0px; margin-top: 0px; border-bottom: dashed 1px; } table { border: solid 1px #333333; border-radius: 5px; background: #44C1EF; padding: 20px; } th, td { text-align: left; padding-right: 10px; }

Demo

Time to see everything in action. The data shown is our example XML data, so you should see an old Premier League standing. On your own server, you should see a similar standing for one of the leagues you bought.

DEMO


Our coverage

When you start using our data, you may notice that some leagues have more data than others. A league such as the Premier League has all data, but we do not currently provide a list of topscorers for the Azerbaijani Premier Division, for instance. To see exactly what we cover for your leagues, go to the XML Sports Data page. Move your mouse over the icon of a league of interest. A popup wil open, showing exactly what we cover.

Improving the backend

The demo works, but it is not as efficient as it could be. If you have many visitors, you can do better. For instance, the file standing.json contains various data that we fetch via HTTP but we do not actually show it. The standing.json file used in the demo also contains standing data for a spanish league, though we only show a standing for the Premier League. Clearly it is inefficient to load data that we are not making use of.

To improve performance, you should implement another backend. In this tutorial, we wrote an extremely simple backend that simply converts the XML files to JSON. There are various other ways to write a backend. Below we briefly look at two other options, though there are many other ways you could process and use our data.

MVC pattern (backend)
In many web based systems, you pick a development framework and the HTML is generated by your custom solution. For instance, if you are using PHP, you could pick a nice framework such as Symfony. Using the MVC pattern, you would then write controllers, models, views, etc. The trick to improve performance, then, is to parse the XML files and only send the data you need to the client. To improve performance, you could cache standings in Memcached, etc.

MVC pattern (frontend)
If you are a frontender by heart, you could write custom javascript or use a framework such as Backbone. You might then want to write custom JSON services (perhaps using Node JS) that sends only the data you need. For instance, you could write a "standing" JSON service which takes the ID of a league as parameter and sends only the JSON data you need.

About

About us
Terms
Privacy FAQ
Basket

Select feeds
Checkout
Integrate

How it works
Documentation XML examples Tutorial

Copyright © 2017 LiveScoreShop.
All Rights Reserved.   Terms & Conditions