Real-Time Mouse Tracking

Real-time collaborative mouse tracking using SignalR. See other users' mouse cursors as they move around the page.

Table of Contents

Interactive Demo

Test Instructions

Technical Details

References

How it works:
  • Your mouse movements are tracked in real-time within this page
  • Other users' mouse positions appear as blue cursors with labels (only on the same page)
  • Open this page in multiple browser windows/tabs to test, the site is probably not busy enough but other real users may be conneced!
Demo
Sample Content Area 1

Move your mouse over this area. Other users will see your cursor position in real-time!

Sample Content Area 2

This demonstrates how mouse tracking works across different UI elements within the page.

Type something...
Test Instructions

Step 1: Open this page in multiple browser windows or tabs

Step 2: Move your mouse around within the page

Step 3: Watch the other windows to see your cursor appear as a blue pointer

Step 4: Navigate to the Home page in one window - you'll see the cursor disappears from this page

Step 5: The connection status shows how many users are currently on this specific page

Page-Scoped Tracking: Mouse cursors are isolated per page. Users on different pages won't see each other's cursors.
Automatic Sync: Check out the Real-Time Auto Sync Example to see true real-time synchronization!
References

For more detailed information and advanced scenarios, check out these helpful resources:

SignalR with Blazor Server

Official Microsoft documentation for using SignalR with Blazor Server applications

Real-time Web Applications with SignalR

Introduction to SignalR for building real-time web applications

JavaScript Interop in Blazor

Guide for calling JavaScript functions from .NET and vice versa in Blazor

High-Frequency Realtime with SignalR (Tutorial)

Microsoft tutorial for high-frequency real-time updates with SignalR (mouse tracking, gaming, etc.)
Connected - 1 user(s) on this page
An unhandled error has occurred. Reload 🗙