Google Blogoscoped

Thursday, December 1, 2005

Behind the Scenes of the Blogoscoped Chat

Someone asked how the Blogoscoped chat works, so here are the background details.

Before recreating the chat wheel, so to speak, I invited people to join a special "Blogoscoped" IRC channel. However, not every company firewall allows the necessary ports for that to work. I couldn't even join myself at work to run the chat in the background. My next choice was a web-based (Java) IRC client, which worked but also needed specific ports. So I wanted to do a chat which was solely web-based, without Firewall problems or the need to download and setup any software.

The concept behind the Blogoscoped chat is that I wanted to have a visual, cartoon-style chat along with speech bubbles that was easy to understand and fun to use. If you ever participated in Compuserve's World's Away or today's VZones, you know what I mean. Thanks to Ajax, this was possible. (Before Ajax-approaches, the way to go was e.g. to use a Frameset with one frame constantly refreshing, or using Flash... this isn't half as nice.) This means all communication to the "chat intelligence" on my server is wrapped up in URL-encoded GET requests from the JavaScript, and an XML packet sent back by a PHP5 script. The PHP itself is connected to a MySQL database which stores all chat messages. Once the latest messages from everyone are polled via the XML packet, DHTML will make sure everything is laid out properly (every speech bubble is displayed in the room using transparent GIFs, CSS2 absolute positioning, and so on).

Here's how the chat database tables are laid out. To explain, I've used a visual metaphor throughout the program. There is a chat room (this allows for multiple rooms at once), which has a number of chairs. Every chair is either empty or holds an avatar with a nick. The avatar is "authorized" by its fingerprint which the JavaScript randomly creates in the beginning (this prevents hacking into the Ajax to "speak" for others). Every avatar breathes, that is, he constantly pings the server so I know he's alive – because people may not use a clean exit via a button I offer, but they may just close the browser (or their PC may crash). So there is a specific function which cleans up the dead bodies and carries them out of the room every few seconds.

This is the "chat_room" table then:

This is the "chat_chair" table:

Then there is the "chat_line" table... a "line" is something an avatar said (a single message which will be displayed in the speech bubble). It includes the line itself, the time it was said, and a bunch of other values. Also, a "chat_trivia" table is used to store trivia questions to be asked by the Gbot.

Here are some of the actual PHP function names making use of the metaphor as well. The functions are small chunks representing a single well-defined job each (up to a point this makes the script self-documenting, and easy to read & debug):

By the way, this is the function grabbing the top Google result for any query. It's a dirty non-API based one, but I believe it's actually faster and of course more light-weight (especially because you don't need to include a SOAP library):

function getTopLink($q)
    error_reporting(E_ERROR | E_PARSE);
    $dom = new domdocument;
    $dom->loadHTMLFile('' . urlencode($q) . '&num=1');
    $xpath = new domxpath($dom);
    $s = $xpath->query("//p/a[@href]")->item(0)->getAttribute('href');
    if ( ! ( strpos($s, 'spell=1') === false ) ) {
        $s = $xpath->query("//p/a[@href]")->item(1)->getAttribute('href');
    return ( strpos($s, '/search?') === false ) ? $s : 'No match.';

Troubles along the way...

There were several issues during the creation of the chat:

Creation of the avatars

The black bar at the bottom is a piece of the table over which the sprites are positioned.

All sprites have been drawn using Paint Shop Pro 4. This is a really old software that's still perfect for creation of pixel-based artwork (later versions evolved into something more like a photo retouching software like Corel PhotoPaint or Adobe Photoshop, but it couldn't compete with them and lost its "pixel advantage" along the way). I'm using simple palettes and high contrasts so that it looks "cartoony." This will aid easy recognition, identification, and it's also more fun. (The more realistic a drawn face gets, the less people it can represent.) Some of the faces are variations on the same basic face type. At this moment there are 37 faces, including male and female faces, a bee, and a brain in a vase. Also, there's George W. Bush.


Blog  |  Forum     more >> Archive | Feed | Google's blogs | About


This site unofficially covers Google™ and more with some rights reserved. Join our forum!