News

Real-time Apps Made Simple with PubNub’s AngularJS SDK 3.2

3 min read PubNub Staff on Jun 30, 2016
Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

Subscribe to our newsletter

By submitting this form, you are agreeing to our Terms and Conditions and Privacy Policy.

We are excited to announce a newly improved AngularJS SDK that offers developers a better experience for building real-time apps. This update adds two abstraction layers that integ...

We are excited to announce a newly improved AngularJS SDK that offers developers a better experience for building real-time apps. This update adds two abstraction layers that integrate seamlessly with the JavaScript framework: $pubnubChannel and $pubnubChannelGroup. Don’t worry, if you’re new to AngularJS, we have many tutorials to help get you started.

The $pubnubChannel Object

The $pubnubChannel object seamlessly binds a PubNub channel to a scope variable that gets updated with real-time data and allows you to interact with the channel through dedicated methods.

Getting Started

First init Pubnub with your publish and subscribe keys:

Pubnub.init({
    publish_key: 'your pub key',
    subscribe_key: 'your sub key'
});

Inject the $pubnubChannel service in a controller:

 .controller('ScoresCtrl', function($scope, $pubnubChannel) {...
});

Bind the $pubnubChannel object to a scope variable providing a channel name and some optional parameters:

.controller('ScoresCtrl', function($scope, $pubnubChannel) {
    $scope.scores = $pubnubChannel('game-scores-channel', {
        autoload: 50
    })
});

Instantiating the $pubnubChannel is the only step needed to have a scope variable that reflects the real-time data from a channel. It subscribes to the channel for you, loads initial data if needed and receives new real-time data automatically.
Display the $scope.scores variable in your view and you will see the data being loaded and updated when new data is received in that channel:

<body ng-app="app" ng-controller="ScoresCtrl">
    <ul class="collection">
        <li ng-repeat="score in scores">{{score.player}}
            <li>
    </ul>
</body>

If you want to publish a score in real time just call the $publish method against the $scope.scores variable:

.controller('ScoresCtrl', function($scope, $pubnubChannel) {
    $scope.scores = $pubnubChannel('game-scores-channel', {
        autoload: 20
    })
    $scope.scores.$publish({
            player: 'John',
            result: 32
        }) // Publish a message in the game-scores-channel channel.
});

AngularJS Live Demo

Below is a chat demo using the $pubnubChannel object:


AngularJS + PubNub Live demo with Pubnub Channel
See the Pen angular by Martin Lagrange (@supertinou) on CodePen.
21833

More information about the $pubnubChannel is available in the documentation.

The $pubnubChannelGroup Object

The $pubnubChannelGroup object provides an easy-to-use interface for channel groups. It stores the incoming messages in containers split by the channel and exposes an interface to directly fetch messages by channel.

Getting Started

Suppose that we have a channel group named conversations-channel-group that is aggregating multiple channels : conversation-175, conversation-176, conversation-177, conversation-178, etc… and we want to receive the messages from this channel group, store the messages received from the channels individually and publish messages in these channels.

First initialize PubNub with your publish and subscribe keys:

Pubnub.init({
    publish_key: 'your pub key',
    subscribe_key: 'your sub key'
});

Inject the $pubnubChannelGroup service in a controller:

.controller('ChatCtrl', function($scope, $pubnubChannelGroup) {...
});

Instantiate a $pubnubChannelGroup object and assign it to a scope variable providing a channel group name and some optional parameters.

.controller('ChatCtrl', function($scope, $pubnubChannelGroup) {
    $scope.Conversations = $pubnubChannelGroup('conversations-channel-group')
    // Fetch a $pubnubChannel from the Conversations $pubnubChannelGroup object
    $scope.currentConversation = $scope.Conversations.$channel('conversation-178')
    // $scope.currentConversation is a $pubnubChannel, you can use any method available for a $pubnubChannel
    // You can load messages
    $scope.currentConversation.$load(20)
});

The messages are now automatically received in the $scope.Conversations and you can fetch the messages from a particular channel by calling $scope.Conversations.$channel('conversation-178')

More information about the $pubnubChannelGroup is available in the documentation.

More from PubNub

Top Trends to Engage Your App Users
InsightsSep 27, 20224 min read

Top Trends to Engage Your App Users

Take a look at the top trends that are the most effective in attracting customers and reducing churn, and how you can incorporate...

PubNub Staff

PubNub Staff

Comparing Game Engines: Unity vs Unreal vs the Rest
Real-Time Gaming BlogSep 21, 20225 min read

Comparing Game Engines: Unity vs Unreal vs the Rest

Comparing the major game engines: Unity vs Unreal Engine vs Corona SDK vs GameMaker Studio, including the benefits and cons of...

PubNub Staff

PubNub Staff

Python Socket Programming: Client, Server and Peer Libraries
BuildSep 21, 20226 min read

Python Socket Programming: Client, Server and Peer Libraries

Sockets (aka socket programming) enable programs to send and receive data, bi-directionally, at any given moment. This tutorial...

PubNub Staff

PubNub Staff