Livewire component not received the event sent by Livewire.dispatchTo

I tried to dispatch an event to a livewire component, but the event was not received. In my app.js I have :

window.Echo.channel('channel-place')
.listen('.PlaceAddedEvent', (e) => {
console.log('PlaceAddedEvent received:', e); // Vérifiez si ce message apparaît dans la console du navigateur

if (typeof window.Livewire !== 'undefined') {
console.log("dispatchto");
Livewire.dispatchTo('places-table', 'PlaceAddedEvent', { message: 'Test' });
console.log('Dispatch finished');
} else {
console.error('Livewire is not available.');
}
});


And it seems to work, I don't have any errorr, the string "'Dispatch finished" is displayed in the console.

Here is my Livewire PHP component :

<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\Search;

use Illuminate\Support\Facades\Log;

use Livewire\Attributes\On;

class PlacesTable extends Component
{

#[On('PlaceAddedEvent')]
public function handlePlaceAdded($payload)
{
Log::info('PlaceAddedEvent RECEIVED :', $payload);
$this->render();
}

public function mount($searchId)
{
$this->searchId = $searchId;

// it works
// $this->dispatch('PlaceAddedEvent', ['message' => 'Test direct interne']);
}

public function render()
{
//
}

}


In my blade file :

@livewire('places-table', ['searchId' => $search->id])


As you can see, the component name places-table match with the dispatchTo method, as well as the event name.

When I try to dispatch the event from the same blade that included the livewire, it doesn't work :

<button wire:click="$dispatch('PlaceAddedEvent', { message: 'Test Button' })">
Test Event Dispatch
</button>


But when I displatch it from the PHP component itself, it works :

$this->dispatch('PlaceAddedEvent', ['message' => 'Test direct interne']);


Any clue?

Thanks

Continue reading...