Thursday, September 16, 2010

NodeJS Hack Session: MMO Pokemon with NodeJS/WebSockets

The primary focus of this proof of concept is to determine how easy it is to build real-time web applications for all iPad, iPhone, droids, Safari, Chrome users on top of NodeJS (non-blocking event driven server side Javascript platform). The proof of concept was built within 6-8 hours including the following:

  • Uses Express framework for server side Javascript development (inspired by Rails / Sinatra / Django)
    • Uses EJS for templating language (much like Django templates and symfony) -- allows partials and passing parameters into partials like symfony PHP
  • Real-time chat using WebSockets
  • Arena Queueing System for real-time competitive matchplay using WebSockets
  • HTML5 Audio
  • CSS3 transitions for all hand cards, tappable cards, transparent panels, rounded corners, drop shadows
  • Fallbacks for Firefox, IE
    • Firefox/IE will fall back to Flash socket
    • IE will fall back to XHR long poll if the user doesn't have Flash installed
  • NoSQL CouchDB for fetching users and soon cards, achievements, friend associations

Technologies Used

  • NodeJS (Server side Javascript platform)
  • WebSockets for real-time
  • CouchDB for users, *achievements, *friend associations, *cards

NodeJS Packages Used

  • Socket.IO for networking (npm install
  • Express for MVC application development (npm install express)
  • CouchDB (npm install couchdb)

Lessons Learned and Thoughts

I didn't use nginx as a web server to front NodeJS because nginx can't proxy the WebSockets traffic just yet. Using Apache is pointless because that would defeat the purpose of using a non-blocking, non-threaded technology stack.

HTML5 Audio inconsistencies

Chrome can't play mp3s or wavs, only ogg audio files.
Safari can't play ogg files, but can play wav or mp3 files
Firefox can't play mp3 files, but can play ogg and wav files

Use an HTML 5 audio library for abstraction

+ Quick turnaround for implementing both backend (using couchdb/mongodb/async mysql) and websockets) and frontend functionality (using express mvc framework)
+ Easy and fast install, compile node, and it'll work
+ Simple and convenient package manager like gem for Ruby/Rails called "npm" (Node Package Manager)

- Must remember to use asynchronous programming (callbacks, callbacks, callbacks, do not block) when doing 

  • database access
  • networking
  • disk i/o

For more information on how fast NodeJS is coming along:

This is not a full game; as the intent was to accomplish the following goals

  1. Establish networking code for chat application within the game using WebSockets with fallbacks
  2. Establish networking code for Arena Queue System within game for competitive matchplay
  3. Use CSS3 to do all the rounded corners, animations, transparencies, and drop shadows
  4. Use HTML5 audio for hilarious interface sounds

Hopefully, this proof of concept will inspire other developers who want to shape the open Web into a more engaging experience (easy to build real-time web applications) on top of a broad subset of consumer technologies (iPad, iPhone, Droids, PC, Mac, etc).

If you're in the Vancouver area, shoot me an email at and I can give you a demo. Yes, it does look very sexy on the iPad with beautiful CSS3 animations.  :) Again, I'd like to reiterate this: my goal isn't to earn any money off this but to inspire others to join this initiative to create better web experiences for users across all technologies. Below are the source to the Pokemon card game on NodeJS with real-time chat, as well as, the real-time arena queue system for competitive match play.

github nodejs pokemon source (contact me if you can't set this up or if you have problems)

github nodejs arena queue system source

Good luck and have fun,
Jaime Bueza

Jaime Bueza is a software developer in Vancouver, British Columbia, Canada. He has developed web applications for Nintendo, Electronic Arts, Ritchie Brothers, Kiwi Collections, and Cox Communications. When he's not developing useful software that constantly evolves with business requirements, he's creating tutorial videos for aspiring front-end developers.