CODEWITHSUNDEEP
phpjqueryajaxlive
Miguel Stevens
Miguel Stevens

Reputation: 9220

Live score table best practice

I'm going to make a live scoring table which shows scores from a database obviously i'm going to do it with jquery ajax but i'm wondering what is a good practice on doing this.

Option 1: Build table in my javascript

Is it a good idea to return an array, or object with all the scores and use javascript or jquery to build the table: Meaning that i loop over the result and create a tr or td where needed.

Option 2: Return table

Or should i build the table in php, and spit out the whole contents on the webpage. I think the only problem here is that you have no real control over the content, if I maybe would like to animate a row getting deleted.

I'm kindoff stuck on this. Ideally I would love to make it that if a score changes, The row get's animated to a fade out and the new score comes in place.

So that's why I'm asking some insights and opinions on how to achieve this.

Thanks!

Upvotes: 2

Views: 1667

Answers (1)

rr-
rr-

Reputation: 14851

I think it's best for AJAX to read just a JSON, and nothing else. That way, you can make it a part of the REST API. Then have your script render the table using DOM operations. This is what modern frameworks such as Angular and Backbone do anyway.

Now, about the ways you could accomplish the data retrieval.

Cron-based approach

In a scenario like this what I usually do is to create a script that is responsible only for updating the data. For example:

<?php
$data = ...
file_put_contents(__DIR__ . '/data/scores.json', json_encode($data));

Then I add this script to cron, so that it gets executed in interval I desire.

* * * * * php myscript.php

Finally, the JS script retrieves just the /data/scores.json file, without touching server-side code at all.

In your case you want to run the script very often (every 5 seconds). Cron is capable of running tasks every minute at most, however, you can use some workarounds to get it execute the script more often.

Now let us discuss some disadvantages of such approach.

  1. First, there's issue of spawning new processes so often. Usually, it's expensive to spawn a new process, so initializing a whole PHP interpreter every few seconds doesn't sound like a good idea to me.
  2. Second, there's issue of I/O operations performance. Since we use HDD as the cache, the script is going to be only as fast as HDD keeps up with keeping it in sync.

That leads us onto another approach, which was already discussed in the comments...

Runtime approach

You can have your AJAX query scores.php that does following:

<?php
if (isCacheValid())
{
    $data = readCache();
}
else
{
    $data = ...
    saveCache($data);
}
echo json_encode($data);

The advantage of such approach is that:

  1. You do not spawn PHP interpreter every few seconds, since it's contained in Apache's / nginx / fastcgi's memory, processing your scripts on the fly.
  2. The script is as fast as the caching method you choose. Since HDD is slow, memcached is actually a good idea, since it stores information in RAM, which is blazing fast.

SQL performance concerns

Querying your database every few seconds is a perfectly normal state for database to be in and you shouldn't worry about it... unless you query tables contain multiple thousands/millions of rows.

Final notes

Don't optimize early. Measure and then figure whether the solution is satisfactory, or it needs working on.

Upvotes: 2

Related Questions