Chating Mousie
This is a real-time collaborative chat application with a unique twist: instead of traditional chat rooms, users can see each other’s messages positioned at their mouse cursor locations on the screen.
What Does It Do?
The application creates a dynamic, mouse-following chat experience where:
- Users type messages that appear at their mouse cursor position
- Other users see these messages floating at the sender’s mouse location in real-time
- Each user gets a unique ID and random color for identification
- Messages follow users’ mouse movements across the screen
- The chat data auto-clears every minute to keep conversations fresh
Technical Architecture
Backend (src/app.ts
):
- WebSocket Server: Handles real-time communication between clients
- HTTP Server: Serves static frontend files from the
dist/frontend
directory - In-memory Database: Simple object that stores user data (messages, positions, colors)
- Cron Job: Clears the database every minute using
node-cron
- Static File Serving: Handles various file types with proper MIME types
Frontend (dist/frontend/
):
- HTML: Simple interface with a single input field
- JavaScript: Handles WebSocket connections, mouse tracking, and dynamic message rendering
- CSS: Styles the floating chat containers and input field
Key Features
- Real-time Communication: Uses WebSocket for instant message broadcasting
- Mouse Position Tracking: Messages appear where users’ cursors are located
- Dynamic User Identification: Each user gets a unique UUID and random color
- Spatial Chat Experience: Messages are positioned absolutely on the screen
- Auto-cleanup: Database clears every minute to prevent data buildup
- Responsive Design: Messages have max-width constraints and proper word wrapping
How It Works
- User connects → Gets unique ID and color stored in localStorage
- User types/moves mouse → Data sent via WebSocket to server
- Server broadcasts user data to all other connected clients
- Other users see messages positioned at sender’s mouse location
- Database auto-clears every minute for fresh conversations
This is a creative take on chat applications, creating a shared spatial environment where conversations happen based on mouse movements rather than traditional message threads.
To start this project on local
- clone the repo
- run
npm install
- run
tsc
- run
node ./dist/app.js
Frontend code is in default dist/Frontend folder folder.
Deployed Link:
https://chating-mousie.up.railway.app/
Example:
https://github.com/user-attachments/assets/a61f3757-9d84-4cfc-9f9c-7fea639ef590