Real-Time Gaming Blog

xkcd HTML5 Canvas MMO WebSocket Scaling with PubNub

3 min readStephen Blum on Sep 28, 2012
Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

Subscribe to our newsletter

By submitting this form, you are agreeing to our Terms and Conditions and Privacy Policy.

Hello all hackers from HackerNews.  We noticed a new MMO was released by n01se and xkcd yesterday (September 26th, 2012) with multiple users flying around with a balloon figure.  If you got stuck, you...

Hello all hackers from HackerNews.  We noticed a new MMO was released by n01se and xkcd yesterday (September 26th, 2012) with multiple users flying around with a balloon figure.  If you got stuck, you can click your balloon guy and turn into a ghost to seamlessly move through the landscape unhindered by mortal barriers like trees and hills.

There was a problem however with the scaling of users on the system.  The max concurrency could only be 20 users at a time leaving many wonder where the MMO part of the MMO was.

Click here to join the live MMO game Powered by PubNub.

HTML5 Canvas xkcd MMO WebSockets Powered By PubNub

HTML5 Canvas xkcd MMO WebSockets Powered By PubNub

We saw an opportunity to save the day and scale using PubNub’s real-time cloud based global infrastructure.  This allows the concurrency to scale easily.  Note that in order to do this in a short time frame, we excluded some important security precautions.  However we hope you play nice in this real-time MMO that actually scales.

Game Instructions

  1. Click to Move.
  2. Type to talk.
  3. Press Enter to Clear.
  4. Type “I am YOUR_NAME” and Press Enter.

Note that in order to switch from the non-scaled Node.JS server to PubNub, we had to come up with a solution to replace the server side with a full 100% client side solution. Therefore, we built an RFC 6455 WebSocket Client that works with all users and browsers.  By doing this, you are actually connecting to a PubNub Edge Node nearest your location, creating a fast, low latency connection.  Now you can relax, sit back and play a real MMO courtesy of PubNub.

xkcd HTML5 Canvas MMO WebSocket Scaling with PubNub from PubNub Video on Vimeo.

Credits

  1. Homage to n01se and xkcd, especially 1110.
  2. No server required courtesy of PubNub.
  3. RFC 6455 Support for WebSocket Client Specification Written by Stephen Blum.
  4. Port from original author written by the PubNub Team.
  5. Download/Clone Source Code Repository: GitHub Source Code.

As a follow up to this article, we wanted to note and proclaim our thoughts and feedback on the original source.  Thank you 1110 and n01se for the creativity and JavaScript.  One thing we wanted to change was the animation style you used for network coordinate relays.  The Animation would animate based on Vectors and current X, Y coordinates.  However since the game had little interactivity between players, the better method would be something we at PubNub are well versed in which we call Dead Reckoning with Deterministic Lockstep at a single step buffer. This method prevents jitter and jumping of the avatars on the screen.  If we were to upgrade the animation engine, we would implement this method first.  You can see this style of network tweening on our Home Page of pubnub.com click the tab that says “PubNub In Action”.  Looking forward to seeing you in the game today!

More from PubNub

Can Empathy Exist in the Metaverse
News May 16, 20221 min read

Can Empathy Exist in the Metaverse

A roundtable discussion led by PubNub’s COO, Casey Clegg, exploring the topics of what it means to be human in a virtual world.

PubNub Staff

PubNub Staff

How to Advance Telehealth and Virtual Care Technologies
News May 2, 20221 min read

How to Advance Telehealth and Virtual Care Technologies

Dr. Joe Kvedar, Chair of the Board for the American Telemedicine Association, joins our COO, Casey Clegg, to discuss why...

PubNub Staff

PubNub Staff

Another Step Towards Data Security: ISO-27001 Implementation
BuildMay 2, 20221 min read

Another Step Towards Data Security: ISO-27001 Implementation

Today, we are glad to announce that we are currently in the process of implementing ISO-27001 security standards.

PubNub Staff

PubNub Staff