Skip to main content

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

NodeJS:
+ 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: http://github.com/ry/node/wiki/modules

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 jbueza@gmail.com 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.
Post a Comment

Popular posts from this blog

TextMate Tutorial: How to add a Strikethrough keybind to your Markdown bundle

Markdown is awesome for quickly generating Readme's on Github. After looking at other projects using the strike tag, I've decided to create a custom keybind for it in my TextMate Markdown bundle. Here's how:

1) Click the + sign on the bottom left and click New Command.
2) Paste this into the editbox and make sure you name your command "Strikethrough".

For the input field, select WORD in the drop down.
For the output field, select "insert as snippet".
As for the keybind, you can totally map it to whatever you're comfortable with but I chose Command-D as it is the same thing in Microsoft Word.

Cheers,
Jaime

World of Warcraft Ninjalist addon: version 0.1 coming along quite nicely

After toying around with more GUI related issues in World of Warcraft's API, I've decided to take a totally different direction. Originally when I architected this addon, I knew in my mind it would be a super simple Console application that a user could easily paste in a name and add it to the database; however, why stop there?

After discovering AceGUI, I can easily start developing UI components in no time! As of right now, I've got it saving data in between game sessions--the interesting part will come when I'll have to develop the web service that will parse the SavedVariable.lua, eliminate duplicate entries, as well as, do a huge merge between their copy and whats on the server's (per realm basis of course).

Here's a screen shot of the responses when adding new Ninjas to your list:
When a user clicks add after entering a name in the textbox, it'll go ahead and add that person to the ninjalist tagging the user's realm and current date/time. Someday, I…

Using Git Hooks: Prepare Commit Message to automatically prepend branch names on commit messages

When you're practicing branch by feature with distributed version control, typically you'll get assigned a ticket or issue and that ends up being your feature branch. Instead of always typing in the branch name in every commit, you can edit your Git hooks (specifically prepare-commit-msg).

Assuming that this is a brand new git repository:

mv .git/hooks/prepare-commit-msg.sample .git/hooks/prepare-commit-msg
vi .git/hooks/prepare-commit-msg

Edit the file by commenting out what was originally in the file and then add this:



Now, whenever you make a commit, it should show up like this in the log:



Since GitHub and Bitbucket both support Emojis inside commit messages, you can do something cute like this



Want more emojis? check out the Emoji Mardown Cheatsheet!