SlideShare a Scribd company logo
1 of 5
Xkcd HTML5
Canvas MMO
WebSocket
Scaling with
PubNub
by Stephen Blum
Hello all hackers. We notice 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.
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
1. Type to Talk
1. Press Enter to Clear
1. 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.
Watch the video on the right to see xkcd
HTML5 Canvas MMO WebSocket Scaling with
PubNub in action.
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 Related Content

Recently uploaded

Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
UK Journal
 

Recently uploaded (20)

PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
Your enemies use GenAI too - staying ahead of fraud with Neo4j
Your enemies use GenAI too - staying ahead of fraud with Neo4jYour enemies use GenAI too - staying ahead of fraud with Neo4j
Your enemies use GenAI too - staying ahead of fraud with Neo4j
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 

Featured

How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 

Featured (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

Xkcd HTML5 Canvas MMO WebSocket Scaling With PubNub

  • 1. Xkcd HTML5 Canvas MMO WebSocket Scaling with PubNub by Stephen Blum
  • 2. Hello all hackers. We notice 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.
  • 3. 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 1. Type to Talk 1. Press Enter to Clear 1. Type “I am YOUR_NAME” and Press Enter
  • 4. 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. Watch the video on the right to see xkcd HTML5 Canvas MMO WebSocket Scaling with PubNub in action.
  • 5. 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!