Skip to main content

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.

Comments

Popular posts from this blog

CARDIAC: The Cardboard Computer

I am just so excited about this. CARDIAC. The Cardboard Computer. How cool is that? This piece of history is amazing and better than that: it is extremely accessible. This fantastic design was built in 1969 by David Hagelbarger at Bell Labs to explain what computers were to those who would otherwise have no exposure to them. Miraculously, the CARDIAC (CARDboard Interactive Aid to Computation) was able to actually function as a slow and rudimentary computer.  One of the most fascinating aspects of this gem is that at the time of its publication the scope it was able to demonstrate was actually useful in explaining what a computer was. Could you imagine trying to explain computers today with anything close to the CARDIAC? It had 100 memory locations and only ten instructions. The memory held signed 3-digit numbers (-999 through 999) and instructions could be encoded such that the first digit was the instruction and the second two digits were the address of memory to operat...

Announcing Feet, a Python Runner

I've been working on a problem that's bugged me for about as long as I've used Python and I want to announce my stab at a solution, finally! I've been working on the problem of "How do i get this little thing I made to my friend so they can try it out?" Python is great. Python is especially a great language to get started in, when you don't know a lot about software development, and probably don't even know a lot about computers in general. Yes, Python has a lot of options for tackling some of these distribution problems for games and apps. Py2EXE was an early option, PyInstaller is very popular now, and PyOxide is an interesting recent entry. These can be great options, but they didn't fit the kind of use case and experience that made sense to me. I'd never really been about to put my finger on it, until earlier this year: Python needs LÖVE . LÖVE, also known as "Love 2D", is a game engine that makes it super easy to build ...

Using a React Context as a Dispatch Replacement

React Contexts are the pretty little bows of the React world. Here's a really quick example of the kind of messy code you can cleanup by using contexts, without dragging in a larger dependency like Redux or even Flux. Starting backwards with a diff showing lines of code I was able to remove: All the properties I was able to remove were just pass-through. The Carousel component didn't care about any of them, but it had to pass through these callbacks so the multiple TaskList components inside the carousel could invoke actions. They were removed from the Component class itself, too, since it no longer needed to pass them through. Where did they all go? My ActionContext removed all the need for these passthroughs by providing a single simple helper method, action(), that components rendered under it can access.   I really enjoy the pattern of passing a single callback through a context and removing what used to be lots of callback properties. Of course, I cou...