Paper Rock Scissors: Day 2

Yesterday I wrote about the little tech-demo Paper Rock Scissors game I prototyped in the morning. Today, I've replaced its crude AJAX polling with a comet solution, cleaned up the UI, and added a real-time chat for the players, in about two hours this afternoon.
You can try it out with the other readers of the blog right now. Give it a try, if anyone else is around.




Very simple. Nothing flashy. The point was to show off how comet can improve a project that needs it.

The prototype yesterday had a 500ms interval updating the game state, so twice a second it would ask the server if the score changed, if the other player made a move yet, etc. This is a terrible way to make multi-user interactions! The server would quickly get bogged down by all that polling and anything other than Paper Rock Scissors would take a lot more fine-grained polling than 500ms, increasing the load a lot. The solution, in HTTP land, is that we replace several polls per second with a single poll that waits for as long as it can, and only returns a response to the browser when the server wants to send a message. In some techniques, we can even stream multiple such messages in one very long connection. Brilliant? It is actually a very old technique, as far as the web is concerned. One interesting thing is I had used this a lot many years ago, in my Twisted days, where it had been implemented as part of Nevow many years ago. I'm glad to see it finally catching on.

This implementation uses Node.js and the Faye implementation of the Bayeux protocol, an open spec about how multiple machines can pass messages around via comet techniques. Faye doesn't implement all of this, but it implements enough. This is a subscribe-publish system, so what I've done is dropped the interval and instead, whenever either player does something, they publish a message on a per-match channel they both subscribe to. This is also used to carry chat messages. The clients both subscribe to the channel, and publish this tick when something happens, signaling the other player to update from the server. It is still pretty simple, but it works pretty well for being simple. The message handling is as easy as this:

faye_client.subscribe("/prs/matches/" + match_id, function(message) {
  if (message.chat) {
    chat.add_message(message.chat)
  }
  game_update();
});


$(".weapon").click(function() {
  faye_client.publish("/prs/matches/" + match_id, {heartbeat: true});
}

Easy, isn't it? Faye pushes every message published to all the subscribers of the channel for us. The actual game server isn't even involved in this part (but it could be).

Setup of Faye is as easy as fetching Node.js and Faye sources, and building them quickly. Both are new enough that you won't find them in apt or yum, but they are so simple that I can include a tutorial right here.

The original instructions are at the nodejs.org website, but can be summarized easily.

git clone http://github.com/ry/node.git
cd node
./configure
make
sudo make install

Bam. Done. Easy? Move on to installing Faye.

git clone http://github.com/jcoglan/faye.git
cd faye
sudo gem install jake hoe eventmachine
sudo gem install em-http-request rack thin json
jake

Now you've got the node.js module in faye/build/ which you can put anywhere.

sudo mkdir -p /usr/local/nodejs/modules/
cp build/faye-node.js /usr/local/nodejs/modules/faye.js
export NODE_PATH=$NODE_PATH:/usr/local/nodejs/modules/

And now all that is left is to build a Node.js server using Faye, with a simple file faye_server.js


var Faye   = require('faye'),
    server = new Faye.NodeAdapter({mount: '/'});


server.listen(8000);

That was the easiest one yet.

Check out Faye and Node.js for more information.