Implement Real-Time Features With WebSockets

Help me implement real-time features for the following application:

Application type: [web app / mobile backend / API]
Real-time feature needed: [live chat / notifications / collaborative editing / live dashboard / real-time updates / other]
Backend language/framework: [Node.js / Python / PHP / other]
Frontend framework: [React / Vue / vanilla JS / other]
Expected concurrent users: [small / medium / large scale]
Authentication: [authenticated users only / anonymous / both]
Data persistence needed: [yes / no]
Existing codebase: [greenfield / adding to existing app]

Provide a complete real-time implementation:

ARCHITECTURE DESIGN:
- WebSocket vs Server-Sent Events vs Long Polling decision
- Socket.io vs native WebSocket decision with justification
- Connection management strategy
- Room and namespace design (if applicable)

SERVER IMPLEMENTATION:
- WebSocket server setup
- Connection handling
- Event definitions and handlers
- Room management (join / leave / broadcast)
- Authentication middleware for WebSocket connections
- Error handling and reconnection logic
- Heartbeat/ping-pong implementation

CLIENT IMPLEMENTATION:
- WebSocket client setup
- Connection and reconnection logic
- Event listeners
- Sending and receiving messages
- UI state management for real-time data
- Optimistic updates approach
- Handling connection loss gracefully

SPECIFIC FEATURE IMPLEMENTATION:
[Full implementation of the specific feature requested]

SCALING CONSIDERATIONS:
- Horizontal scaling with Redis adapter
- Sticky sessions configuration
- Load balancer WebSocket support

SECURITY:
- Authentication for WebSocket connections
- Rate limiting
- Input validation for real-time messages
- Preventing room/channel enumeration

TESTING:
- How to test WebSocket connections
- Mock WebSocket for unit tests
- Load testing approach