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:

• id
• name (e.g. "Sunset Chat" or "Restaurant at the End of the Universe")
• tag
• password (left empty for now as all rooms are public)

This is the "chat_chair" table:

• id
• position (for example, "2" would be the second chair from the left)
• joined (the date and time someone joined)
• avatar (this is the individual appearance, i.e. the character sprite)
• nick (the chosen avatar nickname, like "Johnny20")
• lastbreath (the last time the avatar showed a sign of life)
• fingerprint (the GUID – a unique random ID – authorizing the avatar to speak)
• bot (if this boolean value is true, the avatar is actually a bot speaking via the PHP)
• asked (the bot can play trivia games, so this will store which question he asked last so he can check if somebody gives the right answer)
• room (the id of the room the avatar is sitting in)
• ip (the IP address of the avatar – rarely, I have to block someone permanently, and that's when this field comes in handy)

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):

• removeDead()
• getFreeChair($room)
• sitChair($nick, $pos, $avatar, $fingerprint, $room)
• doBreath($nick, $fingerprint, $room)
• killNick($nick, $fingerprint, $room)
• removeIdle($nick, $fingerprint, $room)

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('http://www.google.com/search?hl=en&q=' . 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:

• There was a serious bug showing in Internet Explorer only which I couldn't reproduce at first. It turned out whenever the cache was set to its "automated" default value, the XML returned via the Ajax was cached. Of course that's the last thing you want to do, so I introduced a random number into every GET URL that would poll the XML, and I also set a non-caching HTTP header sent out by the PHP5 processing script which returns the XML. That solved this problem.
• I called the bot in the chat room "Googlebot" because you could use the "!google something" command to ask him for a top search result site, which he would tell you via a link (this is a common feature in IRC chat rooms). Google Inc asked me to not name him "Googlebot", so now he's called "Gbot." Google also asked me to remove AdSense from the chat because they don't consider it a normal website (I guess).
• There was a minor amount of flickering graphics depending on the browser and cache settings. To make for smoother speech bubbles animations, some "display caching" tricks are used (e.g. if one speech bubble replaces the last, I don't move it around but only replace its text, because all bubbles look the same anyway).
• The room was so crowded in the beginning it prevented others from joining. Naturally there's a strict limit imposed because only 1 person can sit on the limited number of chairs. To allow for more avatars the number of chairs per room was increased. One chair is permanently reserved for the robot.

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.

Behind the Scenes of the ... by Philipp Lenssen | Comments (2)

>> More posts

Advertisement