Laravel Vue JS使用推杆

时间:2017-10-27 12:53:51

标签: javascript laravel vue.js pusher

我想创建一个用户发出请求的应用程序,管理员会收到有关它的通知。我正在使用Laravel 5.5和Vue JS与推杆和laravel回声。我安装了一切。 问题是当用户提交请求时,它仍然不会通过刷新显示更新。 这是我的一些代码: RequestFiled.php(这是事件)

<?php

namespace App\Events;

use App\Request;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class RequestFiled implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $request;
    public $user;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(Request $request)
    {
        $this->request = $request;
        $this->user = $request->user;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('notifications');
    }
}

在RequestsController.php文件中,我将此代码与进入数据库的代码一起使用:

//Event
            broadcast(new RequestFiled($userRequest));

Notifications.vue:

<template>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <i class="material-icons">notifications</i>
            <span class="notification">{{ notifications.length }}</span>
            <p class="hidden-lg hidden-md">Notifications</p>
        </a>
        <ul class="dropdown-menu">
            <li v-for="notification in notifications">
                <a href="#">{{ notification.message }}</a>
            </li>
        </ul>
    </li>
</template>

<script>
    export default {
        data: function() {
            return {
                notifications: []
            }
        },
        created: function() {
            this.getNotifications(),

            Echo.channel('notifications')
                .listen('RequestFiled', (e) => {
                    console.log('user made a request')
                })
        },
        methods: {
            getNotifications: function() {
                let app = this

                axios.get('/api/notifications')
                    .then(function(response) {
                        app.notifications = response.data
                    })
                    .catch(function(error) {
                        console.log(error)
                    })
            }
        }
    }
</script>

channels.php:

Broadcast::channel('notifications', function ($user, $request) {
    return true;
});

在侦听RequestFiled事件的通知页面上,当请求存储在数据库中但没有任何实际情况发生时,没有任何反应。只有当我刷新页面时。它没有显示错误。

0 个答案:

没有答案