Creating a Live Score Board

Tags:

Many a times you may have come across a fancy "Live Score Board", recently (as of writing) you may have seen the "Java Applet"ized score board. If you want to have a similar such app, but don't want to get into Java and applets. You may wonder.

But there is a solution, Asynchronous Javascript HTTP Request calls, you may commonly now it AJAX, or famous as XMLHttpRequest

... and make something like
Score board screenshot

You can find working example here, Live Score Board

For your live Score Board App, you need following .

  • A Score Server, which gives scores in a specific format, ideally XML
  • A Client that requests the Server, and displays the parsed XML

We need a Server or a web Service, that will give us the requested data. We'll use XML to output the response of the server.
We'll structure the XML as follows

<?xml version="1.0"?>
<scores xmlns="http://www.ruturaj.net/tutorials/php">
<match elapsedtime="1.5h" round="semifinal" category="singles" sex="women">
	<player name="Hingis" serving="1">
		<set no="1">6</set>
		<set no="2">3</set>
		<set no="3">4</set>
		<gamepoints>30</gamepoints>
	</player>
	<player name="Sharapova">
		<set no="1">4</set>
		<set no="2">6</set>
		<set no="3">2</set>
		<gamepoints>15</gamepoints>
	</player>
</match>
</scores>

Assume that we have a database, which is fed continuously. Say we access the above data using the URL as.. http://www.ruturaj.net/tennis/score_server.php?round=semifinal&category=singles&sex=women&player=hingis

Here is a test score_server.php script for testing.

<?php

$array_points = array(15, 30 , 40);
$gamepoints1 = array_rand($array_points, 1);
$gamepoints2 = array_rand($array_points, 1);
$xml = '<?xml version="1.0" ?>
<scores xmlns="http://www.ruturaj.net/tutorials/php">
<match elapsedtime="1.5h" round="semifinal" category="singles" sex="women">
	<player name="Hingis" serving="1">
		<set no="1">6</set>
		<set no="2">3</set>
		<set no="3">4</set>
		<gamepoints>'.$array_points[$gamepoints1].'</gamepoints>
	</player>
	<player name="Sharapova">
		<set no="1">4</set>
		<set no="2">6</set>
		<set no="3">2</set>
		<gamepoints>'.$array_points[$gamepoints2].'</gamepoints>
	</player>
</match>
</scores>
';

header("Content-Type: text/xml");
echo ($xml);
?>

AJAXing all over

quite a decent article, I would have loved if there could have been something more to it !