View on GitHub

Angular-pusher

This library is an open source angular bridge to the Pusher.

Download this project as a .zip file Download this project as a tar.gz file

Installation

Bower

bower install angular-pusher-bridge

and then

<script src="bower_components/angular-pusher-bridge/angular-pusher.min.js" type="text/javascript"></script>

NPM

npm install angular-pusher-bridge

and then

<script src="node_modules/angular-pusher-bridge/angular-pusher.min.js" type="text/javascript"></script>

Configuration

The service provider provides the following methods:

  • .setApiKey('KEY') - set pusher application key;
  • .option(name, value) or .option({name: value}) - Configuring the pusher's client. Available pusher options;
  • .subscribe(channel) - subscribe to the channel events;
  • .alias(channel, alias) or .alias({channel: alias}) - set alias for channel

These methods are available during configuration through pusherProvider. At run time, the following methods are changing their behavior:

  • .option(name) - return pusher's option value;

Enable debugging

.option('debug', true) - enable logging (via $log) all events (default: false)

Debounce $digest

.option('debounce', int) - enable debounce $rootScope.$digest. Run $digest after 'milliseconds' (default: 50)

Binding to events

This module is designed for integration events received through the pusher, into the system event angular. Events propagate from $rootScope.

$scope.$on('channel:event', function (angularEvent, pusherEventData) {
    $log.debug(pusherEventData);
});

or

$scope.$on('global_event', function (angularEvent, pusherEventData) {
    $log.debug(pusherEventData);
});

If the channel has been set an alias, the name of the event instead of the name of the channel will be used an alias:

pusherProvider.alias('channel', 'alias');
$scope.$on('alias:event', function (angularEvent, pusherEventData) {
    $log.debug(pusherEventData);
});

Examples

angular.module('app', ['angular-pusher'])
    .config(['pusherProvider', function (provider) {
        provider.setApiKey('XXXXX');
        provider.option({
            debug: true,
            cluster: 'eu'
        });
        // subscribe to channel during configuration.
        provider.subscribe('my_channel');
        // subscribe to dynamic generation channel name
        provider.subscribe('private-channel-' + user.id);
        // making dynamic name - static, by specifying an alias
        provider.alias('private-channel-' + user.id, 'personal-events');
    }])
    .controller('ctrl', ['$scope', '$window', 'pusher', 'pusherProvider', function ($scope, $window, pusher, pusherProvider) {
        // subscribe to channel in runtime
        pusherProvider.subscribe('runtime_channel');
        // Bind listeners
        $scope.$on('my_channel:new_message', function (event, data) {
            $window.alert($window.JSON.stringify(data));
        });
        $scope.$on('personal-events:new_message', function (event, data) {
            $window.alert($window.JSON.stringify(data));
        });
        // use original pusher client
        pusher;
    }])

Demo

{{ event.date|date:'HH:mm:ss' }} {{ event.data|json }}

*Server-side script once a minute dispatches an event (if my PaaS instance not down), which appears in the window above.