Gestion d'un classement de scores

Version imprimable

Bonjour,

je souhaite mettre en place un petit jeu web assez simple en javascript (pas de souci pour cet aspect là) en gérant un classement des joueurs en fonction de leur score maximal. N'ayant pas de BDD accessible, je voudrais sauvegardé les scores au sein d'un fichier JSON. J'ai toutefois quelques soucis sur les méthodes à utiliser.

Mon but serait :
- de pouvoir, en fin de chaque partie, vérifier si le joueur a déjà un score sauvegardé dans le JSON. Si oui, on le met à jour; si non, on l'ajoute
- les score n'ont pas besoin d'être triés dans le JSON, le javascript qui les récupère peut le faire
- pour lire/écrire dans le fichier JSON, je pense passer par un appel de XMLHttpRequest

Je ne sais pas si je peux mettre à jour 1 seul score dans le fichier JSON sans avoir à le ré-écrire entièrement.

Pour l'instant j'ai cette structure de fichier :

rankJSON.js
Code:

1 2 3 4 5 6 7 var ranking = [ {"name":"player", "score":100}, {"name":"ohterOne", "score":102}, {"name":"someone", "score":88}, {"name":"somebody", "score":123}, {"name":"whoAreYou", "score":67} ];
Je pense utiliser XMLHTTPRequest pour faire un appel à un fichier PHP qui se chargerait de l'écrire dans le fichier lors d'insertion ou de modification mais je ne sais pas si je peux modifier une partie du fichier.

Auriez vous des conseils pour m'aider à avancer?

Merci d'avance.

La façon de faire la plus facile à coder est sans doute de traiter le JSON dans son ensemble, en le lisant en entier puis en le réécrivant en entier. En effet, PHP t’offre des facilités avec les fonctions file_get_contents et file_put_contents. Pour manipuler le JSON en mémoire, il suffit alors de décoder / encoder les chaînes avec json_decode et json_encode.

Attention, avant PHP 7.3 (version sortie ce mois-ci) ces fonctions json ont le mauvais goût de ne pas lever d’exception en cas d’erreur, il faut donc aller chercher les messages d’erreur à la main.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <?php error_reporting(E_ALL); $contents = file_get_contents('chemin/du/fichier.json'); if (false === $contents) { die('Erreur lors de la lecture du fichier'); } $json = json_decode($contents); if (null === $json) { die('Erreur lors du décodage json: ' . json_last_error_msg()); } ... ... ... $encodedString = json_encode($json); if (false === $encodedString) { die('Erreur lors de l’encodage json: ' . json_last_error_msg()); } $result = file_put_contents('chemin/du/fichier.json', $encodedString); if (false === $result) { die('Erreur lors de l’écriture du fichier'); }
L’objet json en mémoire volatile de ton script PHP ressemblera à ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 array(5) { [0] => class stdClass#1 (2) { public $name => string(6) "player" public $score => int(100) } [1] => class stdClass#2 (2) { public $name => string(8) "ohterOne" public $score => int(102) } [2] => class stdClass#3 (2) { public $name => string(7) "someone" public $score => int(88) } [3] => class stdClass#4 (2) { public $name => string(8) "somebody" public $score => int(123) } [4] => class stdClass#5 (2) { public $name => string(9) "whoAreYou" public $score => int(67) } }
Pour accéder par exemple au score du second item, il faut écrire ceci :

Code:

echo $json[1]->score;

Si tu préfères travailler avec des tableaux associatifs, il faut passer true en second paramètre à json_decode, ce qui te permettra d’accéder aux propriétés de cette façon :

Code:

echo $json[1]['score'];

Choisis selon ton style.

La partie la plus compliquée consiste à retrouver un item à partir du nom du joueur. Tu peux le faire à la main avec une bonne vieille boucle foreach :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 $player = 'someone'; $found = false; foreach ($json as $item) { if ($item->name === $player) { $found = true; break; } } if ($found) { echo 'Score = ' . $item->score; } else { echo 'Joueur ' . $player . ' pas trouvé'; }
Ou bien avec array_filter :
Code:

1 2 3 4 $player = 'someone'; $filtered_array = array_filter($json, function ($item) use ($player) { return $item->name === $player; });
Cette dernière technique te permettra de repérer les doublons s’il y en a.

Ton idée de vouloir réécrire seulement une partie du fichier est une bonne idée, on sent bien intuitivement que ça peut augmenter la performance. Seulement, il faudrait gérer les décalages d’octets, par exemple si le score passe de 67 à 123 : il y a un chiffre en plus, ça fait un octet en plus dans le fichier, et là il faut décaler tous les octets suivants jusqu’à la fin du fichier. Grosse perte de temps.

En fait, si on prend un peu de recul, on se rend compte qu’on est en train de faire une sorte de moteur de stockage, exactement comme une base de données. Ces dernières proposent souvent un type de colonne à taille fixe, par exemple les types CHAR(40), INT(5), etc.

En ajoutant un peu de complexité dans ton script PHP, tu pourrais contraindre le champ "name" à avoir toujours une longueur de 15 caractères par exemple, et le champ "score" serait converti en string pour pouvoir contraindre sa longueur de la même manière (en ajoutant des zéros devant quand il y a besoin).

Par exemple :
Code:

1 2 3 4 5 6 7 [ { "name": ".........player", "score": "100" }, { "name": ".......ohterOne", "score": "102" }, { "name": "........someone", "score": "088" }, { "name": ".......somebody", "score": "123" }, { "name": "......whoAreYou", "score": "067" } ]
Tout ça représente beaucoup d’efforts, et on n’est même pas sûrs que ça sera vraiment plus efficace, il faudrait faire des tests. Les bases de données utilisent des moteurs de stockage qui ont été moult fois testés et éprouvés.

D’autre part, comme indiqué dans la doc, la fonction file_get_contents est assez intelligente pour utiliser un tampon de mémoire. Je ne sais pas ce qu’il en est de json_decode, mais mon conseil c’est de ne pas trop te préoccuper de la performance de ton script. Tant que ton fichier ne fait pas des centaines de milliers de lignes, tu ne verras probablement pas d’impact significatif.

Bien sûr, l’idéal serait de pouvoir utiliser une vraie base de données ;)

26/12/2018, 10h01
zoidrums

Merci pour cette réponse très complète :)

Je me pose toutefois une question : si j'efface et ré-écris le fichier JSON à chaque mise à jour de score, cela ne risque-t-il pas de poser problème si 2 joueurs terminent leur partie en même temps?

Le joueur D va récupérer le fichier qui contiendra la liste A,B,C
Le joueur E va récupérer le fichier qui contiendra aussi la liste A,B,C
Le joueur D va écraser le fichier avec la liste A,B,C,D
Le joueur E va écraser le fichier avec la liste A,B,C,E

Du coup, on perdrait le score du joueur D :calim2:

Pour pallier le problème tu peux bloquer l'accès au fichier en écriture le temps que les mises à jour soient faites.

A peine testé :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
// on ouvre le fichier
$handle     = fopen('monfichier.txt','w+');
// bloque et teste l'état du fichier - boucle tant que le fichier n'est pas libéré
while (!flock($handle,LOCK_EX))
{
 // on ne fait rien
}
// quand on arrive ici c'est qu'on vient de bloquer le fichier
// ceux qui arrivent avant la libération seront en attente grâce au while... mise à jour du fichier
// echo "je mets à jour le fichier <br/>";
// sleep(10);
// on libère le fichier
flock($handle,LOCK_UN);
// on ferme le fichier
fclose($handle);

J'ai tenté d'assembler le tout mais j'ai une erreur 500. J'avais oublié que le PhP était moins pratique à débugger que le JS :calim2:

Voila mon code source :

La partie JS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function updateScores() {
	xhr=getXMLHttpRequest();
	xhr.open("POST", "./js/log.php", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send("name="+pseudo+"&score="+score.count);
}
 
function getXMLHttpRequest() {
	if (xhr==null) {
		if (window.XMLHttpRequest || window.ActiveXObject) {
			if (window.ActiveXObject) {
				try {
					xhr = new ActiveXObject("Msxml2.XMLHTTP");
				} catch(e) {
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
			} else {
				xhr = new XMLHttpRequest(); 
			}
		} else {
			alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
			return null;
		}
	}
	return xhr;
}

Et le fichier log.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<?php
 
// 1 : on récupère les variables
$nomFichier = './rank.js';
$pseudo = $_POST["pseudo"];
$score = $_POST["score"];
 
// 2 : on ouvre le fichier
$monfichier = fopen($nomFichier, 'w+');
 
while (!flock($monfichier,LOCK_EX)) {
 // tant que le fichier n est pas dispo, on ne fait rien
}
 
// 3 : on lit et on ecrit dans le fichier
$contents = file_get_contents($nomFichier);
if (false === $contents) {
  die('Erreur lors de la lecture du fichier');
}
 
$json = json_decode($contents);
if (null === $json) {
    die('Erreur lors du décodage json: ' . json_last_error_msg());
}
 
//recherche
$found = false;
foreach ($json as $item) {
  if ($item->name === $pseudo) {
      $found = true;
      break;
  }
}
if ($found) {
    $player = $item;
	if ($player->score < $score) {
		$player->score = $score;
	}
} else {
    $player = array('pseudo' => $pseudo, 'score' => $score);
	array_push($json, $player);
}
 
$encodedString = json_encode($json);
if (false === $encodedString) {
    die('Erreur lors de l’encodage json: ' . json_last_error_msg());
}
 
$result = file_put_contents($nomFichier, $encodedString);
if (false === $result) {
    die('Erreur lors de l’écriture du fichier');
}
 
// 4 : quand on a fini de l'utiliser, on deverrouille et on ferme le fichier
flock($monfichier,LOCK_UN);
fclose($monfichier);
 
?>

28/12/2018, 21h19
badaze

Un truc.

il faut débloquer/fermer le fichier avant de faire les die.
29/12/2018, 11h12
zoidrums

J'ai ajouté ces parties là mais ça n'enlève pas mon erreur 500.

Lorsque le script est exécuté, ça mouline quelques temps et ça me sort l'erreur 500. Le fichier rank.js et alors écrasé par un fichier vide :?

En fait il y a plusieurs problèmes.

Tu transmets le paramètre "name" mais dans la page php tu utilises "pseudo".
Tu fais un lock sur le fichier .js mais ensuite tu utilises file_get_contents et file_put_contents. Etrangement le fopen w+ initialise le fichier à vide. Windows ?
J'ai fait un lock sur un fichier "tiers" et utilisé file_get... et file_put...
Chez moi ça inscrit les scores.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script>
var xhr = null;
function updateScores() {
 xhr=getXMLHttpRequest();
 xhr.open("POST", "./js/log.php", true);
 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 //xhr.send("name="+pseudo+"&score="+score.count); modifié car pas tout le script pour gérer score.count
 xhr.send("name="+pseudo+"&score="+score);
}
 
function getXMLHttpRequest() {
 if (xhr==null) {
  if (window.XMLHttpRequest || window.ActiveXObject) {
   if (window.ActiveXObject) {
    try {
     xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
     xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
   } else {
    xhr = new XMLHttpRequest(); 
   }
  } else {
   alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
   return null;
  }
 }
 return xhr;
}
var pseudo = 'joe';
var score  = 100;
pseudo = prompt('Pseudo');
score  = prompt('Score');
updateScores();
</script>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
 
<?php
 
// 1 : on récupère les variables
$nomFichier = './rank.js';
$pseudo = $_POST["name"];
$score  = $_POST["score"];
$fichierLock = './lock.txt';
 
// 2 : on ouvre le fichier
$handleLock = fopen($fichierLock, 'w+');
 
while (!flock($handleLock,LOCK_EX)) {
 // tant que le fichier n est pas dispo, on ne fait rien
}
 
// 3 : on lit et on ecrit dans le fichier
$contents = '';
if (file_exists($nomFichier)) {
 $contents = @file_get_contents($nomFichier);
 if (false === $contents) {
   flock($handleLock,LOCK_UN);
   fclose($handleLock);
   die('Erreur lors de la lecture du fichier');
 }
 
 $json = json_decode($contents,true);
 if (null === $json) {
   flock($handleLock,LOCK_UN);
   fclose($handleLock);  
   die('Erreur lors du décodage json: ' . json_last_error_msg());
 }
 //recherche
 $found = false;
 foreach ($json as $key => $item) {
   if ($item['name'] === $pseudo) {
   if ($item['score'] < $score) {
   $json[$key]['score'] = $score;
   }
   $found = true;
   break;
   }
 }
 if (!$found) {
  $player = array('name' => $pseudo, 'score' => $score);
  array_push($json, $player);
 } 
} else {
 $json   = array();
 $json[] = array('name' => $pseudo, 'score' => $score);
}
$encodedString = json_encode($json);
if (false === $encodedString) {
 flock($handleLock,LOCK_UN);
 fclose($handleLock); 
    die('Erreur lors de l?encodage json: ' . json_last_error_msg());
}
 
$result = file_put_contents($nomFichier, $encodedString);
if (false === $result) {
 flock($handleLock,LOCK_UN);
 fclose($handleLock);  
    die('Erreur lors de l?écriture du fichier');
}
 
// a enlever - pour test seulement
//sleep(10); 
 
// 4 : quand on a fini de l'utiliser, on deverrouille et on ferme le fichier
flock($handleLock,LOCK_UN);
fclose($handleLock);
 
?>

PS : aucune erreur 500 de mon côté à aucun moment.

31/12/2018, 01h12
Watilin

Citation:

Envoyé par zoidrums

Le fichier rank.js et alors écrasé par un fichier vide :?

Citation:

Envoyé par badaze

Etrangement le fopen w+ initialise le fichier à vide. Windows ?

C’est indiqué dans la doc de fopen que le mode 'w' / 'w+' vide le fichier. Et comme on est obligé de l’appeler avant flock, le fichier est vidé quel que soit le résultat du flock.

D’autre part, la doc indique un mode 'c' qui, je cite, « peut être utile pour obtenir un verrou ». En y regardant de plus près, le mode de fopen n’est pas important ici car file_get_contents suit sa propre logique d’accès au fichier ; mais d’un point de vue méta, pour la maintenance, ça peut être pertinent de choisir 'c' pour indiquer notre intention.

Citation:

Envoyé par zoidrums

Lorsque le script est exécuté, ça mouline quelques temps et ça me sort l'erreur 500.

Citation:

Envoyé par badaze

PS : aucune erreur 500 de mon côté à aucun moment.

Je pense que PHP part en boucle infinie et est arrêté par Apache ou par un autre processus superviseur. Il faut faire attention avec le boucles du style while (...) { ne rien faire }. On appelle ça de l’attente active et c’est généralement considéré comme un anti pattern, car ça monopolise le CPU.

À mon avis, c’est plus pertinent de répondre tout de suite avec un message d’erreur, et de faire en sorte que le navigateur renvoie une requête un plus tard. Si on cherche la petite bête, ça a une petite probabilité de créer une situation de « famine » de temps à autre, mais je pense que ce n’est pas trop grave tant que le site n’a pas une trop grande fréquentation.

Ou sinon, j’ai une autre idée mais je ne sais pas si ça va marcher : mettre un petit sleep (ou usleep) dans la boucle. En théorie ça permettrait de « camoufler » la boucle, en disant au CPU de travailler sur autre chose pendant un bref instant. En pratique je ne sais pas, peut-être que certains superviseurs sont capables de détecter quand même la boucle. Et si l’attente est trop longue, là on risque d’atteindre le timeout HTTP. Bref, c’est à tester.
31/12/2018, 11h12
badaze

@Watilin.
Pour fopen. Il faut que j’apprenne à lire.

Pour la boucle vide. Je tablais sur une attente de quelques millisecondes. Mais tu as raison ce n’est pas une bonne solution. Une boucle potentiellement infinie n’est jamais une bonne solution surtout si sa complétion dépend d’une action externe. Sur AS400 je gérerais ça avec une file d’attente (job queue). Chaque demande de modification serait mise dedans et chaque demande serait traitée en séquentiel donc aucun souci d’accès concurrent. Certes le traitement serait asynchrone mais ce ne serait pas grave je pense. Je pense aussi que cela peut se faire avec Cron mais je ne connais pas.
J’avais pensé à sleep mais un délai d’au moins une seconde me paraissait trop long. Je ne connaissais pas usleep qui du coup me semble plus adapté. Néanmoins on est toujours à la merci d’un dysfonctionnement qui produirait une boucle infinie d’autant plus qu’ajax est utilisé. Potentiellement on se crée son propre Denial of service :mrgreen:.
La question est. Pourquoi faut-il sauvegarder tous les scores dans un seul fichier ? Si son score n’intéresse que l’utilisateur en question le plus simple est d’avoir un fichier par utilisateur. Avec ce système aucun risque de perdre des données (hors dysfonctionnement système / connexion).
EDIT : sur ce dernier point je me réponds. J'avais oublié ce qui était indiqué au message #3.

1 pièce(s) jointe(s)

Une approche avec un fichier score par personne.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<script>
var xhr     = null;
var pseudo  = "";
var score   = "";
var joueurs = "";function updateScores() {
 xhr=getXMLHttpRequest();
 xhr.open("POST", "./js/log.php", true);
 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 
 xhr.onreadystatechange = function() {
      console.log(xhr.response); 
   document.getElementById('ranks').innerHTML = xhr.response;
    }
 //xhr.send("name="+pseudo+"&score="+score.count); modifié car pas tout le script pour gérer score.count 
 xhr.send("name="+pseudo+"&score="+score+"&joueurs="+joueurs);
}
 
function getXMLHttpRequest() {
 if (xhr==null) {
  if (window.XMLHttpRequest || window.ActiveXObject) {
   if (window.ActiveXObject) {
    try {
     xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
     xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
   } else {
    xhr = new XMLHttpRequest(); 
   }
  } else {
   alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
   return null;
  }
 }
 return xhr;
}
function toto()
{
 pseudo  = document.getElementById('pseudo').value;
 score   = document.getElementById('score').value;
 joueurs = document.getElementById('joueurs').value;
 updateScores();
}
</script>
Joueurs en ligne : <input type='text' id='joueurs' size=60 /><br/>
Pseudo : <input type='text' id='pseudo' />
Score : <input type='text' id='score' /><br/>
<input type='button' onclick="toto()" value="Envoi"/>
<div id="ranks"></div>

log.php
En entrée on a le pseudo et le score de la personne ainsi que la liste des joueurs. Le script crée un fichier score pour le joueur en cours. Puis crée un fichier .js par joueur contenant les scores de tous les joueurs sous forme de json. Néanmoins il retourne le classement des joueurs trié en décroissant. En fait je pense que cette solution est bien meilleure que la production d'un fichier JSON qu'il va falloir aller lire et traiter.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<?php
 
// 1 : on récupère les variables
$pseudo     = $_POST["name"];
$score      = $_POST["score"];
$joueurs    = explode('|',$_POST["joueurs"]);$nomFichier    = "./$pseudo.score";
$nomFichierBak = "./$pseudo.bak";
if (file_exists($nomFichier)) {
 // suppression du fichier back-up
 @unlink($nomFichierBak);
 // rename fichier score
 rename($nomFichier,$nomFichierBak);
}
file_put_contents($nomFichier, $score);
$json = array();
foreach($joueurs as $joueur)
{
 $nomFichier    = "./$joueur.score";
 $nomFichierBak = "./$joueur.bak";
 
 $score = @file_get_contents($nomFichier);
 if ($score===false)
 {
  $score = @file_get_contents($nomFichierBak);
  if ($score===false)
  {
   $score = "+++";
  }
 }
 // Pour trier facilement le tableau en fonction du score 
 $index  = str_repeat('0', 12-strlen($score)).$score;
 
 $json["$index$joueur"] = array('name' => $joueur, 'score' => $score);
}
// tri décroissant
krsort($json);
// création fichier ranks par personne 
$nomFichierRanks = "./$pseudo.js";
$encodedString   = json_encode($json); 
file_put_contents($nomFichierRanks, $encodedString);
// renvoi ajax
$position = 0;
foreach ($json as $joueur)
{
 $position++;
 $temp = $position." : ".$joueur['name']." - ".$joueur['score']."<br/>";
 $temp = $joueur['name'] == $pseudo ? "<b>".$temp."</b>" : $temp;
 print $temp;
}

La mise en forme du résultat laisse à désirer (tag b) mais ce n'est pas ça qui compte dans l'exemple.

Pour les besoins du test on saisit la liste des joueurs. Pour la rapidité de développement de l'exemple j'ai pris | comme séparateur mais on peut faire d'une autre manière pour avoir la liste des joueurs qui concourent ensemble.
La saisie du pseudo et du score servent à simuler la production des données.
La mise en forme du classement est faite dans log.php et transmise à la page appelante via le response de XMLHttpRequest.