Bell notification to pusher how to show them update in real-time with echo? Help!

ok so my bootstrap.js file:

 import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

 window.Pusher = Pusher;

 window.Echo = new Echo({broadcaster: 'pusher',
     key: import.meta.env.VITE_PUSHER_APP_KEY,
     cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'eu',
     wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
     wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
     wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
     forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
     enabledTransports: ['ws', 'wss'],
 });

app.js file as follows

window.Echo.channel('admin_notifications')
    .listen('NewLeadEvent', e => {

    })
var notifications = [];
const NOTIFICATION_TYPES = {
    follow: 'App\Notifications\NewLead'
};

I know there most be more to the above but ive tried a few tutorials and I'm still head scratching right now.

My actual blade view drop down as it stands, which just gets the standard laraval notification database table data for the current admin user.

        Route::get('/markAsRead', function () {Auth()->user()->unreadNotifications->markAsRead();});

 <li class="nav-item dropdown dropdown-large">

                        @php
                            $unreadNotifications = auth()->user()->unreadNotifications;
                         @endphp
                        <a class="nav-link dropdown-toggle dropdown-toggle-nocaret position-relative" href="#" onclick="markNotificationsAsRead()" data-bs-toggle="dropdown">
                            @if($unreadNotifications->count() >0)
                            <span class="alert-count">
                              {{ $unreadNotifications->count() }}
                            </span>
                            @endif
                            <i class='bx bx-bell'></i>
                        </a>



                        <div class="dropdown-menu dropdown-menu-end">
                            <a href="javascript:;">
                                <div class="msg-header">
                                    <p class="msg-header-title">Notifications</p>
                                    <p class="msg-header-badge">{{ $unreadNotifications->count() }} New</p>
                                </div>
                            </a>
                            <div class="header-notifications-list">

                                @foreach ($unreadNotifications as $notification)




                                <a class="dropdown-item" href="javascript:;">
                                    <div class="d-flex align-items-center">
                                       {{-- <div class="user-online">
                                        </div>--}}
                                       @if($notification->type === 'App\Notifications\NewLead')
                                            <img src="{{asset('backend/assets/images/icons/icon-newlead.png')}}" class="msg-avatar" alt="user avatar">
                                       @endif
                                        <div class="flex-grow-1">
                                            <h6 class="msg-name">{{ $notification->data['name'] }}<span class="msg-time float-end">{{ $notification->created_at->diffForHumans() }}
												ago</span></h6>
                                            <p class="msg-info"> {{ $notification->data['message'] }}</p>
                                            <p class="msg-info"> {{ $notification->data['enquiry'] }}</p>
                                        </div>
                                    </div>
                                </a>
                                @endforeach
                            </div>
                            <a href="javascript:;">
                                <div class="text-center msg-footer">
                                    <button class="btn btn-primary w-100">View All Notifications</button>
                                </div>
                            </a>
                        </div>
                    </li>

Then i've played around with creating an event and also using the existing notification class to send to pusher.

this is the event class

class NewLeadEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $newLead;

    public function __construct($newLead)
    {
        $this->newLead = $newLead;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('admin_notifications');
    }

    public function broadcastWith()
    {
        return [

                'name' => $this->newLead->name . ' ' . $this->newLead->last_name,
                'enquiry' => $this->newLead->enquiry,

        ];
    }
}

using the below in my controller

$newLead->save();
        /** Create a new Event */
        event(new NewLeadEvent($newLead));

or using this notification class instead

class NewLead extends Notification
{
    use Queueable;

    public $user;
    public function __construct($newUser)
    {
        //
        $this->user = $newUser;
    }

    /**
     * Get the notification's delivery channels.
     *
     * @return array<int, string>
     */
    public function via(object $notifiable): array
    {
        return ['database', 'broadcast'];
    }


    /**
     * Get the array representation of the notification.
     *
     * @return array<string, mixed>
     */
    public function toArray(object $notifiable): array
    {
        return [
            //
            'name' =>  $this->user->name. " ". $this->user->last_name,
            'enquiry' =>  $this->user->enquiry,
            'message' => 'New Website Enquiry'
        ];
    }




    public function toBroadcast($notifiable): BroadcastMessage
    {
        return new BroadcastMessage([
            'name' =>  $this->user->name. " ". $this->user->last_name,
            'enquiry' =>  $this->user->enquiry,
            'message' => 'New Website Enquiry'
        ]);
    }
}

which send via my controller only to Admin users using scope on the user model.

 $adminUsers = User::admin()->get();
        /** Send Administration notification */
        Notification::sendNow($adminUsers, new NewLead($newLead));

So both ways work but I only really want admin to see these notifications. I know that the channel should be private too but one step at a time.

I was hoping to have all notifications show up for admin for all kinds of activity in the app from new subscriptions, new users or any kind of message sent from a user.

Once I've kind of got the client side bit sorted in my mind I think I'll be ok but it's just a mental block with me. ha ha. Any pointers would be greatly appreciated to get me going. thanks you!

Morning! well for me anyway.

So I'm so close, but I really need a bit of help of the 'laravel echo' bit. I've setup my Vue file and with pusher dummy data I can make it work at least. However when I try to add any echo code it just doesn't seem to pick up the pusher data.

<template>
    <div>
        <!-- Display notifications -->
        <div v-for="(notification, index) in notifications" :key="index">
            {{ notification.data.name }} - {{ notification.data.enquiry }}
        </div>

        <!-- Display unread count -->
        <p>Unread Count: {{ unreadCount }}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            notifications: [], // Store received notifications
            unreadCount: 0, // Initialize unread count
        };
    },
    mounted() {
        // Simulate receiving a notification from Pusher
        const notificationData = {
            event: "App\Events\NewLeadEvent",
            channel: "admin_notifications",
            data: {
                name: "test test",
                enquiry: "Senior Dragons - Elite",
            },
        };

        // Handle the received notification
        this.handleNotification(notificationData);
    },
    methods: {
        handleNotification(notificationData) {
            if (notificationData.event === "App\Events\NewLeadEvent") {
                // Add the notification to the array
                this.notifications.push(notificationData);
                // Increment the unread count
                this.unreadCount++;
            }
        },
    },
};
</script>

So that worked but then when I changed my code to use echo listen it doesn't pick up the pusher data.

<template>
    <div>
        <!-- Display notifications -->
        <div v-for="(notification, index) in notifications" :key="index">
            {{ notification.name }} - {{ notification.enquiry }}
        </div>

        <!-- Display unread count -->
        <p>Unread Count: {{ unreadCount }}</p>
    </div>
</template>

<script>
import Echo from 'pusher-js';

export default {
    data() {
        return {
            notifications: [], // Store received notifications
            unreadCount: 0, // Initialize unread count
        };
    },
    mounted() {
        // Initialize Laravel Echo
        const echo = new Echo({
            broadcaster: 'pusher',
            key: import.meta.env.VITE_PUSHER_APP_KEY,
            cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'eu',
            encrypted: true,
        });

        // Subscribe to the channel
        echo.channel('admin_notifications').listen('NewLeadEvent', (event) => {
            // Handle the received notification
            this.handleNotification(event);
        });
    },
    methods: {
        handleNotification(notificationData) {
            // Add the notification to the array
            this.notifications.push(notificationData);
            // Increment the unread count
            this.unreadCount++;
        },
    },
};
</script>

Probably not helping that I'm a newbie to Vue. But I can't see where I'm going wrong here. Is It the handleNotification(notificationData) ?

Pusher :  : ["Event recd",{"event":"App\Events\NewLeadEvent","channel":"admin_notifications","data":{"name":"test test`","enquiry":"Senior Dragons - Elite"}}] logger.ts:19:21
Object { name: "test test`", enquiry: "Senior Dragons - Elite" }

Thanks

Your code looks good but when you're learning vue I advise you to also learn vue composition api with script setup. Its not bad to know how options api work but most vue devs are switching to composition api. I also started with options api and switched to composition api.

I made an example of your code with composition API, I also added some console logs so you can see in the console if the data is correctly received by the listener and then added to the notifications.

Did you remove the initialization of Echo from your bootstrap js file? If it still doesn't work try to remove encrypted = true from the echo config.

<template>
    <div>
        <!-- Display notifications -->
        <div v-for="(notification, index) in notifications" :key="index">
            {{ notification.name }} - {{ notification.enquiry }}
        </div>

        <!-- Display unread count -->
        <p>Unread Count: {{ unreadCount }}</p>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Echo from "pusher-js";

const notifications = ref([]); // Store received notifications
const unreadCount = ref(0); // Initialize unread count

// Initialize Laravel Echo
const echo = new Echo({
    broadcaster: "pusher",
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? "eu",
    encrypted: true,
});

// Handle notification
const handleNotification = (notificationData) => {
    // Add the notification to the array
    notifications.value.push(notificationData);
    // Increment the unread count
    unreadCount.value++;

    // Log the notifications array
    console.log(notifications.value);

    // Log the unread count
    console.log(unreadCount.value);
};

// Subscribe to the channel
onMounted(() => {
    echo.channel("admin_notifications").listen("NewLeadEvent", (event) => {

        // Log the received notification
        console.log(event); 

        // Handle the received notification
        handleNotification(event);
    });
});
</script>