Making Websockets Sexy!

ogn-slice2.jpg

Last week I had the pleasure of talking at Oxford Geek Nights, a superb meetup organised by the folks at Torchbox. The meetup is spear-headed by the legendary J-P; it’s the optimal balance between geeky tech, a dash of creativity, a great bunch of locals and of course a bar.

Introduction

If you’re reading this then you’re probably aware of the useful but dry uses of Websocket technology. But what about the sexier end of the spectrum, what’s turning heads out there?

Last week I had the pleasure of talking at Oxford Geek Nights, a superb meetup organised by the folks at Torchbox. The meetup is spear-headed by the legendary J-P; it’s the optimal balance between geeky tech, a dash of creativity, a great bunch of locals and of course a bar.

Engaging a crowd

My plan was to detect beats in a music track and push colours to my audience’s phones in time to the music. I really didn’t want to re-invent the wheel here, so I decided to use Processing’s Minim library for the hard work.

With Minim you can detect beats (peaks in energy) like so:

1import ddf.minim.*;
2import ddf.minim.analysis.*;
3
4void setup()
5{
6   ...
7   // Load song from MP3 file
8   song = minim.loadFile(< file path >);
9   song.play();
10
11   beat = new BeatDetect();
12   beat.setSensitivity(1000);
13   ...
14}

Yes it’s really that simple. The beat detection is rudimentary but it hit the spot nicely for my demo.

(Note that I set the sensitivity for the beat detection to 1000ms. This means that maximum frequency of a new beat being detected is once a second. We don’t want to bombard our audience with crazy-fast colour changes!)

Each time a beat was detected I triggered an event to Pusher:

1void draw()
2{
3   ...
4   beat.detect(song.mix);
5
6   if ( beat.isOnset() )
7   { 
8       pushNewColour();
9   }
10   ...
11}
12
13void pushNewColour()
14{
15   JSONObject col = new JSONObject();
16   col.setString("colour", colours[pushnumber % 5]);
17   Pusher.triggerPush("rave-1", "colour-change", col.toString());
18   pushnumber++;
19}

You’ll notice that I’m keeping a count of the number of colour pushes so that I can pick a new colour each time from an array.

That was my ‘server’ done, so let’s move on to the client. In this case my client is a mobile-optimised web page that the audience visit on their smarphone. Pusher makes this really easy!

1$(function () {
2    initPusher();
3});
4
5function initPusher()
6{
7    // Connect to Pusher
8    var pusher = new Pusher(PUSHER_CONFIG.APP_KEY);
9
10    // Subscribe to colours channel
11    var chColours = pusher.subscribe('rave-1');
12
13    // Bind to colour change event
14    chColours.bind('colour-change', function(data)
15    {
16        changeColour(data.colour);
17    });
18}
19
20function changeColour(colour)
21{
22    $('body').css('background-color', colour);
23}

Rich has completed his set…

That really is it. An incredibly simple demo to demonstrate the sexy side of Websockets.

If you’re wondering, the live coding demo went pretty well – except the WiFi in the room couldn’t cope with 100s of geeks trying to connect. Lesson learned!

Thanks again to all those at Oxford Geek Night for chance to spread Pusher goodness.

Awesome done properly

That was nice hack, but can these things be done at commercially and at scale? The answer is yes, as proven by one of our awesome customers Makelight Interactive. These guys use Pusher to create incredible live experiences at gigs, by pushing colours to phones. Think Olypmics opening ceremony, but with phones as pixels. This video does their work more justice than I possibly can:

Makelight do incredible work and they’re the guys to turn to for a flawless experience.