Build a Multi-room Realtime Chat with Livewire and Reverb
This episode is for members only

Sign up to access "Build a Multi-room Realtime Chat with Livewire and Reverb" right now.

Get started
Already a member? Sign in to continue
Playing
12. Detecting when we're typing

Episodes

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

Transcript

00:00
Before we look at broadcasting which users are typing, let's first of all figure out how we can detect if we are typing so we can broadcast appropriately.
00:10
Now, this all happens on the text area itself. We applied the events for key up and key down over on our form, which technically does work, but I think it's going to make more sense if we pull these directly over to the text area. Because we are not submitting a form in the traditional sense, we're using wire
00:31
to invoke that submit method. It doesn't matter if we just put this on the text area. So let's go ahead and just pull all of these down so we can see what we're doing a little bit better. And we'll go ahead and just basically copy and paste these over to here. Okay, so let's go ahead and pull these in.
00:51
And there we go. Let's pull these over as well. Great. So this should work in exactly the same way. So I can type something. It sends through. I can't hit enter normally. Everything is good. Okay, so what we want to do in here is just on any key down.
01:08
So when we just hit any key, we want to show that the user is typing. So let's do this down the bottom here. So it's more out the way. And we're just going to say on key down. And we want to do something inside of here. So for now, why don't we just console log typing?
01:26
Okay, let's head over and pull open our console and have a look at what this gives us. So down here, I can say hello. And of course, that's now fired every time I press a key down. Kind of makes sense. Now, the only problem is if we were to broadcast that the user me is currently typing, it would always be set to true.
01:49
So it would always be typing in this instance. That's obviously not what we want. So what we're going to do is create a timeout, which we will set for a specific amount of seconds. And then after the user stops typing, this timeout will run for a few seconds. And then it will show that we're not typing. So let's go ahead and do that.
02:09
Now, at the top here, I'm going to add in a typing timeout, which I'm just going to set to null by default. And then down here, we can set that typing timeout to just a JavaScript timeout. Let's add that in. And let's go and create our method called handle typing finished,
02:31
which will invoke when the user stops typing. And let's set this to, say, three seconds. Okay, so what we're going to do is now introduce this method up here. Handle typing finished. And this, of course, is going to do something when we stop typing. So I'm going to say stopped typing. Okay, so console log that we're typing or do something
02:58
when we're typing, then set a timeout when we're not typing, and then log it out. Let's have a look. We're going to need to update this very slightly, but it should work okay. So let's just say hello, we're typing, we'll wait a few seconds. And there we go. We get stopped typing invoked as well.
03:16
Now, the problem we've got is this is firing off six times. That's not what we want. So as we type, we always want to clear this typing timeout. So let's say clear timeout, typing timeout. And that's going to clear that before we then emit the fact we're typing and then the timeout will kick in.
03:37
Let's try that out one more time. So I'm going to type hello and let's just wait a few seconds. And there we go. We get one instance of now this stop typing. So as we're typing, we're going to broadcast when we are typing. And then finally, we're going to end up with not typing.
03:54
Now, there's another issue here, and that is if we were to go ahead and say we are typing and then hit enter, that goes ahead and submits what we've got. But we always, as we finish and send a message, want to say that we've stopped typing. Once we've entered the message and hit enter to actually send this,
04:15
we want to say we've finished typing. Otherwise, the UI is going to hang around and show that we're still typing even when we've stopped and we've sent the message. So here, where we actually submit this, what we're going to do is then say handle typing finished. And that will immediately stop or show that we've stopped typing once we've sent the message.
04:36
So let's try this out again. I'm going to type hello, hit enter, and there we go. Stop typing immediately as that message has been sent. This still hangs around. So what we could also do is inside of handle typing finished, also clear this out. So let's go and take the clear time out here and add that in there as well.
04:55
So let's just try this one more time. And we should be good. And we can start to hook it up to our client to client connection. So I'm going to say hello, hit enter. And yeah, typing timeout. We just need to say this typing timeout. Let's try that again.
05:09
Hello, hit enter. And there we go. We've immediately stopped typing. That's been cleared. So we shouldn't see that roll on. OK, now that we know when we're typing and when we finish typing, let's hook this up to alert all clients of who is typing a message.

Episode summary

In this episode, we work on detecting when a user is typing in our chat interface—laying the foundation for the classic "Alex is typing..." feature!

We start by making sure our key events (like keydown and keyup) are handled properly on the <textarea> directly, rather than the entire form. This makes it easier for us to see exactly what's happening and to respond specifically to typing activity.

Next, we implement a method to track whether someone is currently typing. On every key press, we trigger some code (right now, just a quick console.log), and we set up a timeout: if the user stops typing for a few seconds, we consider them to have "stopped typing." This is classic "debouncing"—we clear any previous timeout whenever a new key is pressed, so only after a pause do we signal that typing has finished.

We also handle the little details, like making sure that when the user sends their message (hits enter), they're immediately marked as "not typing" so our UI doesn't get stuck showing them as typing.

By the end of this episode, we have reliable start/stop typing detection on the client side, with all the edge cases handled. Next up, we'll connect this with broadcasting so other users can see who's typing in real-time!

Episode discussion

No comments, yet. Be the first!