Live-Coding : Créer un chat en Ajax de A à Z

Dans ce live-coding, nous allons créer un chat géré en Ajax.

Cette méthode permet de découvrir ou redécouvrir le fonctionnement d'Ajax.

Attention : ceci est une introduction, cette méthode ne sera pas optimale et l'utilisation des websockets, par exemple, sera plus conseillée pour les sites ayant du trafic.

Base de données

Nous utiliserons une base de données simple contenant deux tables.

La table "users" contiendra 4 champs

• id, clé primaire
• email
• password, chiffré
• pseudo

La table "messages" contiendra 4 champs

• id, clé primaire
• message
• created_at, automatique
• users_id, clé étrangère de "users"

Fichiers de base

Nous mettons en place quelques fichiers de base, téléchargeables sur Github, qui permettront de voir l'interface de chat et de gérer la session des utilisateurs.

Ces fichiers sont structurés comme ceci

Les fichiers sont utilisés comme suit :

• styles.css : fichier CSS du projet
• bdd.php : fichier de connexion à la base de données
• footer.php : pied de pages
• header.php : entêtes de pages
• scripts.js : fichier qui contiendra notre code javascript
• client_chat.sql : base de données
• connexion.php : page de connexion utilisateur
• deconnexion.php : page de déconnexion utilisateur
• index.php : page d'accueil, page principale du chat
• inscription.php : page d'inscription des utilisateurs

Envoi des messages

Une fois connecté, l'utilisateur pourra poster des messages de chat en remplissant le champ en bas de page et en validant (entrée et clic sur la coche)

Partie Javascript

Nous aurons donc besoin d'écouter 2 évènements, l'un sur la zone de texte pour la touche entrée, l'autre sur la coche pour le clic.

window.onload = () => {

    // On va chercher la zone de texte

    let texte = document.querySelector("#texte")

    texte.addEventListener("keyup", verifEntree)

    

    // On va chercher le bouton "valid"

    let valid = document.querySelector("#valid")

    valid.addEventListener("click", ajoutMessage)

}

Nous devons maintenant vérifier si la touche appuyée est la touche entrée, puis exécuter la fonction "ajoutMessage"

function verifEntree(e){

    if(e.key == "Enter"){

        ajoutMessage()

    }

}

La fonction "ajoutMessage" se chargera d'envoyer une requête Ajax à notre serveur pour enregistrer le message

function ajoutMessage() {

    // On récupère la valeur dans le champ "texte"

    let message = document.querySelector("#texte").value



    // On vérifie si on a un message

    if (message != "") {

        // On crée un objet JS pour le message

        let donnees = {}

        donnees["message"] = message



        // On convertit les données en json

        let donneesJson = JSON.stringify(donnees)



        // On envoie les données en POST en Ajax

        // On instancie XMLHttpRequest

        let xmlhttp = new XMLHttpRequest()



        // On gère la réponse

        xmlhttp.onreadystatechange = function(){

            if (this.readyState == 4) {

                if(this.status == 201) {

                    // On a une réponse

                    // On efface le champ texte

                    document.querySelector("#texte").value = ""

                }else{

                    // On reçoit une erreur, on l'affiche

                    let reponse = JSON.parse(this.response)

                    alert(reponse.message)

                }

            }

        }



        // On ouvre la requête

        xmlhttp.open("POST", "ajax/ajoutMessage.php");



        // On envoie la requête avec les données

        xmlhttp.send(donneesJson);

    }

}

Partie PHP

Une fois la partie javascript en place, nous allons devoir traiter les données reçues en PHP pour :

• Vérifier que la méthode utilisée est la bonne
• Vérifier que l'utilisateur est connecté
• Vérifier qu'on a bien un message
• Sauvegarder le message

<?php

// Ce fichier ajoute un message dans la base de données

session_start();



// On vérifie la méthode

if($_SERVER['REQUEST_METHOD'] == 'POST'){

    // Bonne méthode

    // On vérifie si l'utilisateur est connecté

    if(isset($_SESSION['user']['id'])){

        // L'utilisateur est connecté

        // On récupère les données

        $donneesJson = file_get_contents('php://input');

        // On convertit les données

        $donnees = json_decode($donneesJson);



        // On vérifie qu'il y a un message

        if(isset($donnees->message) && !empty($donnees->message)){

            // Le message n'est pas vide

            // On peut l'enregistrer

            // On se connecte

            require_once('../inc/bdd.php');



            // On écrit la requête

            $sql = 'INSERT INTO `messages`(`message`, `users_id`) VALUES (:message, :user)';



            // On prépare la requête

            $requete = $db->prepare($sql);



            // On injecte les valeurs

            $requete->bindValue(':message', strip_tags($donnees->message), PDO::PARAM_STR);

            $requete->bindValue(':user', $_SESSION['user']['id'], PDO::PARAM_INT);



            // On exécute la requête en vérifiant qu'elle fonctionne

            if($requete->execute()){

                http_response_code(201);

                echo json_encode(['message' => 'Message enregistré']);

            }else{

                http_response_code(400);

                echo json_encode(['message' => 'Une erreur est survenue']);

            }

            // On libère $db

            $db = null;

        }else{

            // Le message est indéfini ou vide

            http_response_code(400);

            echo json_encode(['message' => 'Le message est vide']);    

        }

    }else{

        // L'utilisateur n'est pas connecté

        http_response_code(400);

        echo json_encode(['message' => 'Vous n\'êtes pas connecté(e)']);

    }

}else{

    // Mauvaise méthode

    http_response_code(405);

    echo json_encode(['message' => 'Mauvaise méthode']);

}

Afficher la liste des messages

Pour afficher la liste des messages, notre page d'accueil appellera un fichier PHP en Ajax à intervalle régulier (toutes les secondes dans notre exemple) qui fonctionnera comme suit :

• affichera les 5 derniers messages au chargement de la page
• affichera les nouveaux messages qui auraient été publiés depuis le chargement de la page

Nous allons donc devoir conserver l'id du dernier message affiché afin de ne charger que les messages nécessaires.

Le javascript

Dans notre fichier javascript, nous commençons par créer une variable globale permettant de conserver le dernier id chargé.

// Variables globales

let lastId = 0

Nous allons ensuite exécuter une fonction "chargeMessages" toutes les secondes (par exemple) en ajoutant la ligne ci-dessous dans "window.onload"

setInterval(chargeMessages, 1000)

Enfin, notre fonction "chargeMessages" enverra l'id du dernier message en Ajax à notre fichier "chargeMessages.php" et recevra les messages nouvellement créés (ou les 5 derniers si on recharge la page) puis les affichera dans la discussion.

function chargeMessages() {

    // On charge les messages en Ajax

    // On instancie XMLHttpRequest

    let xmlhttp = new XMLHttpRequest()



    // On gère la réponse

    xmlhttp.onreadystatechange = function () {

        if (this.readyState == 4) {

            if (this.status == 200) {

                // On a une réponse

                // On convertit le JSON en objet JS

                let messages = JSON.parse(this.response)



                // On retourne la liste pour traiter l'ID le plus élevé en dernier

                messages.reverse();



                // On récupère la div "discussion"

                let discussion = document.querySelector("#discussion")



                // On boucle sur les messages

                for (let message of messages) {

                    // On transforme la date en objet JS

                    let dateMessage = new Date(message.created_at)



                    // On ajoute le message avant le contenu déjà en place

                    discussion.innerHTML = `<p>${message.pseudo} a écrit le ${dateMessage.toLocaleString()} : ${message.message}</p>` + discussion.innerHTML



                    // On met à jour l'id

                    lastId = message.id

                }

            }else{

                // On gère les erreurs

                let erreur = JSON.parse(this.response)

                alert(erreur.message)

            }

        }

    }



    // On ouvre la requête

    xmlhttp.open("GET", "ajax/chargeMessages.php?lastId="+lastId)



    // On envoie la requête

    xmlhttp.send()

}

Le PHP

Il reste à créer le fichier "chargeMessages.php" qui récupérera les derniers messages publiés et les renverra en JSON.

Nous aurons 2 cas

• L'id du dernier message est égal à 0, on vient de charger la page, on envoie les 5 derniers messages
• L'id du dernier message est > 0, on charge les messages supérieurs à cet id (les nouveaux messages arrivés)

Le code sera le suivant

<?php

// On vérifie la méthode utilisée par la requête ajax

if($_SERVER['REQUEST_METHOD'] == 'GET'){

    // On est en GET

    // On vérifie si on a un id

    if(isset($_GET['lastId'])){

        // On récupère l'id et on nettoie

        $lastId = (int)strip_tags($_GET['lastId']);



        $filtre = ($lastId > 0) ? " WHERE `messages`.`id` > $lastId" : '';



        // On va chercher les messages

        // On se connecte à la bdd

        require_once('../inc/bdd.php');



        // On écrit la requête

        $sql = 'SELECT `messages`.`id`, `messages`.`message`, `messages`.`created_at`, `users`.`pseudo` FROM `messages` LEFT JOIN `users` ON `messages`.`users_id` = `users`.`id`'.$filtre.' ORDER BY `id` DESC LIMIT 5';



        // On exécute la requête

        $requete = $db->query($sql);



        // On récupère les données

        $messages = $requete->fetchAll();



        // On convertit en json

        $messagesJson = json_encode($messages);



        // On envoie

        echo $messagesJson;

    }

}else{

    // Mauvaise méthode

    http_response_code(405);

    echo json_encode(['message' => 'Mauvaise méthode']);

}

Et voilà, un petit chat opérationnel !

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat

Les fichiers de cet article sont disponibles sur Github