jQuery Pusher Plugin

Using Pusher is really easy but the jQuery Pusher plugin can, in some cases, make adding realtime data to your web pages even easier. It reduces the amount of JavaScript to an absolute minimum and lets you simply create the page markup. This can be especially useful if you don't want to spend time learning JavaScript or if you have already used jQuery plugins to enrich their web applications and would prefer to keep your JavaScript at this level.

Realtime data is added by annotating your HTML with data- attributes.

• data-pusher-channel - the channel to subscribe to
• data-pusher-event - the event to bind to and get the data from
• data-pusher-value - the value to extract from the event data

And by including the jQuery core library and the jQuery Pusher plugin. The jQuery Pusher Plugin script tag can optionally have a data-pusher-app-key attribute removing the need for any JavaScript at all.

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
      <script src="../js/jquery.pusher.js" data-pusher-app-key="c9f5043738b6f7e428fa"></script>

If the data-pusher-app-key attribute is not used the plugin can be used in the more traditional way using a jQuery selector and the pusher function.

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
      <script src="../js/jquery.pusher.js"></script>
      <script>
        $("body div").pusher("c9f5043738b6f7e428fa");
      </script>

Simple Markup

The markup is really simple. Here's what it looks like:

Simple Markup in Action

More data

Adding more realtime data to a web page is really simple. Here's what it looks like:

More data in Action

Comparing Script to Markup

A good way of understanding the saving that the jQuery Pusher plugin can make is by comparing doing something using just JavaScript against using the jQuery Pusher plugin and markup.

The Markup + jQuery Pusher Plugin version below save a reasonable number of lines of JavaScript and the more elements that need to be updated the more time the plugin saves.

Script

Markup + jQuery Pusher Plugin