Rien de plus engageant qu'un compteur de joueurs en ligne en temps réel sur ton site. Ça montre que ton serveur est actif et donne envie de rejoindre. Dans ce tutoriel, on va intégrer un compteur en JavaScript vanilla qui se met à jour automatiquement.
Le concept
On va utiliser l'API publique de FiveM (cfx.re) pour récupérer le nombre de joueurs connectés, puis l'afficher sur le site avec une mise à jour toutes les 30 secondes.
Étape 1 : Le HTML
Ajoute le compteur à l'endroit souhaité dans ton index.html :
| 1 | <div class="player-counter"> |
| 2 | <div class="player-counter-dot"></div> |
| 3 | <span id="player-count">—</span> |
| 4 | <span>joueurs en ligne</span> |
| 5 | </div> |
Étape 2 : Le CSS
| 1 | .player-counter { |
| 2 | display: inline-flex; |
| 3 | align-items: center; |
| 4 | gap: 8px; |
| 5 | padding: 8px 16px; |
| 6 | border-radius: 12px; |
| 7 | background: rgba(0, 219, 121, 0.08); |
| 8 | border: 1px solid rgba(0, 219, 121, 0.15); |
| 9 | font-size: 14px; |
| 10 | color: #94a3b8; |
| 11 | } |
| 12 | |
| 13 | .player-counter-dot { |
| 14 | width: 8px; |
| 15 | height: 8px; |
| 16 | border-radius: 50%; |
| 17 | background: #00DB79; |
| 18 | animation: pulse-dot 2s ease-in-out infinite; |
| 19 | } |
| 20 | |
| 21 | #player-count { |
| 22 | font-weight: 700; |
| 23 | color: #00DB79; |
| 24 | font-size: 18px; |
| 25 | } |
| 26 | |
| 27 | @keyframes pulse-dot { |
| 28 | 0%, 100% { opacity: 1; transform: scale(1); } |
| 29 | 50% { opacity: 0.5; transform: scale(0.8); } |
| 30 | } |
Étape 3 : Le JavaScript
Voici le script qui récupère les données depuis l'API FiveM et met à jour le compteur :
| 1 | // Remplace par l'ID de ton serveur FiveM (cfx.re) |
| 2 | const SERVER_ID = "abc123"; |
| 3 | const API_URL = `https://servers-frontend.fivem.net/api/servers/single/${SERVER_ID}`; |
| 4 | |
| 5 | const playerCountEl = document.getElementById("player-count"); |
| 6 | |
| 7 | async function updatePlayerCount() { |
| 8 | try { |
| 9 | const response = await fetch(API_URL); |
| 10 | if (!response.ok) throw new Error("API error"); |
| 11 | |
| 12 | const data = await response.json(); |
| 13 | const players = data.Data?.clients || 0; |
| 14 | const maxPlayers = data.Data?.sv_maxclients || 64; |
| 15 | |
| 16 | playerCountEl.textContent = `${players}/${maxPlayers}`; |
| 17 | } catch (error) { |
| 18 | playerCountEl.textContent = "—"; |
| 19 | console.warn("Impossible de récupérer le nombre de joueurs:", error); |
| 20 | } |
| 21 | } |
| 22 | |
| 23 | // Mise à jour initiale + toutes les 30 secondes |
| 24 | updatePlayerCount(); |
| 25 | setInterval(updatePlayerCount, 30000); |
N'oublie pas d'inclure le script dans ton index.html :
| 1 | <script src="js/player-counter.js"></script> |
Pour trouver ton SERVER_ID, rends-toi sur le panel cfx.re de ton serveur. L'ID est la partie après cfx.re/join/ dans ton lien de connexion.
Variante : serveur Minecraft
Pour un serveur Minecraft, tu peux utiliser l'API mcsrvstat.us qui est gratuite et ne nécessite pas de clé API :
| 1 | // Remplace par l'IP de ton serveur Minecraft |
| 2 | const SERVER_IP = "play.monserveur.fr"; |
| 3 | const API_URL = `https://api.mcsrvstat.us/2/${SERVER_IP}`; |
| 4 | |
| 5 | const playerCountEl = document.getElementById("player-count"); |
| 6 | |
| 7 | async function updatePlayerCount() { |
| 8 | try { |
| 9 | const response = await fetch(API_URL); |
| 10 | const data = await response.json(); |
| 11 | |
| 12 | if (data.online) { |
| 13 | const players = data.players?.online || 0; |
| 14 | const max = data.players?.max || 100; |
| 15 | playerCountEl.textContent = `${players}/${max}`; |
| 16 | } else { |
| 17 | playerCountEl.textContent = "Hors ligne"; |
| 18 | } |
| 19 | } catch (error) { |
| 20 | playerCountEl.textContent = "—"; |
| 21 | } |
| 22 | } |
| 23 | |
| 24 | updatePlayerCount(); |
| 25 | setInterval(updatePlayerCount, 30000); |
Aller plus loin
Voici quelques améliorations possibles :
- Animation du nombre : utilise une librairie comme CountUp.js pour animer le changement de valeur
- Historique : affiche un graphique des joueurs sur 24h avec Chart.js
- Statut du serveur : change la couleur du dot (vert = en ligne, rouge = hors ligne)
- Liste des joueurs : affiche les pseudos des joueurs connectés dans un tooltip
N'appelle pas l'API trop fréquemment (pas plus d'une fois toutes les 15 secondes). Un intervalle de 30 secondes est un bon compromis entre réactivité et respect des limites de l'API.
Ton compteur est en place ! Les visiteurs de ton site verront en temps réel combien de joueurs sont connectés, ce qui rend ton serveur plus attractif et vivant.