With Laravel (v5.7) I'm trying to get Broacasting to Work with Pusher and Vue.
The App is like a Chat. When there is a message send in a private chat, the following function is called: broadcast(new NewChat($message));
This is the "NewChat"-Event:
class NewChat implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $message;
public function __construct(\App\Message $message)
{
$this->message = $message;
}
public function broadcastOn()
{
return new PrivateChannel('chats.' . $this->message->conversation_id);
}
public function broadcastWith()
{
return ['message' => $this->message];
}
}
The channels.php
has:
Broadcast::channel('chats.{conversationId}', function ($user, $conversationId) {
return true; // security i'll do later
});
But I can't figure out how to correctly listen to the Events with Vue and update it all. The following I've added in the boostrap.js (it's all written in Vue the app):
import Echo from 'laravel-echo'
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: process.env.MIX_PUSHER_APP_CLUSTER,
encrypted: true
});
window.Echo.private(`chats.1`)
.listen('NewChat', (e) => {
console.log(e.update);
});
In the example I hardcoded the number 1 for the private channel, because that's the same channel as from the screenshot.
What am I missing? I re-read the documentation page multiple times and tried following tutorials to see if I've skipped something small, but don't know. Anyone who sees what I'm missing?
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire