NodeJS Hack Session: MMO Pokemon with NodeJS/WebSockets
- 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
- WebSockets for real-time
- CouchDB for users, *achievements, *friend associations, *cards
NodeJS Packages Used
- Socket.IO for networking (npm install socket.io)
- 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
- disk i/o
For more information on how fast NodeJS is coming along: http://github.com/ry/node/wiki/modules
This is not a full game; as the intent was to accomplish the following goals
- Establish networking code for chat application within the game using WebSockets with fallbacks
- Establish networking code for Arena Queue System within game for competitive matchplay
- Use CSS3 to do all the rounded corners, animations, transparencies, and drop shadows
- 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 firstname.lastname@example.org 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.
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.