How to get message history and incoming messages from Pubnub using angular 1 - es6

Question

When I successfully publish to my Pubnub channel I want to see the message history as well as the incoming messages. following the tutorial, I've created the following controller (component/chat/chat.controller.js)

/*jshint esnext: true */
'use strict';

  class ChatController {
    constructor($scope, $rootScope, Pubnub) {
        this.cardTitle = "chat window";
        $scope.messages = [];
        $scope.channel = 'Channel-jlinog5q8';

        $scope.messageContent = '';

        Pubnub.init({
            "publishKey": publishKey,
            "subscribeKey": subscribeKey,
        });

        // Subscribe to messages channel
        Pubnub.subscribe({
            channel: $scope.channel,
            triggerEvents: ['callback'],
        });
        // $scope.messageEvents = Pubnub.getMessageEventNameFor($scope.channel)

        Pubnub.history({
            channel:$scope.channel,
            callback: function(payload){
                console.log(payload);
                $scope.messages.unshift(payload.message);
            }
        })


        // Send the messages over PubNub Network
        $scope.sendMessage = function() {
            $scope.uuid = $rootScope.userInfo.first_name +' '+$rootScope.userInfo.last_name;

           // Don't send an empty message 
           if (!$scope.messageContent ||
                $scope.messageContent === '') {
                return;
            }
            Pubnub.publish({
                channel: $scope.channel,
                message: {
                    content: $scope.messageContent,
                    sender_uuid: $scope.uuid,
                    date: new Date()
                },
                callback: function(m) {
                    debugger
                },
                error: function (error) {
                    debugger
                    console.log('Error:', error);
                }
            });
            // Reset the messageContent input
            $scope.messageContent = '';

        }

        // Listenning to messages sent.
        $scope.$on(Pubnub.getMessageEventNameFor($scope.channel), function (ngEvent, envelope) {
            $scope.$apply(function () {
                debugger
                // add message to the messages list
                $scope.messages.unshift(envelope.message);
            });
        });


    }

  activate($rootScope, PubNub, $scope) {
    }
}

ChatController.$inject = ['$scope', '$rootScope', 'Pubnub'];

export default ChatController;

I'm able to see the messages publish successfully but I cannot see the messages in the channel in which i'm subscribed.

component/chat/chat.html:

    <ul class="collection">
     <li ng-repeat="message in messages">
       <!-- <img src="{{avatarUrl(message.sender_uuid)}}" alt="{{message.sender_uuid}}"> -->
       <span class="title">{{ message.sender_uuid }}</span>
       <p>{{ message.date | date:"MM/dd/yyyy 'at' h:mma"}}</br> {{ message.content }}</p>
     </li>
  </ul> 

i believe that the issue is with $scope.$on but I don't know what to trouble shoot this

Answer 1

Which version of the PubNub Javascript SDK are you using ? From the code snippet you provided, it looks like you are using the API of the PubNub Javascript SDK v3.

The syntax of the init function looks wrong.

If you are using the PubNub AngularJS SDK with the PubNub JS SDK v3, it should be :

Pubnub.init({
            publish_key: publishKey,
            subscribe_key: subscribeKey
        });

If you are using the PubNub AngularJS SDK with the PubNub JS SDK v4, it should be :

Pubnub.init({
            publishKey: publishKey,
            subscribeKey: subscribeKey
        });

and you should update the methods to use the API of the PubNub Javascript SDK v4: https://www.pubnub.com/docs/angularjs/api-reference-sdk-v4

Let me know if it fixes your issue. Martin