Уведомление не транслируется на консоль?

Question

У меня есть уведомление в laravel, которое сохраняется в базе данных, но оно также должно транслироваться клиенту в js, чтобы выпадающий список уведомлений автоматически обновлялся с новым уведомлением.Pusher получает правильный идентификатор канала.В раскрывающемся списке уведомлений отображается правильное уведомление после перезагрузки страницы, но оно не будет автоматически обновляться с помощью метода Echo.private.Ничего не отображается в консоли.Маркер CSRF находится там, и там есть метатег с идентификатором пользователя.Может кто-нибудь помочь мне понять, почему уведомление не отправляется?Забыл добавить, что События транслируются и слушаются на общественных каналах просто отлично.Просто уведомления не будут работать.

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

Я понял это.Тип уведомлений, который я использовал, был для приложений / администраторов, поэтому мне пришлось изменить частный канал на Echo.private ('App.Admins.' + UserId) .notification ((уведомление). Во всех поисках / исследованиях, которые я делалЯ ни разу не сталкивался с тем, что упомянуто, что вы должны сопоставлять тип уведомляемого с именем частного канала. Это кратко указано в документах Laravel, но об этом легко забывают.

Answer 2

---

Как настроить Laravel с Node And Pusher VUE js

Шаг 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

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

ШАГ 6 Установочный узел

 npm install

ШАГ 7 Installl Pusher js

npm install --save laravel-echo pusher-js

ШАГ 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);
 }