Un chat en Ajax/PHP/MySQL.

Pour créer un chat via AJAX, il existe de nombreuses manières, voici la mienne. Cette version suppose que vous disposez d’un espace membre et demandera les adaptations en conséquence.

Premièrement il faut créer la table mysql qui accueillera les messages:

  1. CREATE TABLE `chat` (
  2.   `id` bigint(20) NOT NULL AUTO_INCREMENT,
  3.   `id_user` bigint(20) NOT NULL,
  4.   `message` varchar(200) NOT NULL,
  5.   `timestamp` bigint(20) NOT NULL,
  6.   `lut` tinyint(1) NOT NULL,
  7.   PRIMARY KEY (`id`),
  8.   KEY `id_joueur` (`id`),
  9.   KEY `lut` (`lut`)
  10. ) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=0 ;

Pas vraiment d’explication à donner ici, on crée juste un espace de stockage.

Maintenant que l’on a l’entrepôt, il nous reste à avoir le moteur pour transporter tout cela. Ce moteur fonctionne en 2 fichiers, 1 pour lire le chat, et un pour envoyer des informations au chat. 2 fichiers que je nomme, personnellement,, sendChat.php et showChat.php.

showChat.php consulte simplement la base de données et extrait les messages:

  1. //Variable de stockage des messages.
  2. $chat = array();
  3.  
  4. //commande SQL
  5. $sql = mysql_query('SELECT
  6.                           chat.message,
  7.                           chat.timestamp,
  8.                           users.pseudo
  9.  
  10.                           FROM chat
  11.  
  12.                           INNER JOIN users ON users.id=chat.id_joueur
  13.  
  14.                           ORDER BY chat.id DESC');
  15. while ($a = mysql_fetch_assoc($sql)) {
  16.         //on remplit une cellule du tableau en formatant la date et en protégeant les données.
  17.         $chat[] = $a['pseudo'].' ('.date('h-m',$a['timestamp']).'): '.htmlentities($a['message'], ENT_QUOTES, 'UTF-8');
  18. }
  19. //on affiche le chat.
  20. echo '<h2>Chat</h2>';
  21. $chat = array_reverse($chat);
  22. foreach ($chat as $a) {
  23.         //Grace à wordwarp, on découpe les chaînes de caractères pour qu'elle ne dépasse pas du chat.
  24.         echo '<p>'.wordwrap($a,25,'<br />', true).'</p>';
  25. }

SendChat.php est un bout de code PHP qui ajoute une entrée dans la base de données:

  1. if (isset($_POST['textChat'])) {
  2.         $sql = mysql_query('INSERT INTO chat VALUES(
  3.                                                     NULL,
  4.                                                     '.$_SESSION['id'].',
  5.                                                     ''.mysql_real_escape_string($_POST['textChat']).'',
  6.                                                     UNIX_TIMESTAMP(),
  7.                                                     1
  8.                                                     )');
  9. }

Et l’Ajax dans tout ça ? Et bien il se place sur la page que vous utilisez pour afficher le chat, 2 fonctions suffisent: 1 pour recharger le chat et une pour envoyer des messages:

  1. refreshChat = function () {
  2.         //toutes les secondes on recharge le chat via ajax.
  1.         setInterval(function () {
  2.             $("#chat").load("lib_chat/showChat.php");
  3.         }, 1000);
  4. }
  5. sendChat = function () {
  6.         $(".formChat, .submitChat").live("submit",
  7.         function() {
  8.             //On crèe un système ajax personnalisé
  9.             $.ajax({
  10.                    //on envoie les données en POST
  11.                    type: "POST",
  12.                    //Par précausion, on serialize les données.
  13.                    data: $(this).serialize(),
  14.                    //on envoie tout au sendChat.php qui ajoutera les données dans la base de données.
  15.                    url: "sendChat.php",
  16.                    //quand l'ajax est fini, on remet le formulaire à 0;
  17.                    success: function(msg) {
  18.                          $(".textChat").val("");
  19.                    }
  20.          });
  21.          //Et pour finir on bloque toute autre action.
  22.          return false;
  23.     });
  24. }

Bien sur, il faut adapter cela à votre propre page HTML.

Laissez un commentaire