Update the notifications counter and dropdown items with pusher

I implemented a simple notifications system in Laravel 6. Now I'm trying to migrate to real-time notifications, I mean when a new notification is there to change the bell counter(unread notifications) and update the dropdown items. How can I update the counter(badge) and update this dropdown without refresh the page?

Now just I displaying the results in console:

My app.js to update in real-time with Laravel-echo

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

Thank you.

bobbybouwmann

6 years ago

Level 88

There are a few things you need to keep in mind here. It could be possible that you get the same notification twice, so you need to make sure you check against that. The idea behind this is simple. You keep a list of notification IDs you already have. Everything you get a notification you check if the notification ID exists. If not you add it to the list. Then you can update the counter with the size of the array of notification IDs.

Another solution is just keeping a number with notifications. Whenever you get a notification event you just higher up that number. You don't have to do any checking then, but you can have duplicate once so the counter is wrong.

If you also want to show the content of the notification right away, the last option isn't ideal.

Please or to participate in this conversation.