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.