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

Temps de lecture : 23 minutes environ.

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

Live-Coding : Créer un chat en Ajax de A à Z
Article publié le - Modifié le

Catégories : Javascript Tutoriel Live-Coding chat

Mots-clés : Tutoriel Javascript Ajax PHP Live-Coding chat

Partager : Partager sur Facebook Partager sur Twitter Partager sur LinkedIn