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

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

步骤1首先安装laravel

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

步骤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将Pusher添加到laravel项目

 composer require pusher/pusher-php-server

步骤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 Installl Pusher js

npm install --save laravel-echo pusher-js

STEP 8 uncommnet关注

// 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 2

我知道了。我使用的可通知类型是针对App / Admins的，因此我不得不将Private通道更改为Echo.private（'App.Admins。'+ userId）.notification（（notification）。在所有的Google搜索/研究中，，我一次也没有遇到任何提及您必须将可通知类型与私有渠道名称进行匹配的内容，它在Laravel文档中进行了简要说明，但很容易被忽略。

Answer 3

对于已将其所有模型移至“模型”目录（即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)
})

通知没有被广播到控制台？

3 个答案:

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