pusher-client-example.js

  <script src="http://js.pusherapp.com/1.10.1/pusher.min.js" type="text/javascript"></script>
  <script type="text/javascript">
	$(document).ready(function() {
	  	
	    // Enable pusher logging - don't include this in production
	    Pusher.log = function(message) {
	      if (window.console && window.console.log) window.console.log(message);
	    };
	
	    // Flash fallback logging - don't include this in production
	    WEB_SOCKET_DEBUG = true;
	
	    Pusher.channel_auth_endpoint = '/forecaster/authenticate';
	    var pusher = new Pusher('/* SNIP */');
	    pusher.connection.bind('state_change', function(states) {
	      $('div#pusher_status').text("Pusher's current state is " + states.current);
	    });
	    
	    pusher.connection.bind('connected', function(){
  			var channel = pusher.subscribe('private-forecaster');
	  	    channel.bind('pusher:subscription_error', function(status) {
	  	      	alert('error');
	  	    });
                        /* Bind to the subscription event and request initial data once subscribed */
  	  		channel.bind('pusher:subscription_succeeded', function() {
                                /* Prepare to receive the initial data */
  	  		  	channel.bind('initial_forecast', function(data) {
    				  $('div#forecaster_status').text("Real-time stream's current state is initalised.");
                                  /* Do some work */
   		    		}
  	  		  	});
                                /* Make the request to trigger the initial data */
   				$('div#forecaster_status').text("Real-time stream's current state is initialising");
   				$.post('/forecaster/initialise',{'socket_id': pusher.connection.socket_id}); /* Data not returned but rather pushed */
   	  	    });
                        /* Bind to the real-time stream */
  		  	channel.bind('new-data', function(data) {
    				/* Do some more work */
    				
  		  	});
      	});
	});
  </script>