Apprendre et créer
API : communication javascript et serveur
La première chose à faire si l'on veut créer un jeu multijoueur, c'est de parvenir à partager les données entre les utilisateurs. Le javascript s’exécutant côté navigateur, il ne peut pas, seul, passer les informations. Il faut passer par le serveur, et pour cela, c'est le PHP qui va nous servir.
Pour que le javascript et le PHP communiquent, il faut passer par une interface de programmation, une API. Cet API sera une simple page PHP capable d’interpréter les demandes et de restituer les données voulues.
Principe : Le javascript appelle une url, le serveur exécute le code PHP et renvoi du texte qui pourra être utilisé par le javascript.
1 - Récupérer le texte d'une page PHP en javascript
Pour cela, il faut deux fichiers :
- le fichier qui affiche l'HTML et qui exécute le javascript : index.php
- le fichier qui retourne du texte : API.php
Voici le code minimum que j'ai trouvé (MDN Web docs) pour récupérer des données en javascript :
Fichier index.php
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Document</title>
</head>
<body>
<input type = "text" id = "data">
<input type = "button" value = "Tester" OnClick = "testAPI()">
<script>
function testAPI() {
var requestURL = 'API.php';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.send();
request.onload = function() {
document.getElementById("data").value = request.responseText;
}
}
</script>
</body>
</html>
Fichier API.php
Hello world !
C'est deux fichiers permettent d'afficher le contenu du fichier API.php dans l'input du fichier index.php lorsque l'on clique sur "Tester" ! Et ça fonctionne !
Première étape passée !
2 - Envoyer des informations à l'API
L'envoi d'informations à l'API est nécessaire pour aller plus loin, c'est comme ça que l'on pourra communiquer les interactions qui auront eu lieu.
Fichier index.php
(Je ne mets que la fonction, le reste ne change pas)
<script>
function testAPI() {
var requestURL = 'API.php?key=1';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.send();
request.onload = function() {
document.getElementById("data").value = request.responseText;
}
}
</script>
Fichier API.php
<?php
if( isset($_GET['key']) AND $_GET['key'] == 1 ) {
echo 'Hello world !';
}
Et cela fonctionne, PHP prend tout l'URL en compte donc on obtient une variable $_GET que l'on peut utiliser dans le code.
Mais il y a un problème, si l'on veut passer des charactères spéciaux comme le & en $_GET, cela va fausser l'url.
Il faut donc encoder les variable avant de les passer en url et pour cela il y a la fonction javascript encodeURIComponent() et PHP décode automatiquement les URL dans ses variables GET et POST donc il n'y a pas de code à rajouter côté PHP.
Voici les fichiers qui me permettent de tester le passage de texte en javascript vers PHP.
Fichier index.php
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Document</title>
</head>
<body>
Input 1 : <input type = "text" id = "model"> <br>
Input 2 : <input type = "text" id = "data"> <br>
<input type = "button" value = "Tester" OnClick = "testAPI()">
<script>
function testAPI() {
var value = encodeURIComponent(document.getElementById('model').value);
var requestURL = 'API.php?key=' + value;
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.send();
request.onload = function() {
document.getElementById("data").value = request.responseText;
}
}
</script>
</body>
</html>
Fichier API.php
<?php
if( isset($_GET['key']) ) {
echo $_GET['key'];
}
Et voilà pour ce début, pour le moment, il n'y a pas de difficultés majeures, je pense que l'on pourra rapidement faire des choses bien sympa !!
D'ailleurs, prochain objectif, utiliser ce que l'on a appris ici pour réaliser un chat !