Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Real-time updates from your site with Pusher

Sunday, June 28th, 2015 by Servage

pusherProviding information in real time to users is significant or even crucial to many site operators. The use cases for real time information are many, like instant notifications, chat messages, game updates, or other similar time sensitive pieces of information to be made available for the user.

The traditional way

It is relatively easy to query a server for updates by using AJAX requests. You basically tell the client to make a specific request for new data at a given interval. So for example every 5 seconds you request an update from the server “Are there any notifications?”. As soon as one is returned, the client will render it in the browser, and the user is notified.

This approach requires you to create both the client and server side handling of such updates. You may even need to repeat the process multiple times if you have different types of data you want to query like this. You might have a notification system, and a chat or messaging service, which each require their own update mechanism.

Using Pusher

Pusher is a service for live data. You can use it to accomplish the above examples quickly. Pusher provides the technical infrastructure to handle the notifications, as well as code libraries to quickly integrate it into your client and server side code.

Example

The following is a code example of Pusher integration between a Javascript based client and a PHP based server, which is a typical environment for web sites. Notice how few lines you need to achieve this relatively advanced functionality.

Include the Pusher Javascript library in your site:

<script src="//js.pusher.com/2.2/pusher.min.js"></script>

Open a connection to Pusher by establishing it via the provided Javascript class. You simply create a new Pusher instance and add your application key received from the Pusher admin panel.

var pusher = new Pusher('App Key');

The client can now subscribe to a Pusher channel. That is the pipeline through which you route notifications to the client from your server.

var channel = pusher.subscribe('MySite');

Now you listen to the channel and can add callbacks to be fired in channel events. I.e. react on new notifications etc.

channel.bind('NewInfo', function(data)
{
  alert('Event message: ' + data.message);
});

The client is listening and ready to fire up an alert as soon as “NewInfo” is pushed to it from the server. Let us do that with the code below.

require('Pusher.php');
$pusher = new Pusher($key, $secret, $$appId);
$pusher->trigger('some-channel', 'some-event', array('message' => 'Yeah!!!') );

The PHP code above uses the provided Pusher PHP library and sends a message with the “NewInfo” event through the “MySite” channel. The client should show this by opening an alert box.

Real-time updates from your site with Pusher, 4.3 out of 5 based on 3 ratings
Categories: Guides & Tutorials

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.