CODEWITHSUNDEEP
laravelpusherlaravel-novalaravel-echo
Wai Yan Hein
Wai Yan Hein

Reputation: 14831

Laravel Nova Notification Feed package is not working

I am using Laravel Nova for the CMS Admin panel. I am integrating live notification feed feature into my Nova application using this package, https://novapackages.com/packages/coreproc/nova-notification-feed. But it is not working.

I installed the package running this command,

composer require coreproc/nova-notification-feed

Then I migrated the required database tables

php artisan notifications:table

php artisan migrate

Then I added the required keys in the env file

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=xxxxxxx
PUSHER_APP_KEY=xxxxxxx
PUSHER_APP_SECRET=xxxxxx
PUSHER_APP_CLUSTER=xxx

I uncommented BroadcastServiceProvider line in the config/app.php as well.

Then I added the following lines in the appropriate places as mentioned in the documentation in the resources/views/vendor/nova/layout.blade.php file.

@include('nova-echo::meta') <!-- INCLUDE THIS LINE HERE -->

@include('nova_notification_feed::notification_feed') <!-- AND THIS LINE HERE -->

To make sure the Echo and the Push are working, in the resources/views/vendor/nova/layout.blade.php file I added the following code snippet before the closing body tag.

<script>
        Nova.liftOff()
        Echo.channel('orders')
            .listen('OrderShipped', (e) => {
                alert('Pusher is working')
            });
    </script>

When I refresh the admin page, I can see that the channel is subscribed in the Pusher dashboard/ console.

enter image description here

But when I push notification from the Pusher console/ dashboard, it says the message has been pushed, but the event in the code is not working.

enter image description here

What is wrong or missing in my code?

Upvotes: 1

Views: 1435

Answers (1)

Chris C
Chris C

Reputation: 471

You need to add a '.' before OrderShipped e.g.

<script>
        Nova.liftOff()
        Echo.channel('orders')
            .listen('.OrderShipped', (e) => {
                alert('Pusher is working')
            });
    </script>

Upvotes: 4

Related Questions