angular_pusher.html

  <script src="bower_components/pusher-websocket-iso/dist/web/pusher.js"></script>
  <script src="bower_components/pusher-angular/lib/pusher-angular.min.js"></script>

<script>
// in app.js
 angular.module("YourApp",['pusher-angular'])

// in pusherService.js

(function () {
  'use strict';

  angular
    .module('YourApp')
    .service('PusherService', PusherService);

  PusherService.$inject = ['$pusher', 'Toaster', 'ENV', 'CacheFactory', '$timeout', '$rootScope'];

  function PusherService ($pusher, Toaster, ENV, CacheFactory, $timeout,$rootScope) {
    var self = {
      init: init,
      privateChannelOn: null,
      feed: [],
    };


    var pusher, privateChannel, channelName;

    watchEvents ();

    return self;

    // this constructor below helps our objects stay consistent

    function pusherItem (item) {
      return {
        data: item['data'],
        action: item['action'],
        message: item['message'],
        seen: false
      };
    }

    function init () {
         var user = CacheFactory.get('cUser').get('user');

         if (user) {

           if(user.uber_authenicated && !self.privateChannelOn) {
            // new Pusher will authenticate and ensure you are connected to a private connection.
            var client = new Pusher(ENV['pusher'], {
             // ENV is a constant that you should create for your apps environment variables
              authEndpoint: ENV['api'] + '/pusher/auth',
              auth: {
                // these headers below are App specific, we use JWT and HMAC to verify the api. 
              headers: {
                'JWT_TOKEN':  user.jwt,
                'X-User-Email': user.email
               }
              }
            });

            // this creates a pusher instance that we can reuse
            pusher = $pusher(client);
            
            // this creates the channel
            channelName = 'private-'+ user.id;
            
            // then we will subscribe to the channel

            privateChannel = pusher.subscribe(channelName);

            self.privateChannelOn = true;
              
            // in the bind notification, this is where we receive the message from our server

            privateChannel.bind('notification', function(res) {

              switch (res.action) {
                case 'uber_notification':
                self.feed = self.feed.concat([new pusherItem(res)]);

                 var ids = res.data.places.join(',');
                 // this is using the Toast service in Angular Material
                  Toaster.send("<a href=places?" + ids +">Here are some places nearby</a> ") 
                }
              });
            return
          }
        }

    }

    // watchEvents, makes sure to close the channel when you log out
    function watchEvents () {
      $rootScope.$on('logout',function (){
        self.privateChannelOn = false;
        if (pusher) pusher.unsubscribe(channelName);
      });
    }

  }
})();

  angular
    .module('YourApp').run(['$timeout, PusherService', function () {
      // the timeout makes sure you PusherService runs on the digest cycle after bootstrapping,
      // this ensures your app is completely initialised before opening a websockets connection. 
      $timeout(function (){
        PusherService.init();
      });
   } ])
</script>