通知未广播到控制台？

Question

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

app.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);

    });
    }

});

Notifications.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>

Answer 1

对于那些将所有模型移动到“模型”目录（即 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)
})

Answer 2

---

如何使用 Node 和 Pusher VUE js 配置 Laravel

第一步先安装laravel

composer create-project laravel/laravel your-project-name 5.4.*

STEP 2 设置变量更改 Broadcastserviceprovider

we first need to register the App\Providers\BroadcastServiceProvider. Open 
config/app.php and uncomment the following line in the providers array.

// App\Providers\BroadcastServiceProvider

 We need to tell Laravel that we are using the Pusher driver in the .env file:

  BROADCAST_DRIVER=pusher

  add pusher Class in config/app.php

 'Pusher' => Pusher\Pusher::class,

第 3 步在你的 laravel 项目中添加一个 Pusher

 composer require pusher/pusher-php-server

STEP 4 将以下内容添加到 config/broadcasting.php

'options' => [
      'cluster' => env('PUSHER_CLUSTER'),
      'encrypted' => true,
  ],

步骤 5 设置推送变量

 PUSHER_APP_ID=xxxxxx
 PUSHER_APP_KEY=xxxxxxxxxxxxxxxxxxxx
 PUSHER_APP_SECRET=xxxxxxxxxxxxxxxxxxxx
 PUSHER_CLUSTER=xx

步骤 6 安装节点

 npm install

STEP 7 安装 Pusher js

npm install --save laravel-echo pusher-js

步骤 8 取消关注

// resources/assets/js/bootstrap.js

  import Echo from "laravel-echo"

  window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'xxxxxxxxxxxxxxxxxxxx',
    cluster: 'eu',
   encrypted: true
 });

第 9 步创建迁移之前

 // app/Providers/AppServiceProvider.php
// remember to use
Illuminate\Support\Facades\Schema;

public function boot()
{
  Schema::defaultStringLength(191);
 }

Answer 3

我想通了。我使用的可通知类型用于 App/Admins，因此我必须将 Private 频道更改为 Echo.private('App.Admins.' + userId).notification((notification)。在我所做的所有谷歌搜索/研究中，我没有遇到过任何提到你必须将通知类型与私有频道名称匹配的内容。它在 Laravel 文档中简要说明了这一点，但很容易被忽略。