Un Chat élémentaire en Php/jQuery

Lors d'une de mes dernières incursions sur mon compte Facebook, j'ai vu qu'ils avaient ajouté une sorte de messagerie instantanée. L'option doit bien exister depuis un quart de siècle, mais je l'avais loupé jusque là.

Je trouve l'idée sympathique et me suis dit qu'une telle messagerie pouvait avoir sa place dans une section d'administration de site pour permettre aux administrateurs/modérateurs de discuter entre eux.

J'ai donc griffonné un petit chat en quelques lignes, le but étant de rester le plus élémentaire possible. Pas envie de me tracasser avec des écritures/lectures en base de données. Un simple fichier plat et un peu d'Ajax peuvent faire l'affaire. Zoooop.

Voir la démo

Ce que je veux

Je veux quelque chose de simplissime, rapide à mettre en œuvre. Je ne veux pas m'embêter avec une base de données. L'idée est de rester Straight to the point pour des besoins légers.

Mise en place

Tout commence par un simple formulaire permettant d'entrer son message et d'une fenêtre retranscrivant la discussion. Pour garder l'article le plus simple possible, je ne gère pas l'identification. Le pseudo est ici entré par l'utilisateur lui-même. Dans un vrai site communautaire ou une partie administrateur, l'identifiant de l'utilisateur est déjà connu. C'est celui-ci qu'on pourrait utiliser.

Html du Chat

<div id="chat">
    <!-- Chat Room -->
    <div id="room"><dl></dl></div>
    <!-- Formulaire -->
    <form action="#" method="post">
        <input type="text" name="user" value="Anonyme" size="7"/>
        <input type="text" name="message" size="30" AUTOCOMPLETE="off" />
        <input type="submit" value="ok" />
    </form>
</div>

Lorsqu'un message est entré, il est posté en Ajax à un second script PHP qui fait le travail. La fenêtre de dialogue est rafraichie toutes les 5 secondes.

Fichier chat.js

/**
 * Un mini-Chat en jQuery/Php
 * par Jay Salvat - http://blog.jaysalvat.com/
 */
$(function() {
    // Lorsqu'un message est posté
    $('#chat form').submit(function() {

        // On récupère les valeurs de champs
        var user    = $('#chat input[name=user]').val();
        var message = $('#chat input[name=message]').val();

        // On les poste en Ajax
        $.post('chat.php', { 'user':user, 'message':message }, function() {
            refreshChat();
        });

        $('#chat input[name=message]').val('');
        return false;
    });

    // Rafraichissement du contenu du Chat
    function refreshChat() {
        $.ajax({
            url: "chat.html",
            ifModified:true,
            success: function(content){
                $('#room').html(content);
            }
        });
        setTimeout(refreshChat, 5000);
    }

    refreshChat();
});

Le script PHP, ici chat.php reçoit le message et le pseudo, et se contente de les écrire dans un fichier avec quelques tags Html. Ce fichier s'appelle ici chat.html. Quelques manœuvres sont effectuées pour ne garder que les dix dernières lignes.

Fichier chat.php

<?php
/**
 * Un mini-Chat en jQuery/Php
 * par Jay Salvat - http://blog.jaysalvat.com/
 */
$file      = 'chat.html'; // fichier de stockage
$max_lines = 20;          // nombre de lignes maximum stockées

if (isset($_POST['message'])) {    
    $user    = $_POST['user'];
    $message = $_POST['message'];
    $date    = date('d/m/y H:i:s');
    $line    = "<dt><b>{$user}</b> {$date}</dt><dd>{$message}</dd>\n";

    // Le fichier plat est rouvert
    $content = file($file);    

    // ... traité
    $content = array_slice($content, 0, $max_lines);
    array_unshift($content, $line);

    // ... et réécrit
    file_put_contents($file, $content);
}
?>

Le reste n'est que cosmétique. Un peu de CSS met le tout en forme. Je ne m'attarde pas sur la feuille de style qui n'a ici aucun intérêt.

Analyse

Je reviens plus en détail sur certains points.

Javascript : chat.js

$('#chat form').submit(function() {
    var user    = $('#chat input[name=user]').val();
    var message = $('#chat input[name=message]').val();

    // ...

    return false;
});

Lorsque l'événement submit est déclenché, je récupère les valeurs des deux champs (user et message). Le return false annule l'effet par défaut du submit. Le formulaire ne sera donc pas posté avec un rechargement de page.

$.post('chat.php', { 'user':user, 'message':message }, function() {
      refreshChat();
});

Une fois les valeurs de champs récupérées, je les passe en Ajax par méthode POST à mon script chat.php. Puis je lance la fonction refreshChat() qui rafraichi la discussion.

function refreshChat() {
    $.ajax({
        url: "chat.html",
        ifModified:true,
        success: function(content){
            $('#room').html(content);
        }
    });
    setTimeout(refreshChat, 5000);
}

Avec cette fonction on rafraichi la discussion. Une requête Ajax prend le contenu du fichier plat chat.html et l'affiche dans notre Chat (#room). Le point important ici est la ligne ifModified:true qui permet de ne charger le contenu que si le fichier a été modifié. Attention, cet attribut peut poser problème sur certains serveurs ne renvoyant pas certaines informations dans les headers http. C'est le cas sur mon hébergement OVH.

Enfin, un setTimeout relance la fonction toutes les 5 secondes (5000). Voilà pour la partie client.

Php : chat.php

Le script client échange des données avec un fichier le fichier chat.php. Voyons de quoi celui-ci est constitué.

if (isset($_POST['message'])) {    
    $user    = $_POST['user'];
    $message = $_POST['message'];
    $date    = date('d/m/y H:i:s');

    // ...
}

Lorsque des données sont postées en Ajax, j'ajoute la date et je les range dans de simples variables pour y voir plus clair par la suite.

    $line = "<dt><b>{$user}</b> {$date}</dt><dd>{$message}</dd>\n";

Je créé la nouvelle ligne qui sera ajouté à la discussion un peu plus tard.

    $content = file($file);    
    $content = array_slice($content, 0, $max_lines);

J'ouvre le fichier de stockage chat.html dans un tableau (file) et je n'en garde qu'un certain nombre de lignes (ici défini par $max_lines) pour que le fichier garde une taille raisonnable.

    array_unshift($content, $line);

La ligne nouvellement créée est ajoutée au début de la discussion avec array_unshift.

    file_put_contents($file, $content);

Puis le contenu total est réécrit dans le fichier chat.html.

Conclusion

Voilà tout est là. On est loin du tout option mais là n'était pas l'idée. Comme d'habitude je n'ébauche qu'une idée, à chacun de se l'approprier et de l'intégrer et de la modifier selon ses besoins.

Télécharger le code