Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

brahimzarrouk's avatar

Notification filamentphp

I wish to enable an auditory alert in the web browser for incoming notification messages in filament php, i used this bot not working ->renderHook('panels::body.end', function () { $user = auth()->user();

                    if ( ! $user ) {
                        return '';
                    }

                    if ( method_exists($user, 'receivesBroadcastNotificationsOn') ) {
                        $channel = $user->receivesBroadcastNotificationsOn();
                    } else {
                        $userClass = str_replace('\', '.', $user::class);

                        $channel = "{$userClass}.{$user->getKey()}";
                    }

                    return <<<BLADE
                    <script>
                            window.addEventListener('EchoLoaded', () => {
                                window.Echo.private('$channel').listen('.database-notifications.sent', () => {
                                    setTimeout(function () {
                                         // Remove once you tested.
                                         alert('Test')
                                        
                                         // Replace this sound with your own sound/url.
                                         var audio = new Audio('http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/alien_shoot.wav');

                                         audio.play();
                                    }, 500)
                                })
                            })
                    </script>
                    BLADE;
                })
0 likes
1 reply
LaryAI's avatar
Level 58

It seems like you are trying to play an audio alert when a new notification is received using Laravel Echo in a Filament PHP application. Your code snippet has a few issues that might be causing it not to work as expected. Here's a revised version of your code:

->renderHook('panels::body.end', function () {
    $user = auth()->user();

    if (!$user) {
        return '';
    }

    if (method_exists($user, 'receivesBroadcastNotificationsOn')) {
        $channel = $user->receivesBroadcastNotificationsOn();
    } else {
        $userClass = str_replace('\', '.', get_class($user));

        $channel = "{$userClass}.{$user->getKey()}";
    }

    $escapedChannel = htmlspecialchars($channel, ENT_QUOTES, 'UTF-8');

    return <<<BLADE
    <script>
        window.addEventListener('EchoLoaded', () => {
            window.Echo.private('{$escapedChannel}').notification((notification) => {
                // Replace this sound with your own sound/url.
                var audio = new Audio('http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/alien_shoot.wav');

                audio.play();
            });
        });
    </script>
    BLADE;
})

Here are the changes and considerations:

  1. I've replaced .listen('.database-notifications.sent', () => { with .notification((notification) => {. The .notification method is used to listen for Laravel notifications being broadcast via Echo.

  2. I've removed the setTimeout function because it's not necessary for playing the sound. The sound will play as soon as the notification is received.

  3. I've added htmlspecialchars to escape the channel name to prevent XSS attacks.

  4. Make sure that the audio file URL is correct and accessible from the browser.

  5. Ensure that your Laravel Echo setup is correctly initialized and that the EchoLoaded event is being fired. If it's not, the event listener won't be set up.

  6. Ensure that your Laravel backend is broadcasting notifications to the correct channel and that the user is authorized to listen to that channel.

  7. Remember that modern browsers have restrictions on playing audio without user interaction, so this might not work unless the user has interacted with the page.

  8. Ensure that the BroadcastServiceProvider is uncommented in your config/app.php file and that you have set up the necessary broadcast configuration in your .env file.

  9. Make sure that your Laravel Echo server (Laravel WebSockets or Pusher) is running and properly configured.

Test this revised code, and it should play the audio alert when a notification is received.

Please or to participate in this conversation.