Custom Echo listeners in Livewire are not registered

[damiandejong]

Package

filament/filament

Package Version

v3.0.25

Laravel Version

v10.19.0

Livewire Version

v3.0.0-beta.9

PHP Version

PHP 8.2.8

Problem description

For some resource pages, I would like to register Echo listeners that refresh the Livewire component in case a resource that broadcasts events (https://laravel.com/docs/10.x/broadcasting#model-broadcasting) has changed.

I did this by adding a listener in the getListeners function, provided by Livewire (https://livewire.laravel.com/docs/events#listening-for-echo-events). In the demo I added to ListProducts.php:

public function getListeners()
{
    return [
        'echo:products,.ProductUpdated' => '$refresh'
    ];
}

Now, when opening the page and looking at the Pusher log, the component does not subscribe for the products channel and thus, the component does not listen to any event of that channel.

Expected behavior

I would expect that the Livewire function getListeners works properly inside Filament components. Otherwise, how could I add such listeners to a page as described in the problem description?

The problem is solved by removing the DOMContentLoaded listener in panels/components/layout/base.blade.php. Thus changing

<script>
    window.addEventListener('DOMContentLoaded'{{-- 'livewire:navigated' --}}, () => {
        window.Echo = new window.EchoFactory(@js(config('filament.broadcasting.echo')))

        window.dispatchEvent(new CustomEvent('EchoLoaded'))
    })
</script>

to

<script>
    window.Echo = new window.EchoFactory(@js(config('filament.broadcasting.echo')))

    window.dispatchEvent(new CustomEvent('EchoLoaded'))
</script>

Broadcasting notifications to users then still works properly, however, I don't know why the DOMContentLoaded listener is being used and whether it is needed for other scenarios that I did not test.

Steps to reproduce

1. Use the reproduction repository below.
2. Install all dependencies and seed the database as with the Filament demo.
3. Provide Pusher credentials in .env or other whatever to make broadcasting work.
4. Go to Products, where you can test whether broadcasting is working by pressing the test button above the table.
5. You can see the page does not subscribe to the products channel while it is listed in the getListeners function. And thus, if you edit a product on another tab, the table page is not refreshed automatically.
6. In case you manually change the code as stated above and retry steps 4-5, it now should work as expected.

Reproduction repository

https://github.com/damiandejong/filament-echo.git

Relevant log output

No response

[danharrin]

Please PR the fix in