时间戳

首页 > 解决方案 > 通知未广播到控制台？

laravel - 通知未广播到控制台？

问题描述

我在 laravel 中有一个通知正在保存到数据库中，但它也应该在 js 中广播到客户端，以便通知下拉列表自动更新新通知。Pusher 正在获取正确的频道 ID。通知下拉菜单会在重新加载页面时显示正确的通知，但不会使用 Echo.private 方法自动更新。控制台中没有显示任何内容。CSRF 令牌在那里，带有用户 ID 的元标记也在那里。谁能帮我弄清楚为什么没有推送通知？忘了补充一点，事件正在公共频道上广播和收听就好了。只是通知不起作用。

应用程序.js

require('./bootstrap');
import Vue           from 'vue'
import Notifications from 'vue-notification'


Vue.use(Notifications);

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('orders', require('./components/Orders.vue').default);
Vue.component('support', require('./components/Support.vue').default);
Vue.component('support-messages', require('./components/SupportMessages.vue').default);
Vue.component('signups', require('./components/Signups.vue').default);
Vue.component('signup-messages', require('./components/SignupMessages.vue').default);
Vue.component('notification-dropdown', require('./components/Notifications.vue').default);

new Vue({
    el: '#app',
    data: {
        notifications: ''
    },

    created()
    {
        axios.post('/notifications/get').then(response => {
            this.notifications = response.data
        });

        var userId = $('meta[name="userId"]').attr('content');
        Echo.private('App.User.' + userId).notification((notification) => {
            console.log(notification);
            this.notifications.push(notification);

    });
    }

});

通知.vue

<template>
    <div id="notifications-autoload">
        <div id="notification-dropdown" class="dropdown dropleft dropdown-notifications sw-open">
            <button id="notifications-button" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                 Notifications <span class="badge">{{notifications.length}}</span>
            </button>

            <ul class="dropdown-menu notifications">
                <div class="dropdown-container">
                    <div class="dropdown-toolbar">
                        <div v-if="notifications.length > 0" class="dropdown-toolbar-actions">
                            <a class="dropdown-item" href="/admin/notifications/read"><i class="glyphicon glyphicon-ok-circle"></i> Mark all as read</a>
                        </div>
                        <li v-for="notification in notifications">
                            <a v-on:click="MarkAsRead(notification)" class="dropdown-item" href="#">{{ notification.data.message}}</a>
                        </li>
                        <li v-if="notifications.length === 0">
                            There are no new notifications.
                        </li>
                    </div><!-- /dropdown-toolbar -->
                </div>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['notifications'],
        methods: {
            MarkAsRead: function(notification)
            {
                var data = {
                    id: notification.id
                };
                axios.post('/notifications/read', data).then(response => {
                    window.location.reload()
                });
            }
        }
    }
</script>

标签： laravelvue.js

解决方案

对于那些将所有模型移动到“模型”目录（即 App/Models）的用户，需要将频道引用更新为：

Broadcast::channel('App.Models.User.{id}', function ($user, $id) {
    return (int) $user->id === (int) $id;
});

和

window.Echo.private('App.Models.User.' + userId).notification((notification) => {
    console.log(notification)
})

推荐阅读