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
01. Introduction
2m 53s
0%
02. Setting up
1m 38s
0%
03. Scaffolding chat rooms
6m 11s
0%
04. Building a chat textarea
8m 38s
0%
05. Seeding fake messages in order
4m 8s
0%
06. Creating a Pinia store
3m 48s
0%
07. Creating the messages endpoint
5m 9s
0%
08. Fetching messages into our store
4m 18s
0%
09. Ordering messages with flexbox
3m 59s
0%
10. Using the intersection observer API
5m 5s
0%
11. Fetching and pushing previous messages
3m 15s
0%
12. Storing and appending messages
6m 18s
0%
13. Setting up Reverb
3m
0%
14. Broadcasting new messages
9m 49s
0%
15. Handling broadcasted messages in our store
4m 54s
0%
16. Fetching online users
3m 6s
0%
17. Storing online user state
4m 46s
0%
18. Keeping online users in sync
5m 50s
0%
19. Detecting typing events
3m 56s
0%
20. Showing when a user is typing
8m 3s
0%
21. Better formatted dates
2m 44s
0%
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.
21 episodes•1 hr 41 mins•9 months ago
Overview
Using the power of Reverb, let’s build a realtime multi-room chat with Laravel and Vue with Inertia, pulling in Pinia for state management.
We’ll cover:
- Using the Intersection Observer API to automatically load previous chat messages
- State management with Pinia
- Using presence channels to show online users for each room
- Client-to client communication to show who’s typing
- Using flexbox tricks to keep messages scrolled into view as they roll in
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!