Real Time Voting, Visualized: Building a Voting System

PubNub was recently preparing for an outdoor pitch-fest in Mountain View and I wanted to make a cool new demo to show people. I came up with the idea of turning all the participating company’s logos (which I had been sent via email) into buttons you could click and thus “vote” for them, in realtime. And when someone else was on the same page, they would see you voting.

My inspiration for this came from the mighty Tim Caswell. I attended this Node.js conference called Node Camp when I was visiting San Francisco for the first time back in late 2010. To me, the highlight of the whole thing was the realtime hex-moving app they had built for the conference.

Simply put, it blew my mind. It was essentially this board game-like arrangement of hexes, with pieces that you could move around. The cool part, though, was that everyone shared the pieces. They had the board up on the giant projector throughout the day, and you could move a piece and everyone would see it.

Since that conference, that idea has guided my thinking about realtime and what it could mean for the world as a whole. Just the whole idea that a game’s pieces magically live “in the cloud” and everyone who happened to be there could interact with them in realtime is an exciting paradigm shift. The project, by the way, is called Hexes and you can find it here.

I dug into the code, and found some interesting techniques. The multi-colored hexes were all one image, divided into sprites so that there’s only one image to load. That also means less overhead – there’s only one set of HTTP headers. I’d never worked with sprites, so it was time to finally learn how to do that.

For moving the game’s assets, it was done with WebKit CSS 3D transforms. This means it works in only WebKit browsers, but that gets you Chrome, Safari, iPhone, iPad, and Android. Honestly, that’s pretty damn good, and would suffice for a 1-day conference demo. I mostly just wanted Chrome and iOS. CSS 3D transforms turned out to be surprisingly sexy. More on that soon.

The transportation layer was done with socket.io and a node.js back end. This aspect was pretty minimal, so swapping it out for PubNub would be trivial.

Sprites

(Not to be confused with Sierra Mists)

I had this image to start. I was able to cut it up with just simple CSS plus a lot of trial an error. That looked something like this:

It was actually pretty fun getting it just perfect. There was a problem though – the different logos varied in heights by a range of about 30 pixels. So when I later put them in grid, they didn’t line up right. I remedied this by moving each one down by half of its height.

became…

WebKit CSS 3D

WebKit CSS 3D works by modifying the webkitTransform css property to a string of the desired transform. It’s actually surprisingly easy. So changing it to something like “translate3d(10, 0, 0) scale(2)” would move it 10 pixels to the right and double it in size. It will do this over the next X seconds, where X is the css property “-webkit-transition-duration”. It ended up being really simple, and the results look really good. This the client-side code that’s run when a vote is registered:

It looks fancy, but it’s not. All I’m doing is simple string manipulation of the cssText property, bumping up the scale from 0.5 to 0.9, then back down to 0.5 a portion of a second later.

Real time Voting via PubNub

(and an extremely basic node.js backend)

The hexes app had a “Commands” JavaScript object, containing all possible commands the server could issue. In my app, the clients are the ones issuing commands, and I prefer “event”-style syntax. Exactly the same idea, though. It only took a few lines of javascript.

As far as the backend goes, I kept it super basic. The server process just keeps track of the votes for each company (in memory, there’s no database) and it updates all listeners of the vote total every ten seconds. That’s pretty much it. Here’s some server code:

The preceding code was not designed to be an advanced architecture, but it’s simple and it works.

Get Started
Sign up for free and use PubNub to power realtime voting