Apprendre et créer
Chat (javascript + PHP)
Le cahier des charges va être très simple, on veut une page web sur laquelle il est possible de saisir un pseudonyme et un message texte qui seront affichés à la suite des messages déjà postés.
Attention, le code proposé ici n'est pas du tout optimisé, on peut le voir simplement comme un test de faisabilité.
Pour le stockage des message, un simple fichier texte suffira !
C'est parti !
Comme précédemment nous avons besoin de nos deux fichiers index.php et API.php plus le fichier texte qui stockera les messages.
Fichier Index.php
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Document</title>
</head>
<body>
Nom : <input type = "text" id = "name"> <br>
Message : <input type = "text" id = "message"> <br>
<input type = "button" value = "Tester" OnClick = "postMessage()">
<div style = "border:1px solid black;padding:10px;" id = "chat">
</div>
<script>
// Detecte l'appui sur une touche du clavier
document.addEventListener("keypress", keyPressed);
// Envoi le message si appui sur enter
function keyPressed(event) {
if (event.keyCode === 13) {
postMessage();
}
}
// Envoi le message et le nom vers le fichier API
function postMessage() {
var name = encodeURIComponent(document.getElementById('name').value);
var message = encodeURIComponent(document.getElementById('message').value);
var requestURL = 'API.php?name=' + name + '&message=' + message;
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.send();
document.getElementById('message').value = '';
}
// Affiche le contenu retourné du fichier API
function displayChat() {
var requestURL = 'API.php?display';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.send();
request.onload = function() {
document.getElementById("chat").innerHTML = request.responseText;
}
}
// Actualise le chat à intervalle de 200 millisecondes
setInterval(displayChat, 200);
</script>
</body>
</html>
Fichier API.php
<?php
// Si on demande de retourner le contenu à afficher
if( isset($_GET['display']) ) {
$file = fopen( "fichier.txt", "r" );
while( $line = fgets($file) ) {
$content[] = $line;
}
fclose($file);
echo implode('<br>', $content);
}
// Si on demande de d'enregistrer un nouveau message
if( isset($_GET['message']) ) {
$name = $_GET['name'];
$message = $_GET['message'];
$file = fopen( "fichier.txt", "a+" );
fputs($file, $name.' : '.$message."n");
fclose($file);
}
Et voilà, en quelques lignes de code on a créé un chat interactif qui s'actualise tout seul sans avoir à rafraîchir la page entière !
Bon, il manque beaucoup de fonctionnalités pour que ça soit utilisable sérieusement mais avec ça on a déjà franchi plusieurs barrières ! Par contre il y a de nombreux problèmes d'optimisation...
Problèmes d'optimisation
La première chose concerne l'envoi du formulaire. Il y a une manière plus adaptée en faisant appelle à la méthode POST au lieu de GET.
Ensuite, le plus gros point vient des requetes et des réponses de l'API.
D'une part, les requetes ont lieu toutes les 200 millisecondes même si aucun changement n'a été effectué et d'autre part, l'API renvoi tout le contenu, même ce qui avait déjà été envoyé.
Dans la partie sur l'optimisation nous allons justement chercher à limiter le nombre et le volume de données des requêtes au maximum tout en gardant une instantanéité dans les mises à jour du contenu.
La suite
Alors deux choses :
- La première c'est l’optimisation du code pour le rendre beaucoup beaucoup beaucoup moins gourmand : Chat (javascript + PHP) avec les optimisations
- Et la deuxième c'est la création d'un jeu de morpion multijoueurs : Jeu de morpion / tic-tac-toe (javascript + PHP)