Estoy intentando hacer un chat con laravel y Vue usando Pusher y Laravel ECHO. Hasta el momento en mi panel de Pusher puedo observar todos los mensajes llegar tal como quiero. pero el problema está en que mi código de Javascript no está escuchando para nada los eventos de Laravel.
Dejaré mi código a ver si un alma bondadosa puede ayudarme.
Tengo un formulario para enviar mensaje, lo que me lleva a mi controlador donde tengo:
event(new NewMessage($chat));
Luego tengo mi NewMessage.php
class NewMessage implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $chat;
public function __construct(Chat $chat)
{
$this->chat = $chat;
}
public function broadcastOn()
{
return new Channel('chat.'.$this->chat->project_id);
}
public function broadcastAs()
{
return 'chat.created';
}
}
Hasta aquí todo me va perfecto, en mi panel de Pusher como repito, me salen mis mensajes en el canal que estoy especificando y todo. Ahora el problema es que no logro verlo en mi javascript
En la funcion mounted() de VUE tengo
Echo.channel(`chat.${this.projectid}`)
.listen('.chat.created', (e) => {
console.log('entro');
});
En mi channels.php:
Broadcast::channel('chat.{projectId}', NewMessage::class);
En el bootstrap.js no coloco el codigo pero si tengo descomentado todo lo que me agrega laravel de forma automatica, ademas que en archivo .env ya puse mis credenciales.
De verdad necesito ayuda, le he dado vuelta a todo esto como desde hace 4 horas y no me consigo con la solución, es muy molesto.