Echtzeitdaten holen mit Laravel5.2, Vue.js und Pusher

Question

Ich habe ein Problem. Ich benutze Pusher für Echtzeit-Benachrichtigung und wenn es läuft, benachrichtigt es mich mit Noty, , aber ich möchte auch, dass es die Nummer der neuen Benachrichtigung in Echtzeit in meiner Ansicht ähnlich wie Facebook.

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

Wie mache ich das?

dies sind meine Codes.

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 Job Controller. Diese Methode wird jede Minute ausgeführt.

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 
     } 


    } 
} 

bitte sagen, was ich falsch mache und wie mache ich es richtig.

Answer 1

this.$http.get() führt eine einzelne GET-Anfrage an den Server aus, der die Verbindung zum Server nicht aufrecht erhält. Wenn Sie Ihrer Website Echtzeitfunktionen hinzufügen möchten, sollten Sie etwas wie socket.io implementieren, das WebSockets implementiert. Sie können auch longpolling auf dem Back-End oder shortpolling auf dem Client für Near-Realtime-Funktionen tun.

Answer 2

Wenn Ihr PHP-Code richtig ist, dann sollten Sie den Teilnehmer in Vue-Code hinzufügen.

ersten gehören Pusher-Skript (es scheint, dass nicht availaible als npm Paket ist)

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

dann in vue, instanziiert Ihre Schieber Beispiel Ihre API_KEY verwenden und suscribe und hören

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

Das sollte funktionieren. Jetzt über deinen PHP-Code. Ich bin mir nicht sicher, ob das trigger Ereignis eine Klassenmethode von Pusher ist, in der Dokumentation habe ich gesehen, dass Trigger als Instanzmethode verwendet wird und Sinn macht, da Sie Ihren API-Schlüssel und andere Authentifizierungswerte übergeben müssen, und das ist erledigt wenn Sie Ihre Instanz erstellen.

require('Pusher.php'); 

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

Also, wenn Sie in Ihrem Server-Code korrekt sind, aber sie tun es auf dem Client definitly falsch, jene Änderungen versuchen und prüfen, ob ist waht Sie