如何使用 Angular 1 - es6 从 Pubnub 获取消息历史记录和传入消息答案

【问题标题】：How to get message history and incoming messages from Pubnub using angular 1 - es6如何使用 Angular 1 - es6 从 Pubnub 获取消息历史记录和传入消息
【发布时间】：2016-12-02 17:59:19
【问题描述】：

当我成功发布到我的 Pubnub 频道时，我想查看消息历史记录以及传入消息。按照教程，我创建了以下控制器（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;

我可以看到消息发布成功，但在我订阅的频道中看不到消息。

组件/聊天/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>

我认为问题出在$scope.$on，但我不知道该怎么解决这个问题

【问题讨论】：

标签： angularjs ecmascript-6 pubnub

【解决方案1】：

您使用的是哪个版本的 PubNub Javascript SDK？从您提供的代码 sn-p 来看，您使用的是 PubNub Javascript SDK v3 的 API。

init 函数的语法看起来不对。

如果您将 PubNub AngularJS SDK 与 PubNub JS SDK v3 一起使用，则应该是：

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

如果您将 PubNub AngularJS SDK 与 PubNub JS SDK v4 一起使用，则应该是：

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

并且您应该更新方法以使用 PubNub Javascript SDK v4 的 API： https://www.pubnub.com/docs/angularjs/api-reference-sdk-v4

如果它解决了您的问题，请告诉我。马丁

【讨论】：