Build a Realtime Chat with Laravel, Vue and Pinia
This episode is for members only

Sign up to access "Build a Realtime Chat with Laravel, Vue and Pinia" right now.

Get started
Already a member? Sign in to continue
Playing
19. Detecting typing events

Episodes

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

Transcript

00:00
We now need to work out when a user is typing.
00:02
We'll do that first, and then we will look at client-to-client events with whispering to send this to all clients. Now, we're going to go back to our text area. So let's go back over to our chat text area and figure out how we're going to
00:16
work out whether a user is typing. This might seem pretty straightforward, but of course, we need to have some sort of delay in here so then when the user isn't typing, we show that they're not typing.
00:28
So the first thing that we'll do is add on just a key down event, and we'll call some sort of handle typing function within our component. So let's go up and create this out here. So let's create our handle typing, and of course, let's go ahead and console
00:45
log out typing. Great. Okay, if we head back over, pull up our console, and let's go down to our text area, type something in.
00:55
Yeah, sure enough, this event comes through, but we need to set this as a status of whether they are typing or not, and then after a few seconds or whichever delay that you decide, we want to say that they're not typing. So let's go and emit from here whether we're typing or not.
01:13
So we've already looked at emitting events here, and let's set that to true. Okay, so let's head over to our room component, and then let's say be on typing, and let's console log out here the event data, which is just going to be a Boolean.
01:27
Okay, let's go down and just start typing, and there we go. We get this output. So let's add in to our handle typing event some sort of timeout. Now to store this, we can just do it up here.
01:41
Let's create a typing timeout, and let's set that as a ref, or in fact, let's just set that as a null value. We don't really need to use a ref to keep track of this. And let's go and set that typing timeout whenever a user starts typing to a
01:57
JavaScript timeout, and then we're going to have some sort of event in here happen when they have finished typing. So let's just say finished, and we'll set that for any amount of time, but I'm just going to choose three seconds.
02:11
You can tweak that if you want to. Okay, let's set that to let so we can actually assign it, and let's have a look at the result. Okay, so I'm going to say hello.
02:21
That emits true, but then it will emit finish six times when we finish typing, and that's not what we want. So ideally, whenever we're typing, we first of all want to clear this timeout so it only ever emits it once.
02:37
So let's go ahead and clear that timeout first of all, emit that we're typing because we are, and then go ahead and send this across when we've finished. But it will always be cleared. So we'll only ever get one of these events sent through.
02:50
Let's try it again. So let's say hello, wait a few seconds, and there we go. We get a finished event finally come through. So now that we've done this, what we can do is switch this out to another
03:05
function, which will be what will happen when we finish typing. Let's call that handle finished typing. And in here, let's go ahead and create this method. So handle finished typing.
03:17
What do we want to do? Well, the first thing we want to do is admit that we're not typing anymore. So we can pick that up, but we also want to clear that timeout for a final time. So let's clear the typing timeout from here and emit false.
03:32
Great. So this is nicely coming together. Let's just try this one more time. We get true.
03:37
Finally, we get false emitted from here. So now that we've got this down, we can use these two events that we can pick up directly on our chat text area to whisper across clients without hitting our backend. Let's go ahead and look at how we do that in the next episode.

Episode summary

In this episode, we're focusing on how to detect when a user is typing in our chat application. We start by adding a keydown event to our chat text area and creating a handler that will track whether the user is currently typing. We start simple by logging to the console every time a key is pressed, but quickly realize we need a smarter approach—specifically, we want to know when the user has stopped typing as well.

To handle this, we introduce a timeout. Whenever the user types, we reset a timeout so that after a short delay (we use three seconds as an example), we can consider the user 'finished typing'. This prevents us from sending multiple 'finished' events and keeps things efficient.

We then wire this up so that our typing and finished typing events can be emitted and picked up in our components as true/false values. This is all done purely on the client for now and doesn't yet involve notifying other users.

Now that we've nailed down how to track typing state, we're set up to send these events between clients (without hitting the backend) in the next episode. Stay tuned for that!

Episode discussion

No comments, yet. Be the first!