Real-time location tracking with WebSocket and React
○ Archived
A real-time Node.js exercise: a React map where every connected user shares their position and phone acceleration, broadcast to the others over WebSocket.
Context
This WebSocket location tracker was built in a few days for a course module on real-time apps. The idea: show every connected user on a map, with their coordinates and their device’s acceleration data.
The app is made of a Node.js server and a React client, deployed on hosting provided by the school.
Challenge
The browser’s geolocation and DeviceMotion APIs only work on pages served over HTTPS, and the WebSocket connection has to be secure too. A good share of the time went into getting the server running with its certificates.
User identity also had to be handled without a real account system: everyone picks a username, which must stay unique so markers don’t get mixed up.
Approach
I wrote an Express server paired with the ws library, which receives positions and acceleration and broadcasts them to every client. Users are stored in MongoDB through a Mongoose model, with a dedicated API route.
On the client, React renders the map with react-leaflet, one marker per user and a list of who is online. The server runs over HTTPS with Let’s Encrypt certificates, which unlocks access to the phone’s sensors.
(04) — Results
Key figures- 5
- days of development
- 2
- shared data: position and acceleration
- 2
- repositories: server and client
- 22
- commits
