Delivering Realtime Apps with Pusher

Who Am I?

What Will I Talk About?

What is the Realtime Web?

The real-time web is a set of technologies and practices that enable users to receive information as soon as it is published by its authors, rather than requiring that they or their software check a source periodically for updates.

Source: Wikipedia: Realtime web

What is the Realtime Web?

Why does it matter?

What can you deliver?

Realtime Technologies

Websockets

  1. var ws =
  2. new WebSocket('ws://mywebsocketserver.com:80');
  3. ws.onopen = new() {
  4. // connection established
  5. };
  6. ws.onmessage = function(ev) { // receive a message
  7. ws.send("Yep, got: " + ev.data); // send a message
  8. ws.close();
  9. };
  10. ws.onerror = function(ev) {}
  11. ws.onclose = function(ev) {};

Websocket Support

Websocket Support

We Need More...

What is Pusher?

Connecting to Pusher

  1. var pusher = new Pusher('YOUR_APP_KEY');
  1. $pusher = new Pusher($key, $secret, $app_id);

Channels

Subscribe

  1. var pusher = new Pusher('YOUR_APP_KEY');
  2. var channel = pusher.subscribe('channel-name');
  3. channel.bind('event_name', function(eventData) {
  4. // do stuff
  5. });

Where do I publish events from?

Triggering Events

Publish - Server

  1. require('Pusher.php');
  2. require('config.php');
  3. $pusher = new Pusher($key, $secret, $app_id);
  4. $pusher->trigger('channel-name',
  5. 'event_name',
  6. array('msg' => 'Hello world!') );

Publish - Client

  1. var triggerPusher = new Pusher('a71b8d8b7eef0ef6d98c');
  2. var triggerChannel = triggerPusher.subscribe('example-channel');
  3. function publish() {
  4. if(triggerPusher.connection.state !== 'connected') {
  5. triggerChannel.trigger('client-new_trigger',
  6. {
  7. name: $('#name').val(),
  8. text: $('#text').val()
  9. });
  10. }
  11. }

Live Coding

(Never do a live demo...)

Who Uses Pusher?

Demos

Other clients...

ITV News

ITV News

Gaug.es

Gaug.es

Heroku

Heroku Status

MailChimp

MailChimp

Word2

MailChimp

Word2

MailChimp

Why Pusher?

Try us out

1 / 11

#