リアルタイムlaravel5.2、vue.js、プッシャーでデータを取得する

Question

問題があります。 私はリアルタイム通知のプッシャーを使用しています。実行するとnotyを使用して私に通知します。 しかし、私はリアルタイムで新しい通知の番号をFacebookに似たように表示します。

<span class="label label-warning" v-show="new_count">@{{ new_count }}<!-- get the new notifications --></span> 

どうすればよいですか？

これは私のコードです。

nav.js

new Vue({ 
    el: '#nav', 
    data: { 
     new_count: 0 
    }, 

    methods: { 
     getNewCount: function() { 
      this.$http.get('cron', function(new_count){ 
       console.log(new_count); 
       this.new_count = new_count; 
      }.bind(this)); 
     } 
    } 
}); 

cronジョブコントローラ。この方法は毎分実行されます。

class CronJobController extends Controller 
{ 

    public function getIndex() 
    { 
     $old_fail_notification = FailNotification::where('seen', 0)->count(); 
     $subjects_with_fail = Grade::where('grade', 'F')->groupBy('subject_id')->orderBy('subject_id', 'ASC')->get(); 
     return response()->json(['new_count' => 2]); //send this to navbar 
     foreach ($subjects_with_fail as $subject) { 
      $subject_to_check = Grade::where('grade', 'F')->where('subject_id', $subject->subject_id)->where('reviewed', '0')->get(); //add if grade is IC or D 

      if (count($subject_to_check) >= 3) { 
       $failed = new FailNotification(); 
       $failed->message = '[subject-'.$subject->subject_id.'] can now be opened.'; 
       $failed->save(); 

       foreach ($subject_to_check as $subject) { 
        $subject = Grade::find($subject->id); 
        $subject->reviewed = 1; 
        $subject->save(); 
       } 
      } 
     } 
     $fail_notification = FailNotification::all()->count(); 
     //UPDATE NOTIFICATION COUNT HERE REAL TIME USING AJAX 
     if ($fail_notification > $old_fail_notification) { 
      $new_notification_count = $fail_notification - $old_fail_notification; 

      Pusher::trigger('test-channel', 'test-event', [ 
       'name' => 'You have a new', 
       'message' => 'Notification' 
       ]); 

      Pusher::trigger('navbar-channel', 'navbar-event', [ 
       'new_notif_count' => $new_notification_count, 
       ]); 

      return response()->json(['new_count' => $new_notification_count]); //send this to navbar 
     } 


    } 
} 

私が間違ってやっていると私はそれが正しいどのように行うのか何を教えてください。

Answer 1

サーバーへの接続を維持しないサーバーへの単一のGET要求を行います。 Webサイトにリアルタイム機能を追加する場合は、WebSocketを実装するsocket.ioのようなものを実装する必要があります。バックエンドではlongpolling、リアルタイムに近い機能についてはクライアントでshortpollingを実行することもできます。

Answer 2

あなたのPHPコードが正しい場合は、サブスクライバをVueコードに追加する必要があります。

は最初のプッシャーのスクリプトが含まれVUEで、

<script src="//js.pusher.com/3.0/pusher.min.js"></script> 

その後、（それはNPMパッケージとしてavailaibleではないようだ）、あなたのAPI_KEYを使用して、プッシャーインスタンスをインスタンス化し、suscribeと聞く

ready() { 
    const pusher = new Pusher('APP_KEY') 

    // susbcribe to your channel 
    const channel = pusher.subscribe('test-channel') 

    // listen to the event defined on that channel 
    channel.bind('test-event', data => { 
    console.log(data.message) 
    }) 
} 

これでうまくいくはずです。今あなたのPHPコードについて。私はtriggerイベントがプッシャーのクラスメソッドであるとは確信していません。私は、トリガーがインスタンスメソッドとして使用されていることを知っていて、apiキーと他の認証値を渡す必要があるので、あなたのインスタンスを作成するとき。あなたが必要なWAHTであれば、あなたのサーバコードで正しいのであれば

require('Pusher.php'); 

$pusher = new Pusher("APP_KEY", "APP_SECRET", "APP_ID"); 
$pusher->trigger('test_channel', 'test-event', array('message' => 'hello world')); 

は、チェックが、あなたは間違いなく、クライアント上で、それは間違っている、それらの変更を試してみて、確認し