Simple Realtime Notifications For HTML5 Apps

We've built a simple JS library that allows you to quickly add realtime notifications into your applications. In this short article, we'll show you how to get started with the libraries, and give an example of what you need to do on your server to make the magic happen.

This tutorial assumes that you have signed up for Pusher already, and have your API keys available.

We will cover the following:

Adding our notification library to your HTML view
Triggering events from your server

Adding realtime notifications to your UI

First we’ll look at how to make your web page ready to receive push notifications, and display a nice Growl-style message to the user.

Download the PusherNotifier.js library

If you have a github account and are happy using git you can fork or clone the project from github (or download a zip instead).

Once you have the code you should make it accessible on your chosen web server. For the purposes of getting up and running we’ll assume that the code is in a directory named realtime-notifications in the root of your app.

Include the JS files in your HTML page

Now we’ve got libraries handy we’ll need to include a number of JavaScript libraries; the Pusher JavaScript library, jQuery, the jQuery Gritter Growl notification plugin and stylesheet and the PusherNotifier which hooks up Pusher to the realtime push Growl notifications:


<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="realtime-notifications/src/lib/gritter/js/jquery.gritter.min.js"></script>
<link href="realtime-notifications/src/lib/gritter/css/jquery.gritter.css"rel="stylesheet" type="text/css" />
<script src="http://js.pusher.com/2.0/pusher.min.js"></script>
<script src="realtime-notifications/src/PusherNotifier.js"></script>

Establishing a connection to Pusher

In order to receive HTML5 Realtime Push notifications you need to establish a persistent WebSocket connection to Pusher from the web browser to receive the events.

The following code establishes a connection with your APP KEY (replace YOUR_APP_KEY), subscribes to the my_notifications channel, and passes this to a PusherNotifier which handles displaying the message.


$(function() {
  var pusher = new Pusher('YOUR_APP_KEY');
  var channel = pusher.subscribe('my_notifications');
  var notifier = new PusherNotifier(channel);
});

Triggering events from your server

Make a new file in your application, or open an existing one. This will be used to send notifications to Pusher.

Include the Pusher library

In the newly created file you’ll need to specify that you are using the Pusher library. This is done in different way depending on your chosen language:


/*
Download the Pusher PHP library and install it somewhere
your script has access to, or use the one included in the examples.
The code below includes the one in the examples:
*/    
require_once('realtime-notifications/examples/php/lib/squeeks-Pusher-PHP/lib/Pusher.php');


# Add 'pusher' as a dependency to your Gemfile e.g.
# gem 'pusher'    
require 'pusher'

Triggering events

Now comes the exciting bit. Define your application credentials, use a Pusher object and trigger an event. Note that we are using the my_notifications channel, and the notification event, as these are what we were using in our view.


$app_key = 'YOUR_APP_KEY';
$app_secret = 'YOUR_APP_SECRET';
$app_id = 'YOUR_APP_ID';

$pusher = new Pusher($app_key, $app_secret, $app_id);
$data = array('message' => 'This is an HTML5 Realtime Push Notification!');
$pusher->trigger('my_notifications', 'notification', $data);


require 'pusher'

Pusher.app_id = 'YOUR_APP_ID'
Pusher.key = 'YOUR_APP_KEY'
Pusher.secret = 'YOUR_APP_SECRET'

data = {'message' => 'This is an HTML5 Realtime Push Notification!'}
Pusher['my_notifications'].trigger('notification', data)

Test it out

Open your html page in one browser window, and hit your script with another. You should see a notification pop up!

If the desired behaviour doesn’t occur, make sure you have followed the steps correctly. You can also compare your code with the sample application, and check out some of our debugging tools if you are still stuck.

Where next?

Once you’ve signed up for Pusher the sky’s the limit! You can:

Update the code to use private channels so that you can control who can subscribe to it and receive notifications
Have a read through the Pusher docs
Take a look at the Pusher Tutorials to find out more information about how to build things with Pusher
Or if you are seeking inspiration you could take a look at the Pusher showcase page.