Experimenting with Pusher

I have been wanting to play with Pusher's Pub/Sub Messaging API for a while, and FullStack 2016 presented me with the perfect opportunity.

Sadly, I wasn’t able to make the conference, but I saw the team at Pusher tweet about a button they hooked up to the internet:

The idea is simple:

  1. They press the button
  2. They broadcast 2 events: when the button is pressed & when the button is released
  3. You can subscribe to these events and run some code

Creating a ‘SHAME’ bell

At Rareloop we are big Game of Thrones nerds. So I thought I would pay tribute to it by making the button shame the person that pressed it. The gif below obviously doesn’t have sound, but it’s the same audio used on shamenun.com.

When the button is pressed, it shakes and chimes the bell while the nun shouts ‘SHAME’ at you. And when you release the button, it stops. That button on the right is a ‘virtual button’, which lets you test your code before hooking it up to the real thing.

Pusher Shame buttons

The js for this was surprisingly small, mainly down to how simple Pusher’s API is ?. You can check it out in full on jsbin.

var pusher = new Pusher('df00b73b40dd21cc7eef');
var button = pusher.subscribe('button-101');
var output = document.getElementById('output');

var shame = new Audio('http://shamenun.com/shame_sfx.mp3');

// button press:
button.bind('press', function(data) {
      shame.play();
      output.classList.add('shake');
});

// button release:
button.bind('release', function(data) {
    shame.pause();
    shame.currentTime = 0;
    output.classList.remove('shake');
});


// pusher connection:
pusher.connection.bind('connected', function(){
    output.innerText = '?';
});

I actually had this running in the background for about an hour, hooked up to the real button. The button got pressed a lot. We got shamed a lot.

Game time

On the way to lunch, we were talking about different things we could make the button do. One of the ideas was to hook it up to a game. The first that came to mind (baring in mind there’s only 1 input) was a simple ‘run and jump’ game.

Buuuuut, I didn’t have enough time left in my lunch break to write a whole game just for this. So I “borrowed” Google’s offline T-rex runner!

Pusher controlled T-rex game

Somebody has extracted the game code and put it on github (legend!). So I dropped the source code into a jsbin and started hacking. I had to tweak some of the game code to get it to behave, but the client side of things was super simple… When the button is pressed, trigger a ‘spacebar’ keypress – which is how you jump.

var pusher = new Pusher('df00b73b40dd21cc7eef');
var button = pusher.subscribe('button-108');

button.bind('press', function(data) {
    var runner = Runner();
    var e = $.Event('keydown');
    e.keyCode = 32;

    runner.handleEvent(e);
});

Summary

It was great getting a chance to play with Pusher, and I was surprised at how simple their API was. Wish I could have been at the conference, but it was nice getting involved still. Would have been great to see some of the other creations too! Next time, eh?