Playing
17. Whispering basics
Episodes
01. Broadcasting Basics
02. Private channels
03. Presence channels
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.
18 episodes•1 hr 19 mins•10 months ago
Overview
New to realtime broadcasting in Laravel? This course covers the essentials with plenty of examples along the way, leaving you ready to start adding realtime functionality to any of your Laravel applications.
Broken up into channel types, we’ll cover:
- The basics of installing, configuring and running a Reverb server
- Broadcasting events
- Private channels
- Presence channels
- Client-to-client broadcasting by whispering
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!