How To Build A Real-Time Commenting System - Practical JavaScript Techniques - page 110

< script >
var APP_KEY = ' <?php echo ( APP_KEY ); ?> ' ;
& lt ; / script & gt ;

REAL-TIME JAVASCRIPT

The first thing you need to do when adding Pusher to a Web application is include the Pusher
JavaScript library and connect to Pusher. To connect you'll need to use the key which you
grabbed from the Pusher dashboard. Below you can see all that is required to hook up the
front-end application to Pusher.

Include the Pusher JavaScript library after the app.js include:

< script src =" http://code.jquery.com/jquery-1.7.1.min.js "></ script >
< script src =" http://js.pusher.com/1.11/pusher.min.js "></ script >
< script src =" js/app.js "></ script >

Add the Pusher functionality to app.js :

var pusher = new Pusher ( APP_KEY );
var channel = pusher . subscribe ( 'comments-' + $ ( '#comment_post_ID' ). val ());
channel . bind ( 'new_comment' , displayComment );

This probably looks too easy to be true, so here are the details about what the above code
does:

•

varpusher=newPusher(APP_KEY);

Creates a new instance of a Pusher object and in doing so connects you to Pusher.
The application to use is defined by the APP_KEY value that you pass in and that we set
up earlier.

•

varchannel=pusher.subscribe('comments-'+$('#comment_post_ID').val());

Channels provide a great way of organizing streams of real-time data. Here we

20

are subscribing to comments for the current blog post, uniquely identified by the value of
the comment_post_ID hidden form input element.