Live Tracking Demo
Interactive sandbox simulating the WebSocket connection flow for real-time vehicle tracking
This interactive demo simulates the full WebSocket connection flow for live vehicle tracking. No real data or connections are used — everything is mocked locally in your browser.
The demo walks through the 4-step connection lifecycle:
- Connect to the WebSocket server (
wss://ws-live.yipii.io) - Authenticate via the broadcasting auth endpoint
- Subscribe to a private channel
- Receive real-time location events
Disconnected
0 events
Connection Flow
1. Connect
2. Authenticate
3. Subscribe
4. Receive Events
Event Log
No events yet. Start the demo to see live updates.
Live Position
What You're Seeing
- Connection Flow (left panel) — Each step shows the actual Pusher protocol messages exchanged
- Event Log (right panel) — Raw events as they would arrive from the server
- Live Position (bottom) — SVG visualization of the vehicle moving through Valletta, Malta
Implementing This in Your App
The demo simulates what happens when you connect using the Pusher JS client. See the Live Tracking & WebSocket guide for full implementation details, including:
- Authenticated fleet tracking (OAuth2 Bearer token)
- Public tracking links (session-based auth)
- Mobile SDKs (Swift, Kotlin)
- Security, scaling, and reconnection patterns
Key Differences from Production
| Demo | Production |
|---|---|
| Mocked data, local timers | Real GPS data from trackers |
| Fixed 2-second intervals | Variable intervals (10-30s moving, 60s idle) |
| Single vehicle, 8 waypoints | Multiple assets, continuous stream |
| No authentication | OAuth2 or session token required |
Was this page helpful?