Realtime with Laravel Reverb
Playing
18. Whispering in action

Episodes

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

Transcript

00:00
OK, let's go ahead and build out this mouse tracking application that we saw from the introduction. And this isn't going to work perfectly,
00:06
but it will give you a really good idea as to how many events you can actually push to your reverb server. OK, let's get rid of everything that we've got inside of here, except the channel, because we still want to be connected up to that channel.
00:19
And down here, let's just design out the thing that we want to see when a user moves their mouse. So if I'm moving my mouse over here, Mabel should see a little icon with my name.
00:31
And the same thing over this side. Alex should see Mabel is moving her mouse. OK, so we're going to go and create out a div container inside of here. And let's go and add in the user's name.
00:44
So this is just going to be hard coded for now, because, of course, we need to know who is moving their mouse. Let's go ahead and paste in an SVG here. You can grab this in the GitHub source code
00:54
if you want to copy and paste it across. And of course, the moment doesn't look great. OK, let's go on this container and we'll make this flex with item center. So both of these sit in the middle.
01:06
Let's make this absolutely position, because depending on who's moving their mouse, we're going to need to move this. We'll set leading to none so we don't get any line height. And we'll set a specific height of three.
01:18
And we'll do a spacing on the x-axis of one. So that should already look a little bit better. Let's go down to the name really quickly and just change this over to a text of small and font of semi bold.
01:31
And that's what we want to see. Now, while we're building this out, let's go and just set a background color of blue 500 on here, just so we can see that these are nicely tightly wrapped. And that'll give us a bit more accuracy.
01:44
Like I said, this isn't going to work perfectly, because everyone's browser viewports are different. There are much better solutions, but we're just having fun here. OK, let's take a look at what we want to do here.
01:55
So first of all, we want to grab the current width of our browser window. So to do that, we're going to grab the inner width of the window. And we're going to do exactly the same thing for the height as well. So we'll say inner height.
02:10
That will give us the dimensions of the inside of our browser. What we now want to do is define out an onMouseMove event. So when we move our mouse, we want to broadcast what position our mouse is on. So here, if we just console log on the event x and the event y,
02:30
let's go over and try this out. And you can see, sure enough, this gives us all of the movements. So each of these movements is going to broadcast an event using a whisper over to our reverb server.
02:42
And you can see there are a ton here. So we'll see how this handles it. OK, so let's go ahead and actually broadcast this. So let's say channel whisper.
02:52
We are going to say mouse move. That kind of makes sense. And inside of the payload, we want to get the details about the user who is moving their mouse.
03:00
So again, because we're not working with an event on the client on the back end, this means that we need to put the data specifically in here. If this was an event on the back end, we would just use the user model. But for now, we're going to JSON encode a bunch of data
03:15
about the currently authenticated user. Let's grab the currently authenticated user and just grab their ID and their name. And then we want to output or broadcast the position of the mouse.
03:30
So we want an x-axis. That's e.x, which we've already seen logged. And we want y. Of course, that's e.y.
03:38
OK, so now that we've done this, let's go over to the browser and just move our mouse around. And this is now whispering or broadcasting that event. We can see that over in the terminal.
03:47
So let's, well, we can't at the moment, but let's cancel it off and run this with the debug option just to check. And let's do a few mouse movements, head back over, and there we go. So all of these are now being broadcast.
04:00
Great. OK, I'm going to go ahead and cancel this off and rerun this without debug so we don't get a crash. And let's go ahead and picking these events up.
04:10
So once again, somewhere up here or down below, we're going to listen for this whisper. So let's say listen for whisper. And of course, we're going to listen to that mouse move event.
04:22
We'll get the closure in here with all of the event details. So let's go and pull that event in. And let's just log on that event to make sure we can see it. So as you can see, all of them positions are now coming through
04:37
and the same for Mabel as well. OK, let's go over and attach who is moving which mouse. So let's go and add some data in here. Let's call this user positions.
04:50
And by default, we'll just set that to an empty array. And then we'll start to push the users who are currently moving their mouse if they don't already exist. So let's find in user positions the user that we are currently
05:04
seeing moving their mouse. So we'll take P as position. We'll compare the user ID from that payload to the event user ID, or this is the payload and this is the potentially existing
05:18
user within user positions. And then if they don't exist, we'll push them. So we're going to say if the type of the user that we're trying to find in the list equals undefined,
05:31
and we'll just do a non-strict comparison on that, then we want to push them. So we'll say user positions and push. And we'll push all of that data.
05:40
And then we'll just return. Now, otherwise, down here, we'll update the user position. So basically, if they're not already in the list, push them. But then always update their position if they are in the list.
05:52
So we'll just overwrite the position of that user to the x and y-axis that we get through. So we'll say event position x. And let's spell that correctly.
06:03
And we'll say event position and y as well. OK, so now that we've done that, our user positions object should be filled with all this data. We can't see it at the moment.
06:15
Of course, what we could also do down here is console.log out the user positions. And that will give us a better idea. So if I just move that, you can see, sure enough,
06:26
we get all of that data in there with the user and the current position of the maps as well. OK, so now that we've got all of this data, let's go and update this now template.
06:37
So we're going to wrap everything that we've got here in a template. And we're going to iterate over all of the users who are currently moving their maps. So let's pull this into this template.
06:49
And we want to iterate. So x for user in user position. And then we want to basically change the position of this based on the position that we get in here.
07:01
So for this, we can use x bind style. And we're going to bind in the left and the right. So we'll say left is going to be 0 pixels, for example. Right is going to be 0 pixels.
07:14
But then we can just replace these values out. So in here, let's take user position and x. And of course, we'll do exactly the same thing for user position and y. And because we have this set to absolute,
07:29
as this event rolls in and updates the values in user position, which we've done here, it will change the position of the cursor. OK, let's go over and just check if this is working. We've got an error here, user position not defined.
07:43
So let's just find that, user positions. And there we go. OK, so this isn't working great at the moment. Let's just come over and see what we've done.
07:51
So we've got left and right. This needs to be left and top. And I've just noticed there needs to be p there for the pixels. OK, let's go over and have a look.
07:59
And as you can see, this is now keeping track really nicely. Now, it's not great. The window sizes that we've got here are exactly the same height and width, which means, of course, everything is working nicely.
08:13
Now, we can kind of get around this by doing some division and multiplication between pushing this event. So what we can do is we can take the x-axis for the position that we're pushing and we can divide it by the width of the window.
08:28
And we can do the same thing for the height of the window just here. And then when it comes through, we can make it relative by just multiplying this by the width and multiplying that by the height of the user who is currently viewing the cursor.
08:42
So this works nicely now. And it kind of works even if we have a smaller screen size. But you can see it's slightly off. We're not going to focus on making this really accurate.
08:54
But as you can see now, whoever's moving their cursor, it works really nicely. Now, the last thing we need to do is just change the name over. So we can just use x-text here. We can grab the user and we'll grab their name.
09:07
So let's go over and have a look. And yeah, we just need to say user username. And there we go. So when I'm moving over here, it shows Alex is moving.
09:18
And when I move over here, it shows Mabel's moving. And regardless of how many clients are connected here, this is always going to be pushed. So if we have multiple users, multiple windows,
09:27
we could see multiple people moving their cursors at the same time. So although this example isn't perfect, it does show you that you can send and broadcast a huge amount of events to your WebSocket server and have these picked up by all clients.

Episode summary

In this episode, we jump into building a real-time mouse tracking application, just like we talked about in the intro. The goal is to let users see each other's mouse cursors moving around the page, names included! It's a fun demo to show off just how many events you can throw at your backend using "whispers" via your WebSocket server (Reverb in this case).

We start by stripping down the example to just the essentials and setting up a simple UI for the mouse tracker, complete with hardcoded names and a cursor icon (SVG). That way, as you move your mouse, your name and cursor show up for other users, and vice versa. There’s lots of tweaking to the UI layout to make sure things look alright.

Next, we walk through tracking the actual window dimensions and emitting mouse move events for every mouse movement. We build out a payload that includes the user's info and cursor position. You’ll see how quickly your console can fill up with those events! But it’s a great way to see real-time updates flying back and forth.

After broadcasting, we also set up a listener on the frontend to pick up these whispered events. We keep an array of user positions and either add users when they first appear or update their position as they move. Then, we iterate over these positions to render everyone's mouse and name live in the DOM, using absolute positioning and some simple calculations to keep things synced up even if window sizes differ (not 100% perfect, but close enough for a demo!).

To wrap up, we fine-tune the name rendering and show that as different users move their mice (even in different windows), everyone updates live. It's not production perfect, but it’s an awesome way to explore the power of real-time event broadcasting with whispers and WebSockets.

Episode discussion

No comments, yet. Be the first!