In this lesson we're going to look at typing indicators. Now that's the little section at the bottom of the input here where we get a notification to tell us when another user of the channel is typing. To do that we can leverage our existing private channel and we can look at using a piece of functionality called Client Whispers. Let's dive in. Here we are in our EditorComponent and here you can see that on keyup we are dispatching a typing event. And that's something we can listen for in our parent component where we're actually rendering the Editor.

And that's something we can listen for in our parent component where we're actually rendering the editor. Here we are back here in our ChannelVault component. This is the component that actually renders our editor. So what we can do here in a parent element of our editor, we can listen for the typing event that the editor dispatches. And when that event is dispatched we will go ahead and call a typing method on our own Alpine component. When we receive that event from our editor we actually want to de-bounce it. When the user first presses a keystroke we want to act on it and only when we're confident

When we receive that event from our editor we actually want to de-bounce it. When the user first presses a keystroke we want to act on it and only when we're confident that they've stopped typing do we want to carry out another action. I've already implemented a de-bouncer which accepts a start callback and a stop callback. If the de-bouncer already exists we clear the timeout. If it doesn't exist when the user first starts typing we set a timeout and after two seconds when we no longer receive any more typing events we will call our stop callback and set the isTyping property to false. Otherwise only if the user isn't typing, that's how we prevent firing off this event over and over and over again on every keystroke, we set the current user to typing and we call

Otherwise only if the user isn't typing, that's how we prevent firing off this event over and over and over again on every keystroke, we set the current user to typing and we call our start callback. Further up the page we're going to implement our typing method. In the body of our typing method we're going to use our de-bouncer so we can say this.debounce and we can go ahead and pass two callbacks. Let's go ahead and stub these out. Remember the first callback is our starting action and the second callback is our stopping action when the user stops typing. In the body of our method here this is where we can interact with our WebSocket channel.

action when the user stops typing. In the body of our method here this is where we can interact with our WebSocket channel. This is where we will start to use client whispers which I mentioned at the beginning of the lesson. We can use our channel that we have as a property on our component and we can say this.channel.whisper and then we can give it an event name and in this case I'm going to use startTyping. We will also pass through here an object and this is an object of data which we want the other users listening on our channel to receive. In this case I'm going to use an ID and I want to use the ID of the currently authenticated user and I'm also going to pass through their name.

In this case I'm going to use an ID and I want to use the ID of the currently authenticated user and I'm also going to pass through their name. Now when the user stops typing we want to do the opposite. We want to let the users listening on the channel know that the current user has stopped typing. So to do that we can go and copy some of this body, paste it here and all we want to do here is change the event name to stopTyping and we will need a comma here. Okay that's looking pretty good. So what's actually happening under the hood here? When the user starts typing we're going to call the whisper method on our channel and

So what's actually happening under the hood here? When the User starts typing we're going to call the whisper method on our channel and this is quite interesting. It isn't actually interacting with our Laravel application at all. This event gets sent off to Reverb and Reverb knows that when it receives a whisper that it should take control and broadcast that message to all other listeners of that channel. So we're dispatching the event now. Let's look at how we might listen for it. So back where we are initializing the connection to our channel we can say this.channel.listen for whisper and yes we want to listen for the start typing event and Copilot's got it.

So back where we are initializing the connection to our channel we can say this.channel.listen for whisper and yes we want to listen for the startTyping event and Copilot's got it exactly right here. We want to push the event into the list of currently typing users. Now if you remember this is a property that exists already on our Alpine component. Every time a user starts typing they will get appended to the list of currently typing users and what we need to do now is when they stop typing they need to be removed from that list. So we can do something similar here and say this.channel.listen for whisper and yes we want to listen for the stopTyping event and we will receive the event body here and

So we can do something similar here and say this.channel.listen for whisper and yes we want to listen for the stop typing event and we will receive the event body here and Copilot has got this just about right as well. So we want to filter out the User who has just stopped typing. Okay so now we have an array of users currently typing in our application. We need to do something to format those to make them useful for outputting on the front end. So to do that we're going to create another new method, typingUsers, and we'll use a switch statement. So we can say switch and we want to use this.users.typing.length and we'll say case 0 we return an empty.

Typing users and we'll use a switch statement. So we can say switch and we want to use this.users.typing.length and we'll say case 0 we return an empty string. case 1 yes we will return the name of the only user who's currently typing. If there's two users typing we will return both of their names and by default we will return several people are typing. Okay so that's looking pretty good as long as we add the comma here. To render that text there all I have to do is say xtext equals typingUsers. So back in the browser you can see that we are still connected to our WebSocket channel and you can see that subscription has succeeded successfully.

So back in the browser you can see that we are still connected to our WebSocket channel and you can see that subscription has succeeded successfully. If I start typing in here now you'll see that I am indeed firing off the startTyping event and two seconds later I'm receiving the stopTyping event. Okay so here we are with two users logged in side by side. Now if I start typing in this window you can see that Joe has indeed started typing and on this side James has indeed started typing. So with those features built into Reverb and Laravel we are able to wire up really really powerful features such as typing indicators with ease.

powerful features such as typing indicators with ease.