AngularJSAngularJS V3 to AngularJS V4 Migration Guide

  • V3 initiates via:
    Pubnub.init({
        publish_key: 'your pub key',
        subscribe_key: 'your sub key'
    });
  • V4 initiates via:
    Pubnub.init({
        publishKey: 'your pub key',
        subscribeKey: 'your sub key'
    });
    
  • V3 initiates via:
    Pubnub.getInstance("another").init({
        publish_key: 'your pub key',
        subscribe_key: 'your sub key'
    });
  • V4 initiates via:
    Pubnub.getInstance("another").init({
        publishKey: 'your pub key',
        subscribeKey: 'your sub key'
    });
Methods of default instance are mapped directly to PubNub service like Pubnub.publish({...})
  • V3 initiates via:
    Pubnub.publish({
        channel: 'myChannel',
        message: 'Hello!',
        callback: function (m) {
            console.log(m);
        },
        error: function (err) {
            console.log(err);
        }
    });
  • V4 initiates via:
    Pubnub.publish(
        {
            channel: 'myChannel',
            message: 'Hello!'
        }, 
        function(status, response){
            console.log(response);
        }
    );
Methods of the other instances are available via the instance getter like Pubnub.getInstance(instanceName).publish()
  • With PubNub Javascript V3, you can trigger 6 different events (callback, connect, reconnect, disconnect, error, presence).

    Pubnub.subscribe({
        channel : $scope.selectedChannel,
        channel_group : $scope.selectedChannelGroup,
        triggerEvents : ['callback', 'presence', 'connect', 'reconnect', 'disconnect', 'error']
    });
  • With Javascript V4, you can trigger 3 different events (message, presence and status)

    Pubnub.subscribe({
        channels  : [$scope.selectedChannel],
        channelGroups: [$scope.selectedChannelGroup],
        withPresence: true,
        triggerEvents: ['message', 'presence', 'status']
    });
  • V3 triggering the events via:
    Pubnub.publish({
    	channel: 'myChannel',
    	message: 'Hello!',
    	callback: function (m) {
    		console.log(m);
    	},
    	error: function(err) {
    		console.log(err);
    	}
    });
  • V4 with the default instance:
    Pubnub.publish({
        channel: 'myChannel',
        message: 'Hello!'
        },
        function(status, response){
            console.log(response);
        }
    );
  • V3 triggering the events via:
    Pubnub.publish({
    	channel: 'myChannel',
    	message: 'Hello!',
    	triggerEvents: ['callback', 'error']
    });
  • V4 with the default instance:
    Pubnub.publish({
    	channel: 'myChannel',
    	message: 'Hello!',
    	triggerEvents: ['callback']
    });
  • V3 accepts a callback as a parameter to announce when messages come in.
     Always set the UUID to uniquely identify the user or device that connects to PubNub. This UUID should be persisted, and should remain unchanged for the lifetime of the user or the device. Not setting the UUID can significantly impact your billing if your account uses the Monthly Active Users (MAUs) based pricing model, and can also lead to unexpected behavior if you have Presence enabled.
    var helloWorldApp = angular.module('helloWorld', ['pubnub.angular.service']);
    
    helloWorldApp.run(['Pubnub', function (Pubnub) {
        Pubnub.init({
            publish_key: 'demo',
            subscribe_key: 'demo'
        })
    }]);
    
    helloWorldApp.controller('HelloCtrl', ['$scope', 'Pubnub', function($scope, Pubnub) {
        $scope.subscribe = function () {
            Pubnub.subscribe({
                channel: 'hello_world',
                triggerEvents: ['message', 'connect']
            })
        }
    }]);
    
    helloWorldApp.controller('WorldCtrl', function($scope, $rootScope, Pubnub) {
        $rootScope.$on(Pubnub.getMessageEventNameFor('hello_world'), function (ngEvent, message, envelope, channelOrGroup, time, channel) {
            console.log(
                "Message Received." + "\n" +
                "Channel or Group: " + JSON.stringify(channelOrGroup) + "\n" +
                "Channel: " + JSON.stringify(channel) + "\n" +
                "Message: " + JSON.stringify(message)  + "\n" +
                "Time: " + time  + "\n" +
                "Raw Envelope: " + JSON.stringify(envelope)
            );
        });
    
        $rootScope.$on(Pubnub.getEventNameFor('subscribe', 'connect'), function () {
            Pubnub.publish({
                channel: 'hello_world',
                message : "Hello from PubNub Docs!",
                triggerEvents: true
            })
        });
    
        $rootScope.$on(Pubnub.getEventNameFor('publish', 'callback'), function (ngEvent, message) {
            console.log(message);
        });
    });
  • V4 switches to the listener pattern for messages, presence and status. Please refer to the listener documentation to get started http://www.pubnub.com/docs/angularjs-javascript/api-reference-publish-and-subscribe#listeners
     Always set the UUID to uniquely identify the user or device that connects to PubNub. This UUID should be persisted, and should remain unchanged for the lifetime of the user or the device. Not setting the UUID can significantly impact your billing if your account uses the Monthly Active Users (MAUs) based pricing model, and can also lead to unexpected behavior if you have Presence enabled.
    var helloWorldApp = angular.module('helloWorld', ['pubnub.angular.service']);
     
    helloWorldApp.run(['Pubnub', function (Pubnub) {
        Pubnub.init({
            publishKey : 'demo',
            subscribeKey : 'demo'
        });
    }]);
     
    helloWorldApp.controller('HelloCtrl', ['$scope', 'Pubnub', function($scope, Pubnub) {
        $scope.subscribe = function () {
            Pubnub.subscribe({
                channel: 'hello_world',
                triggerEvents: ['message']
            })
        }
    }]);
     
    helloWorldApp.controller('WorldCtrl', function($scope, $rootScope, Pubnub) {
        $rootScope.$on(Pubnub.getMessageEventNameFor($scope.selectedChannel), function (ngEvent, envelope) {
            $scope.$apply(function () {
                // add message to the messages list
                $scope.chatMessages.unshift(envelope.message);
            });
        });
     
        $rootScope.$on(Pubnub.getEventNameFor('publish', 'callback'), function (ngEvent, status, response) {
            $scope.$apply(function () {
                if (status.error){
                   $scope.statusSentSuccessfully = false;
                } else {
                   $scope.statusSentSuccessfully = true;
                }
             })
        });
    });
    
  • V3 contains callback as part of the first argument:
    Pubnub.history({ 
        channel: 'hi', 
        callback: function(){}, 
        error: function(){}
    })
  • V4 splits the convention with two params: arguments and callback
    Pubnub.history(
        {
            channel: ['hi']
        },
        function (status, response) {
            // handle status, response
        }
    );
    
  • V3 uses snake_case for argument names.
  • V4 uses camelCase for argument names. Please refer to the documentation for the functions used for the new naming conventions.
  • V3 calls here_now when a subscribe connection is established.
  • V4 does not call hereNow, please call it manually as needed (from status on PNConnectedCategory or from presence on join for the current user).
  • V3 exposes the connect callback on subscribe.
  • V4 exposes the functionality via the listener on status portion of the listener, please listen to PNConnectedCategory on the status category.
  • V4 returns a status object for each transactional request in the callback and in the status portion of the listeners for non-transactional requests.
  • In V4 passing logVerbosity: true during initialization makes the SDK output logging information useful for debugging.