Realtime Database Notifications is sending to Pusher, but it does not reaches the destination user panel on the frontend

[wemersonrv]

Package

Notifications

Package Version

v3.2.41

How can we help you?

Hello,

I'm having trouble to show DatabaseNotifications on the user's panel in realtime with Laravel Echo/Pusher.

Checking the pusher dashboard, i can see that the notification reach the Pusher server, but it does not reach the user dashboard as you can see on the print below:

Only after manually refreshing the page that the notification widget is updated with the new one! So the notification is storing right on database and can be loaded fine when refresh the page on the browser!

AdminPanelProvider

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->default()
            ->id('admin')
            ->path('admin')
            ->login()
            ->databaseNotifications(true)
            ->databaseNotificationsPolling(null)
            ...

Send the notification to pusher

   $agent = $ticket->assignedTo;

   Notification::make()
      ->title('A Ticket has been assigned to you')
      ->sendToDatabase($agent);

   event(new DatabaseNotificationsSent($agent));

My .env variables

BROADCAST_DRIVER=pusher

PUSHER_APP_ID=___ID___
PUSHER_APP_KEY=___KEY___
PUSHER_APP_SECRET=___SECRET___
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=mt1

VITE_APP_NAME="${APP_NAME}"
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

my boostrap.js

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 ?? 'mt1',
    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'],
});

Reading some content here, found some answers about do not worry about broadcast stuffs, just enable it on the .env, uncomment the broadcast.js file part about Laravel Echo and Filament will handle the rest for us.

Did i miss something?

Filament version: 3.2.41

[clinvest]

Same problem here..

[wemersonrv]

Yeah here notifications just reaches the pusher side only, but not the panel. See the screen capture below, that its having new notifications today.

@clinvest yours reaches pusher too?

Just an update: Updated to the recent filament version v3.2.46 and it still the same.

For information: I just commented the boostrap.js pusher portion right now because because found in another posts here that the realtime notification with pusher protocol is managed by filament for us. But still works only until the notification reaches the pusher side, not the frontend. It seems something is not right on the frontend part of filament... or i am still some step on the configurations stack 😩

[ArtMin96]

This may help: #10163 (comment)

[wemersonrv]

It didn't work either. I had already tested the solution in this thread before!

[cxemnet]

Did someone manage to make the panel work through websockets?
In browser console, the WS tab is empty when opening the Filament panel.
Although with a regular page and manual JS, everything works fine through Pusher.