In early 2014, a phenomenon called Twitch Plays Pokemon took over the Internet. It was a social experiment on Twitch.tv which allowed viewers to play Pokemon Red Version together using Twitch’s chat and it was awesome. We were all on the edge of our seat for several weeks as over 120,000 people around the world played together simultaneously to guide Red on his Pokemon quest. There is even still an active community for the channel despite the initial run of the game being completed.

With the new Twilio Programmable Chat API coming out, I knew I had to work on my own version of this in the browser with a custom chat app and no dependence on streaming software. I’ve had a ton of fun building this and now I’m going to show you how to as well. If you want to skip to just playing Pokemon with a bunch of people, you can check it out here.

Throughout the rest of this post, we will recreate this experience by building “Twilio Plays Pokemon” using the new Programmable Chat API for the in-browser chat and Socket.io to sync a server side gameboy emulator across multiple browser clients. Socket.io has an example of something like this up already called Weplay. We will be using some of their code for the gameboy emulation setup and then implementing the chat ourselves. You can get started with this repository.

Acquiring our starters

Instead of Bulbasaur, Squirtle and Charmander, we will need to set up several dependencies to begin this adventure:

You’ll need to create a free Twilio account in order to run the code for the chat application we are building.

You’ll need to have Node.js and npm installed. I currently have Node v4.0 and npm v2.14.2 on my machine.

You’ll also need to install Redis if you don’t already have it.

node-canvas : Follow these directions for your operating system in order to install.

Run the Redis server now because we will be using it later. You can do this in the background on the default port with the following command: