使用 laravel5.2 、 vue.js 和 pusher 实时获取数据

Posted 2023-02-22

【中文标题】使用 laravel5.2 、 vue.js 和 pusher 实时获取数据

【英文标题】：Real Time Fetching data with laravel5.2 , vue.js and pusher

【发布时间】：2016-07-20 08:06:38

【问题描述】：

我有问题。 我正在使用推送器进行实时通知，当它运行时它会使用 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
        


    

请告诉我我做错了什么以及如何做对。

【问题讨论】：

你在哪里订阅推送服务？如下所述，vue.resource 中的 get 方法是单一方法，需要不断监听 pusher 事件。在文档中，他们说您使用 susbcirbe 方法来做到这一点？你的 Vue 代码在哪里？

谢谢！我现在正在研究订阅推送服务。

【参考方案1】：

this.$http.get() 向服务器发出单个 GET 请求，但不会保持与服务器的连接打开。如果你想为你的网站添加实时功能，你应该实现类似 socket.io 的东西，它实现了 WebSockets。您还可以在后端执行longpolling 或在客户端执行shortpolling 以获得近乎实时的功能。

【讨论】：

socket.io 与推送器不同吗？我应该同时使用它们还是只使用socket.io？

你不再需要 socket.io，因为你想使用 Pusher。但从技术上讲，您可以同时使用这两种技术，它们都是 Web 套接字技术。 Socket.io 是一个开源库，可以自己实现 Web 套接字，而 Pusher 是一家通过他们的服务器为您提供该服务的公司。

【参考方案2】：

如果你的 php 代码是正确的，那么你应该在 Vue 代码中添加订阅者。

首先包含 pusher 脚本（似乎不能作为 npm 包使用）

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

然后，在 vue 中，使用您的 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 代码。我不确定triggerevent 是推送器的类方法，在文档中我看到触发器被用作实例方法，并且有意义，因为您需要传递您的 api 密钥和其他身份验证值，并且在您创建实例时完成。

require('Pusher.php');

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

所以，请检查您的服务器代码是否正确，但您肯定在客户端做错了，尝试这些更改并检查您是否需要