This episode is for members only

Sign up to access "Real-time with Nuxt and Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
11. Whispering... just works

Transcript

00:00
Let's demonstrate whispering, which is client to client connection only without touching our Laravel Reverb server.
00:07
Now, this requires that we're connected to a private channel, but now we have this working. Let's go ahead and create a really basic example to see how this looks. OK, so inside the components directory, I'm going to create our separate component for this just to keep it completely separate. Let's create our a whisper component inside of here and we'll go ahead and create our button to go ahead and whisper between clients.
00:29
And when we go and click on this, let's just invoke a whisper function. And we'll define this out here. So let's call this whisper. And for now, we will just do nothing or just console log something out here. Let's just say whisper. OK, so we'll head over to app dot view.
00:46
And let's go ahead and just change this over in our template. So let's just add in a whisper component to that. And we should now be able to click on that and just get a console log. OK, so the way that whispering works, we just open this up is we connect up to a private channel so we can even connect to the same channel that we have currently been working with.
01:08
So let's go ahead and pull in unmounted and we can get rid of that from there. And let's go and create our channel here. So what we need to do when we whisper is create a channel variable, connect to it. And this is going to be a pusher private channel instance.
01:24
So let's pull this in from our echo. And then now that we've defined that, what we can do is connect up when we've mounted. And then down here somewhere, like in our whisper method, we can go ahead and access that channel. The reason this needs to happen is because we need to connect when we mount, but we can't whisper on something that hasn't been set outside of our home now.
01:47
OK, so let's go ahead and say window echo. And let's connect up to that private channel that we created earlier, which, remember, will automatically authorize us or authenticate us via the thing that we added to the Laravel echo set up. And now what we can do is just whisper on this. So now that we've got this channel created, when we whisper, we can say channel whisper and we can just choose any event.
02:12
Let's just call this event whisper. And in here we can provide some data. So let's just fake this out. OK, so now what will happen is anyone that's currently on this page can listen for this whisper, which will only be sent across clients and not through Laravel Reverb.
02:29
This is perfect for really high amounts of data that you need to send through real time. So here, once we have gone ahead and mounted, we can listen for this particular whisper, which we've called whisper. And then once again, we get a callback like with any other method in here with the event, which we'll just type to any. So now in here, let's go ahead and just console log out E and it should now work.
02:53
So we don't get whispers sent to ourselves. So when I click whisper, this just isn't going to work. But we can easily go ahead and open up a new incognito window here and go ahead and have a look at what happens. So let's head over to the console here.
03:06
Let's pull this across and let's hit whisper. And there we go, you can see that that data is now being sent through to all connected clients. So because we set up Laravel Echo to automatically go through to our API to authenticate us under that broadcasting auth, we can now also whisper without the need to do anything else.

Episode summary

In this episode, we dive into how whispering works with Laravel Echo and Pusher. Whispering lets you send messages directly between connected clients without those messages ever touching your Laravel Reverb server—super useful for real-time data that doesn’t need to be persisted or processed server-side.

We start by setting up a new component in our front-end just for whispering, keeping things nice and tidy. We walk through the process of creating a simple button that, when clicked, triggers a whisper function. At first, this just logs something to the console, but then we wire it up properly to a private channel using Echo.

You’ll see how to make sure your component connects to a private channel as soon as it mounts, and how to set up the actual whisper method, specifying an event name and sending over data. We also show how to listen for this whispered event on other clients, so any user on the page will see the data in real-time.

Finally, we demo the feature by opening an incognito window to show that whispers flow directly between clients, and not to yourself. Thanks to Echo’s built-in authentication hooks, you don’t have to do much extra work to make all this happen.

Overall, you’ll come away with a solid understanding of how to use whispers for client-to-client communication in your Laravel + Echo apps.

Episode discussion

No comments, yet. Be the first!