2016-12-02 6 views
1

Pubnubチャンネルに正常に公開すると、メッセージの履歴と着信メッセージが表示されます。チュートリアル以下、私がメッセージを表示することができるよ次コントローラ(コンポーネント/チャット/ chat.controller.js)角度1 - es6を使用してPubnubからのメッセージ履歴と着信メッセージを取得する方法

/*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:私は問題が$scope.$onであると信じているが、私はPubNub JavascriptのSDKのバージョンこの

答えて

1

があるトラブルシュートにいるかわからない

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

あなたは使っていますか?提供したコードスニペットから、PubNub Javascript SDK v3のAPIを使用しているようです。

init関数の構文が間違っています。あなたはPubNub JS SDK v3のでPubNub AngularJS SDKを使用している場合

、それは次のようになります。

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

あなたはPubNub JS SDK v4のでPubNub AngularJS SDKを使用している場合

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

、あなたはPubNub JavascriptのSDK V4のAPIを使用する方法を更新する必要があります:それはする必要があります https://www.pubnub.com/docs/angularjs/api-reference-sdk-v4

問題が解決した場合はお知らせください。 Martin

関連する問題