實時通過laravel5.2，vue.js和推送器獲取數據

我遇到問題。我使用推送器進行實時通知，當它運行時，它會通知我使用noty，，但我也希望它在類似於facebook的視圖中實時顯示新通知的編號。實時通過laravel5.2，vue.js和推送器獲取數據

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


    } 
}

請告訴我在做什麼錯了，我該怎麼做是正確的。

來源

2016-03-31 sad beginner

而你在哪裏訂閱了推送服務？如下所述，來自vue.resource的get方法是一種單一方法，您需要不斷地收聽推送器事件。在文檔中他們說你用susbcirbe方法做到這一點？你的Vue代碼在哪裏？ –

謝謝！我現在正在研究訂閱推送服務。 –

-1

this.$http.get()對服務器做了一個GET請求，它不會保持與服務器的連接處於打開狀態。如果你想添加實時功能到你的網站，你應該實現類似socket.io的實現WebSockets。您也可以在客戶端上執行longpolling或在客戶端上執行shortpolling以獲得近實時功能。

來源

2016-03-31 19:20:21

是否與socket.io不同？我應該只使用它們還是使用socket.io？ –

因爲您想使用Pusher，所以您不再需要socket.io。但從技術上講，你可以同時使用它們，它們都是web套接字技術。 Socket.io是一個開源的libray，可以自己實現web套接字，而Pusher是一家通過服務器爲您提供服務的公司。 – Reolbox

-1

如果您的php代碼是正確的，那麼您應該在Vue代碼中添加訂閱者。

首先包括推杆腳本（這似乎不是availaible作爲NPM包）

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

然後，在VUE，使用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密鑰和其他身份驗證值，並且這樣做完成了當你創建你的實例。

require('Pusher.php'); 

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

所以，檢查你是否在你的服務器代碼是正確的，但你definitly做錯了在客戶端上，嘗試這些變化，並檢查是否是你需要啥子

來源

2016-03-31 20:56:15

實時通過laravel5.2，vue.js和推送器獲取數據

回答

相關問題