How-To: Put live server stats on your website

1. Introduction

Maybe you have noticed the live server stats on our homepage. We've decided to release the script and tutorial how to use this on your website.

2. Requirements

You'll need:

Webserver with PHP (4 or 5) support
Some basic HTML knowledge

3. Download & installation

You can download the script & sample webpage here (ZIP, 36kB). Extract and copy it to your website. You can delete page.html if you want, it's just a sample page.

Important: Make sure that directory cache/ is writable by the webserver. You can do this using your FTP client (search for Properties or Permissions) or you can use the following command:

chmod a+rw cache/

4. Configuration

Open the config.php file in your favourite editor. You will find 4 configuration variables:

$servers
This is list of the servers to display. You have to fill out name, IP address and port for each server. For example, here is the list we are using:

$servers = array (array ('name' => 'Server #1 [TF2 - All maps]',
                         'ip' => '85.17.60.96',
                         'port' => 27025),
                  array ('name' => 'Server #2 [TF2 - All maps]',
                         'ip' => '85.17.60.96',
                         'port' => 27035),
                  array ('name' => 'Server #3 [TF2 - All maps]',
                         'ip' => '85.17.60.102',
                         'port' => 27015),
                  array ('name' => 'Server #4 [TF2 - Dustbowl]',
                         'ip' => '80.193.86.252',
                         'port' => 27015));

$cachelifetime
This sets the time (in seconds) after which the cache file expires. Default value is 30 seconds. Setting it higher will reduce server load but it'll be "less live" and vice-versa. To disable caching set it to 0.

$cachefile
Path to the cache file. You probably won't need to change this one.

$output
This is something like template. For each server, this text will be filled with actual data and sent to browser. You can use the following placeholders:

#name#

Name of the server (can be set in $servers)

#ip# and #port#

IP address and port of the server.
You can use this to create the "Join this server" link by pointing it to:

steam://connect/#ip#:#port#

#map#

Name of the current map.

#players# and #maxplayers#

Number of players / maximum players (slots).

5. Testing

To test the configuration point your browser to the query.php file. You should see a list of servers formatted using your template.

Note: If you have many servers it may take a while. However, if you have caching enabled, refreshing the page will be instant.

6. Putting it on website

Now comes part 2. Firstly you have to put jQuery (JavaScript framework) to your website. You can find it in the zip (jquery.js) or download it from the official site. Then put the following code to your website's <head> section:

<script src="jquery.js" type="text/javascript"></script>

Note: Don't forget to change the src attribute if you have jquery.js in some subdirectory.

Then put the following code anywhere to your website where you want the stats to be located:

<div id="serverstats-loading">Please wait ...<br /></div>
<div id="serverstats-wrapper" style="display: none"></div>

The first <div> will be displayed until server info is loaded. Then the second <div> will be filled with the output of query.php and displayed. All this is done by the following JavaScript code (put it at the end of your website, before </body>):

<script type="text/javascript">
    $(document).ready(function(){
        $.post("query.php", {}, 
            function (data) {
                $('#serverstats-wrapper').html (data);
                $('#serverstats-loading').hide();
                $('#serverstats-wrapper').show ();
            });
    });
</script>

Note: Again, don't forget do change the path to query.php if it's located in some subdirectory.

If you want the same expanding effect as we have on our website, change this line:

                $('#serverstats-wrapper').show ();

                $('#serverstats-wrapper').show ("slow");

7. Conclusion

Now you know how to put live server stats on your website. If you found this How-To useful, please recommend it to others. Also, if you have any problems with getting this work or you have some other questions, feel free to ask in comments.

Comments

Looks like you are using the

16. August 2008 - 9:28 — lacop

Looks like you are using the default config. It works for me.
Make sure that fsockopen function is allowed on your hosting.

Create a file info.php that will looks like this:
<?php
phpinfo ();
?>
Upload it on your website and post link to it here. I'll check out your configuration.