Suivi de position en temps réel par WebSocket et React

Ce suivi de position par WebSocket a été réalisé en quelques jours pour un module consacré au temps réel. L’idée : afficher sur une carte tous les utilisateurs connectés, avec leurs coordonnées et les données d’accélération de leur appareil.

L’application se compose d’un serveur Node.js et d’un client React, déployés sur l’hébergement mis à disposition par l’école.

Les API de géolocalisation et DeviceMotion du navigateur ne fonctionnent que sur une page servie en HTTPS, et la connexion WebSocket doit elle aussi passer en sécurisé. Une bonne partie du temps est passée à faire tourner le serveur avec ses certificats.

Il fallait aussi gérer l’identité des utilisateurs sans vrai système de comptes : chacun choisit un pseudo, qui doit rester unique pour que les marqueurs ne se mélangent pas.

J’ai écrit un serveur Express couplé à la bibliothèque ws, qui reçoit les positions et accélérations et les rediffuse à tous les clients. Les utilisateurs sont enregistrés dans MongoDB via un modèle Mongoose, avec une route d’API dédiée.

Côté client, React affiche la carte avec react-leaflet, un marqueur par utilisateur et la liste des personnes en ligne. Le serveur est configuré en HTTPS avec des certificats Let’s Encrypt, ce qui débloque l’accès aux capteurs du téléphone.