В реальном времени Получение данных с 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)); 
     } 
    } 
}); 

Крон контроллер Работа. этот метод запускается каждую минуту.

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

this.$http.get() выполняет один запрос GET на сервер, который не поддерживает соединение с сервером. Если вы хотите добавить функции реального времени на свой сайт, вы должны реализовать что-то вроде socket.io, которое реализует WebSockets. Вы также можете сделать longpolling на бэкэнд или shortpolling на клиенте для функций в режиме реального времени.

Answer 2

Если ваш PHP-код прав, то вы должны добавить его в код Vue.

первый включает толкатель скрипт (кажется, что это не availaible как пакет NPM)

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

затем, в вю, экземпляр экземпляра толкателя с помощью API_KEY, и слушать и Подпишитесь

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 и других, и это делается когда вы создаете свой экземпляр.

require('Pusher.php'); 

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

Таким образом, проверить, если вы правильно в коде сервера, но вы определенно делаете это неправильно на клиенте, попробуйте эти изменения и проверить, если это WAHT вам необходимо