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.
    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
    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.