Pusher: adding realtime bi-directional functionality via WebSockets to web and mobile apps

[Fuente: https://pusher.com/docs]

Understanding Pusher

Pusher is a simple hosted API for quickly, easily and securely adding realtime bi-directional functionality via WebSockets to web and mobile apps, or any other Internet connected device.

We offer a rich suite of libraries that you can use within your applications, including a JavaScript client library for web and HTML5 apps.

Our event based abstraction makes it simple to bind UI interactions to events that are triggered from any client or server.

We use WebSockets (with fallbacks to Flash and HTTP in the JavaScript client library) to future proof your applications and make it easy for you to add bi-directional communication to your apps whilst keeping data usage to a minimum.

As well as a WebSockets API, we have a REST API for publishing your messages. This is ideally suited to web server technologies and we have a set of REST API libraries in many common languages to help you to do this.

Pusher with bi-directional WebSockets and REST API
 

We have a simple Publish/Subscribe model based on channels that allows you to filter and control how people receive your messages.

We supply functionality such as authentication mechanisms for private channels, and presence functionality for keeping track of who’s online.

We give you tools for debugging your applications, and if you get stuck, you can always get in touch with us for a chat.

Getting Started

To get started check out the JavaScript quick start guide, the Client API Overview or the Server API Overview. Alternatively have a look at some of the examples of Pusher in use, or checkout some of the resources we have collected.

Getting started with Pusher is very easy. However, if you have any questions get in touch.

This guide uses the JavaScript client API and a selection of Server API libraries. We also have a guide for our iOS client.

Get your free API keys

Create an account, and make a note of your app_idapp_key and app_secret.

Include the Pusher Client library

Open a connection to Pusher

You first need to establish a connection to Pusher. This is done by using your application key (app_key).

var pusher = new Pusher('YOUR_APP_KEY');

Subscribe to a Channel

Now you should subscribe to your first channel.

Note: more info on choosing channel names is available here.

var channel = pusher.subscribe('my-channel');

Listen for events on your channel

Now you can define callbacks that bind to events on a channel, coming in via the connection to Pusher:

channel.bind('my-event', function(data) {
  alert('An event was triggered with message: ' + data.message);
});

Trigger events from your server

In the examples below we trigger an event named my-event to Pusher on a channel called my-channel. For each example below a server library deals with the server communication. If there isn’t an example in a language that you are familiar with then have a look on our server libraries page to see if anyone has created one in your language.

require('Pusher.php');

$pusher = new Pusher($key, $secret, $app_id);
$pusher->trigger('my-channel', 'my-event', array('message' => 'hello world') );

Where next?

Find out about all the cool stuff you can do with channels, Investigate the JavaScript client library or learn how toexcluding event recipients when publishing events.

Channels

Channels are a fundamental concept in Pusher. Each application has a number of channels, and every client can choose which channels it connects to.

Channels provide:

  • A way of filtering data. For example, in a chat application there may be a channel for people who want to discuss ‘dogs’
  • A way of controlling access to different streams of information. For example, a project management application would want to authorise people to get updates about ‘secret-projectX’

We strongly recommend that channels are used to filter your data and that it is not achieved using events. This is because all events published to a channel are sent to all subscribers, regardless of their event binding.

Channels don’t need to be explicitly created, and are instantiated on client demand. This means that creating a channel is easy. Just tell a client to subscribe to it.

Channel Types

There are 3 types of channels at the moment:

  • Public channels can be subscribed to by anyone who knows their name
  • Private channels should have a private- prefix. They introduce a mechanism which lets your server control access to the data you are broadcasting
  • Presence channels should have a presence- prefix and are an extension of private channels. They let you ‘register’ user information on subscription, and let other members of the channel know who’s online

Channel Naming Conventions

Channel names may contain a maximum of 164 characters. This limit includes channel prefixes (i.e. private-and presence- are included in the character count).

Channel names should only include lower and uppercase letters, numbers and the following punctuation_ - = @ , . ;

As an example this is a valid channel name:

foo-bar_1234@=,.;

Accessing channels

If a channel has been subscribed to already it is possible to access channels by name, through the pusher.channelfunction:

var channel = pusher.channel(channelName);
  • channelName (String)
    • The name of the channel to retrieve

Debugging Pusher

We offer a number of really useful features that can help you during development and whilst trying to get to the bottom of problems with your application.

Viewing application events in the Pusher Debug Console

The Pusher Debug Console can be found within the Pusher dashboard and can be used to help you understand what’s happening within your Pusher application.

It will initially indicate if you can connect or not – if you can connect you might briefly see a connection warning dialog. If you can’t connect the connection warning dialog will stay visible.

Once you have connected you can check that connections are being opened and closed, subscriptions are being made, channels are becoming occupied and vacated and that messages are being received by our API for your application. This feature can be really handy during development or when trying to troubleshoot why certain features in your application might not be working.

Sending test events using the Event Creator

The Event Creator is a really handy tool that lets you trigger an event on any channel with any event data directly from your Pusher app dashboard. This feature means you can write your client code to subscribe to a channel and consume an event without the need to write any server code to start off with. Or it can simply be used for checking that your client application is behaving as expected.

Enable logging in the Pusher JavaScript library

To make Pusher a bit more chatty about what is coming in via the socket connection, you can turn on debugging before you initialise your Pusher object. The most common use of this feature is to output all the logging from the Pusher library to the browser console as follows:

Pusher.log = function(message) {
  if (window.console && window.console.log) {
    window.console.log(message);
  }
};

This should create output like the following in your browser (Chrome in this example): 

Automated Diagnostics

We have a Pusher Diagnostics application that runs a number of tests related to the runtime environment (the browser) and the features offered by the Pusher JavaScript library. If you still can’t get to the bottom of a problem running the diagnostics and then getting in touch with support is a good next step.