Realtime with Laravel Reverb
Playing
17. Whispering basics

Episodes

0%
Your progress
  • Total: 1h 19m
  • Played: 0m
  • Remaining: 1h 19m
Join or sign in to track your progress

Transcript

00:00
Whispering allows you to broadcast and receive events client to client
00:05
without having to define these events in your Laravel application. There's a couple of scenarios where you'd want to use this. For example, if you were building out a chat room and you wanted to display which users were currently typing,
00:19
it doesn't make sense on the client side to then send a request to your application to then broadcast an event to then pick up on the clients. Instead, what you can do is just send this event directly on the client and it will be picked up by anyone on that channel.
00:35
We're going to look at a really simple example in this episode and then in the next episode, we're going to build out a mouse tracking event which will show whose mouse is moving on everyone's client. Okay, let's get started with this by just building up a channel really quickly.
00:50
So it doesn't matter which type of channel that we're working with. In our case, we're just going to create out an app channel and inside of the closure here, we're going to go ahead and grab out the current user and we're just going to return true.
01:03
But of course, you can also authorize these channels that users are allowed to whisper on. So let's go ahead and actually return true there and let's head straight over to our dashboard and look at how this works. So once again, we'll just use Alpine so we can write some JavaScript out here
01:20
and we're going to go ahead and connect up to that channel first of all. Let's use echo private and connect to the app channel. Okay, we'll keep reverb running here and open just so we can see this and sure enough, if we head over, you can see that we are now connected to that channel.
01:36
Great. Okay, so we're going to do things slightly differently here because we can't just go ahead and broadcast this directly on this channel. We have to have some sort of JavaScript event to then go ahead and whisper.
01:49
So what we're going to do is define out a variable here called channel and then on some event, we're going to whisper to that channel. So as an example, let's create out a timeout here in JavaScript and give this a couple of seconds before it runs.
02:04
What we can then do is access our channel and we can use the whisper method. All of this, again, is within the echo API so you don't have to specifically give the event that it needs. Okay, so the event name can be anything.
02:18
Let's just give that as typing. And then as the second argument, you can define out any payload that you want to send over. So for example, if this timeout was actually an event on a text area down here, you would go ahead and emit this with the user, the currently authenticated user who is typing.
02:36
Okay, let's try this out. So we're going to come over and give this a refresh. Just wait a couple of seconds. And if we head back over to here, you can see that sure enough,
02:45
we have this client prefixed with typing. So that's our event name. And of course, all of the payload. So with this, we can now pick this up on any of the connected clients.
02:57
How do we do that? Well, we'll access the channel as normal and we'll use the listen for whisper method. Let's go ahead and pick up the typing event. And this works in exactly the same way as any other events that we create.
03:11
We define a closure and we get all of the event data out in here that we want to listen to. Okay, let's save this out and head back over and give these both a refresh. Wait a couple of seconds. And you can see that this is now being broadcast to every single client
03:28
without having to define that event on our backend. One thing that's really important about this is if we were to whisper a huge amount of data, at the moment, we're running reverb with the debug option. We're going to go ahead and turn that off because in the next episode,
03:44
we're going to be handling a huge and sending a huge amount of events. And with the debug option enabled, effectively, this is just going to crash reverb, especially, particularly inside of our terminal. So we're going to go ahead and get rid of the debug option.
03:58
Everything is still working nicely here. Wait a couple of seconds, that comes through. Let's go to the next episode and look at a practical example where we're going to be sending a much larger amount of events.

Episode summary

In this episode, we dive into the basics of whispering with Laravel and Alpine.js. Whispering lets clients broadcast and receive events directly to each other, without needing to define those events on the Laravel backend. This is super handy for scenarios like displaying who's typing in a chat room—there's no need to involve a round trip to your server!

We start by setting up a simple channel (it doesn't matter what type), making sure users are authorized (we just return true for simplicity). Then, we use Alpine.js and Echo to connect to that channel. The fun part is using the whisper method on the client side—this lets us broadcast an event (like typing) with any payload we want, such as the current user info.

To listen for these whispers from other clients, we use the listenForWhisper method. This works just like listening for regular server-broadcasted events. We set up a quick demonstration: after a timeout, a typing event is whispered to all connected clients, and we verify it's received everywhere.

We finish up with a note: whispering is powerful but can be intensive if you send loads of events or big payloads, so we turn off debugging in Reverb before the next episode. In the following lesson, we'll build on this foundation to broadcast live mouse movements—a much more event-heavy example!

Episode discussion

No comments, yet. Be the first!