livewire=3 laravel =10
I am working on a Laravel project that uses Livewire for real-time messaging, with events being broadcasted via Pusher. The issue I am facing is that the event is recognized by Pusher, but my Livewire component is not receiving the broadcasted event.
Pusher Setup:
I have set up Pusher and can see events being broadcasted successfully in the Pusher dashboard.
The Pusher setup in resources/js/app.js looks like this:
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,
});
and the event from livewire
$members = ConversationMember::where('conversation_id', $this->conversationId)->get();
foreach ($members as $member) {
if ($member->user_id != Auth::id()) {
event(new MessageSent($this->newMessage, Auth::id(), $member->user_id, $this->conversationId));
}
}
MessageSent.php
<?php
namespace AppEvents;
use IlluminateBroadcastingChannel;
use IlluminateBroadcastingInteractsWithSockets;
use IlluminateFoundationEventsDispatchable;
use IlluminateQueueSerializesModels;
use IlluminateContractsBroadcastingShouldBroadcastNow;
class MessageSent implements ShouldBroadcastNow
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $message;
public $user_id;
public $res_id;
public $conversation_id;
/**
* Create a new event instance.
*
* @return void
*/
public function __construct($message, $user_id, $res_id, $conversation_id)
{
$this->message = $message;
$this->user_id = $user_id;
$this->res_id = $res_id;
$this->conversation_id = $conversation_id;
}
/**
* Get the channels the event should broadcast on.
*
* @return IlluminateBroadcastingChannel|array
*/
public function broadcastOn()
{
return new Channel("users.{$this->user_id}");
}
/**
* Get the broadcastable data.
*
* @return array
*/
public function broadcastWith()
{
return [
'conversation_id' => $this->conversation_id,
'user_id' => $this->user_id,
'message' => $this->message,
'res_id' => $this->res_id,
];
}
}
the event listener
public function getListeners()
{
return [
"echo-private:users.{$this->user_id},.App\Events\MessageSent" => 'receiveMessage_e',
'conversationSelected' => 'loadConversation',
'conversationStarted' => 'handleConversationStarted',
'messageReceived' => 'receiveMessage'
];
}
public function receiveMessage_e($event)
{
dd($event); // This never gets triggered
}
and last the debug console “pusher” pusher
I configured Pusher correctly in app.js and verified that events are being broadcasted successfully to the Pusher dashboard. In my Livewire component, I set up the getListeners method to listen for the MessageSent event using the correct channel and event syntax.
What I Expected:
I expected the Livewire component to receive the broadcasted event and trigger the receiveMessage_e method, which would dump the event data.
What Happened:
The event was successfully broadcasted to Pusher, but the receiveMessage_e method in the Livewire component was never triggered, and the event data was not received in the browser.
