Création d'un tchat (chat) avec ajax et mysql ( + php ...)

Présentation

Bon et bien voilà, je suis nouveau rédacteur sur ce blog =D, je viens vous proposer mes compétences en terme de développement web, ce sera un peu de tout, PHP, javascript, html, css etc etc ...
J'ai actuellement 18 ans et ça fait quelques temps que je code ce qui me vient à l'esprit, je n'ai pas encore eu de réel gros projet, mais ça ne saurait tarder ! :)

Donc voilà je vais à partir de maintenant poster des articles de temps en temps, mais je voulais vous dire aussi, si vous êtes bloqué n'hésitez SURTOUT PAS à demander en commentaire, vous pouvez demander de l'aide sur le tuto mais aussi me demander de créer un tuto, je suis à l'écoute !

Pour finir cette présentation et bien je vais faire un tuto, oui quoi de mieux pour officialiser le tout hein :p
Allez hop tous et toutes à vos claviers, on va travailler !

Début du tuto

Tout d'abord si vous avez un soucis quelconque venez le dire en commentaire.

Comme le titre l'indique, je vais essayer de vous faire un cours sur "comment créer un tchat dynamique", je ne ferais pas de design, mais juste le code.

Ce tuto sera assez gros, et donc découpé en plusieurs parties qui sont les suivantes :

Partie javascript;

Partie php;

Partie Base de données.

On va attaquer ici la partie javascript ( ajax ).

Let's go !

Partie Javascript

Dans un premier temps, je ne vais pas vous coder ajax en "brute" mais avec jquery.

Pour ceux qui ne connaissent pas, jquery est un fichier javascript contenant des fonctions super sympas :)

Je vais vous donner le lien de ce dernier, pour l'utiliser on devra juste l'importer dans la page où il est nécessaire !

Telecharger Jquery

Voilà, alors pour l'importer dans une page html ( ou php ...) :

[html]

<html>

<head>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

</head>

<body>

...

Voilà ça c'est fait !

Passons maintenant au code :) (qui est très simple)

Pour rafraichir le tchat:

$.ajax({ type: "GET", url: "refresh.php", data: "action=refresh", success: function(msg){ document.getElementById("Tchat").innerHTML = msg; } });

et pour l'envoi d'un message :

var message = document.getElementById("message").value;
 
var pseudo = document.getElementById("pseudo").value;
 
$.ajax({ type: "GET", url: "refresh.php", data: "action=envoi", success: function(msg){ document.getElementById("etat").innerHTML = msg;} });

et voilà le code JS est fait lol ! bon ok je vous explique un peu :D

type: "GET" veut dire qu'on va lui passer les variable que l'on veut via "data", ici on envoi action=refresh, ce qui sera reçu par la page "refresh.php" (url) que l'on fera plus tard !!

success = lorsque la requête a bien était transmise et que la réponse est revenu, vous voyez alors function(msg), msg est la réponse que vous avez envoyée pour la requête, ce qu'on fera aussi dans la partie php.

Après c'est simple, on va afficher la réponse dans une <div id="Tchat"></div>, qui sera les messages du tchat !

Pour le reste, la partie envoi est pareil que celle du rafraichissement, sauf l'action qui est envoi et puis on va juste afficher l'état de la requête, par exemple si le message est pas envoyé, la page php nous retourne " pas envoyé" et ce script affiche ce dernier texte dans la <div id="etat"></div>

Si vous ne comprenez pas document.getElementById allez voir le tuto de la section Developpement javascript :)

On va mettre tout le javascript dans un fichier nommé fctTchat.js et l'importer, ce sera plus clair comme code .

Mettre le code qui suit dans fctTchat.js

function refreshTchat(){
 
     $.ajax({ type: "GET", url: "refresh.php", data: "action=refresh", success: function(msg){ document.getElementById("Tchat").innerHTML = msg; } });
 
     setTimeout("refreshTchat()",1000); // ce bout de code permet de relancer la function refreshTchat toutes les 1000 milliSecondes c'est à dire toutes les secondes :)
 
}
 
function envoi(){
 
     var message = document.getElementById("message").value;
 
     var pseudo = document.getElementById("pseudo").value;
 
     $.ajax({ type: "GET", url: "refresh.php", data: "action=envoi&message="+message+"&pseudo="+pseudo, success: function(msg){ document.getElementById("etat").innerHTML = msg;} });
 
}
 
refreshTchat();

Et mettre ce code dans le fichier tchat.html :

[html]
<html>

<head>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="fctTchat.js"></script>

</head>

<body>

<input type="text" id="pseudo" />Ecrivez votre pseudo ici (laissez le écrit)

<div id="Tchat" style="height:400px;width:500px;overflow:auto;border:3px double silver;padding:5px;"></div><br />

<input type="text" id="message" />tapez votre message<br />

<input type="button" value="envoyer" onclick="envoi();" /><br />

<div id="etat"></div>

</body>

</html>

Partie PHP

Tout d'abord vous allez créer un fichier qui s'appel "refresh.php".

Une fois créé, nous allons commencer le code :) :

header("Content-Type: text/html");// un petit header pour ne pas que tout se mélange ( ne cherchez pas lol)
 
mysql_connect("adresse", "login", "password");//    (1)
 
mysql_select_db("bdd");
 
if(isset($_GET['action']) AND $_GET['action'] == "refresh"){//    (2)
 
     $requete = "SELECT * FROM Tchat ORDER BY ID DESC"; //   (3)
 
     $reponse = mysql_query($requete) or die (mysql_error());//    (4)
 
     $texte = ""; //   (5)
 
     while($donnees = mysql_fetch_array($reponse)){//    (6)
 
          $texte .= "De ".$donnees['pseudo']." a ".$donnees['heure']."<br />".$donnees['message']."<br /><HR><br />";//        (7)
 
}
 
if($texte != ""){ //   (8)
 
     echo $texte;//    (9)
 
}else echo "Il n'y a pas de message";//    (10)
 
}elseif(isset($_GET['action']) AND isset($_GET['pseudo']) AND isset($_GET['message']) AND $_GET['pseudo'] != "" AND $_GET['message'] != "" AND $_GET['action'] == "envoi" ){//     (11)
 
     $message  = mysql_real_escape_string(htmlspecialchars($_GET['message']));//    (12)
 
     $heure = strftime("%Hh%M"); //   (13)
 
     $pseudo = mysql_real_escape_string(htmlspecialchars($_GET['pseudo']));//    (14)
 
     $requete  = "INSERT INTO Tchat VALUES('$pseudo','$message','$heure','')"; //   (15)
 
     mysql_query($requete) or die (mysql_error());//    (16)
 
     echo "Message envoyé";
 
}else echo "Le message n'a pas pu être envoyé";

(1) : On se connecte à la base de données, remplacez bien tout par vos identifiants et bdd;

(2) : On vérifie grâce à isset si $_GET['action'] existe et est bien égale à la valeur "refresh", sinon on ne fait rien;

(3) : On écrit la requête dans une variable, ici on sélectionne tout les enregistrements qui sont dans la table Tchat et on les ordonne par leurs ID, DESC permet d'inverser le listing, en gros d'avoir les derniers messages en haut et les anciens vers le bas ...;

(4) : On exécute la requête mysql;

(5) : On créé la variable où sera stocké tout les messages du tchat, avec leurs balises;

(6) : Affichage par boucle des enregistrements ( voir tuto php);

(7) : Alors ici c'est déjà plus intéressant, on va créer tout ce qui sera dans la <div id="Tchat"></div>, même les balises, etc etc, sinon ce ne serait que du texte brute et pas structuré, ici j'ai opté pour du très simple, affichage du pseudo et de l'heure de l'envoi, un saut grâce à <br /> puis affichage du message, puis deux sauts pour le message suivant;

(8) : On test si $texte n'est pas vide, car si c'est le cas, ça veut dire qu'il n'y a pas de message dans la base de données !

(9) : Si ce n'est pas vide, on l'affiche ( ce qui sera stock dans la variable msg dans le script javascript au dessus);

(10) : Sinon on envoi juste un texte disant qu'il n'y a pas de message;

(11) : Si pas (2) alors on vérifie que $_GET['action'] existe bien, que l'on a le pseudo et le message envoyés par GET;

(12) : On stock de façon sécurisée le message à envoyer dans $message;

(13) : On récupère l'heure et la minute actuelle;

(14) : On stock de façon sécurisée le pseudo envoyée dans $pseudo;

(15) : On créé la requête pour insérer le message dans la table Tchat;

(16) : On exécute cette dernière;

Voilà on a fait le tour du code php, si vous avez pas compris un truc, postez un commentaire.

Partie BASE DE DONNES

Alors pour ce qui est de la base de données c'est très simple, on va juste créer une table qui s'appelle "Tchat" avec les champs suivants:

pseudo message heure ID -> en auto-increment ( case à cocher le plus souvent)

et c'est TOUT ! hehe

Maintenant vous pouvez améliorer ce tchat, le design, faire un système de login pour ne pas laisse les pseudo en haut, faire un système d'émotes via un regex en php ... hésitez pas à demander en commentaires ce que vous voulez, je vous le ferais !

Bonne journée !

Commentaires

1. Le lundi, avril 19 2010, 18:27 par gnieark

nice tutoriel!
Intéressant, bienvenue cher collocataire du blog.

Je me permet, je n'aurai pas fait mieux, et pas pris le temps, donc ne prend surtout pas la suite comme une critique, car ton billet est super, je me permet juste d'envisager des pistes d'amélioration
alors d'un premier coup d'œil trois pistes d'amélioration:

le premier c'est ta requete:
$requete = "SELECT * FROM Tchat ORDER BY ID DESC"

BANNIS les SELECT *, prends le temps de remettre les noms de colonne, pour deux raisons, faciliter la lecture et parce que si jamais tu as à modifier la structure de ta table par la suite, tu n'auras pas à reprendre ce morceau de code.

Autre point sur ta requête, mets des clauses LIMIT, si ton script censé purger la table foire ou simplement si ton tchat est finalement très fréquenté, tu vas avoir des soucis avec la charge, autant optimiser un peu ça.

enfin dernière critique, tu rafraîchis à chaque fois tout le bloc de messages, L'idéal ce serait de ne pas rafraîchir, mais de simplement rajouter les nouveaux messages (possible là)

enfin encore mieux, il serait génial que ce ne soit pas le navigateur de l'utilisateur qui soit à l'initiative du refresh, mais bien le serveur qui prévienne. Mais là, ça nécessite de travailler sur une autre sous-couche que le http. Perso, pas dans mes compétences.

2. Le mardi, avril 20 2010, 00:22 par hempstar

Oui je suis d'accord avec toi, pour la requête je ne savais pas par contre, merci de me le dire au moins je ferais plus l'erreur =D.
Sinon oui, pour terminer le tuto du tchat il faudrait mettre un script anti-spam etc, j'ai pas eu le temps de le faire, donc j'ai coupé court sans mettre de sécu, d'où l'oublie du LIMIT, mais c'est bon à savoir, merci :)

3. Le samedi, juin 19 2010, 08:27 par harmo

Salut ici !
Très bon tuto simple et efficace, merci !
Cependant dans le 1er commentaire, gnieark parle d'ajouter seulement le dernier message ( surement avec .append, non?), j'aimerais bien savoir comment faire !
Merci d'avance !

4. Le dimanche, juin 20 2010, 00:44 par gnieark

héhé c'est le plaisir de commenter un truc qu'on n'a pas fait, "vaudrait mieux faire ça" sans savoir comment le faire.

Sérieusement, je l'aurai vu en ajax, en laissant à chaque fois un <p id="numero_du_prochain_commentaire"></p> à la fin pour pouvoir mettre un truc dedans en ajax.

Append serait aussi une bonne stratégie.

faudra que je me penche dessus. Hempstar a donné une super base qu'on peut s'ammuser à améliorer.

5. Le dimanche, août 21 2011, 03:03 par gnieark

réponse à harmo un an plus tard:

http://blog-du-grouik.tinad.fr/post...

6. Le mercredi, août 24 2011, 18:17 par devil

tu pourrait m'aider a crée 1 script de tchat avec des cam ou je pourrait l'administrer .

et une fiche de c.s.s modérateur comme ceci: ★devil

7. Le mercredi, août 24 2011, 18:19 par devil

http://evolution-tchat.forumprod.co... voici mon site tu verra pourquoi .

8. Le mercredi, août 24 2011, 19:36 par Gnieark

Bonjour Devil.

Réponse directe: non. Voila pourquoi:

Vu que tu utilises une plateforme (forumprod), je ne pense pas qu'il soit possible d'intégrer un pluggin réccuppérant l'identité du posteur inscrit (nécessaire au tchat intégré sur un forum non?).

Pour la webcam, il faut un serveur de streaming (compte 30€ mini / mois pour la location, et environ 200€ pour le geek qui passera des heures à le paramétrer avec un red5 ou autre). puis entre 2000€ et 5000€ pour les heures à développer la plate forme de tchat sur mesure.

Oublies la webcam... tu trouveras pit etre des trucs intégrables à condition de payer un abonnement.

Je peux juste t'aider à intégrer un chat basique (texte), si tu as la possibilité de pouvoir placer une iframe dans ton forum et que tu disposes d'un espace déhébergement avec du php et une base de données. non intégré avec l'identification de ton forum. Tu te débrouilles avec le CSS (je n'aime pas ça et je ne suis pas doué).

Par contre si l'aide se transforme en "je fais tout" ou si tu souhaites que j'héberge le script de tchat, il y aura de la pub dessus. Hormis certains projets qui me plaisent je ne fais pas de bénévolat.

9. Le lundi, septembre 2 2013, 10:51 par Euloge Ngoma

bonjour je suis entrain de creer un site web dynamique et je suis encor novice dans la programation.
j'aimerai integré un systeme de chat avec de l'ajax et j'aurai besoin de votre aide.
merci d'avance.

10. Le lundi, septembre 2 2013, 12:33 par gnieark

Eulogue> Utilisez plutot ce tutoriel là: http://blog-du-grouik.tinad.fr/post...

Pour de l'aide: gnieark -Arobaze- free.fr
N'hésitez pas à m'envoyer vos morceaux de code ou les détails sur lesquels vous êtes en difficultée. Ce sera un plaisir de vous aider

11. Le mercredi, avril 16 2014, 15:36 par Scribou

3 ans plus tard je passe sur ce blog, je le trouve intéressant et en voyant la proposition de commentaire je tombe sur :

"complétez cette citation de Toy Story: "Vers l'infini et l'au ..." (en minuscules sans les accents)"

Et là je dis NON NON NON !
C'est "Vers l'infini et AU dela"
Pas "Vers l'infini et L'AU dela"

Voila c'était juste pour dire ça :)
Et aussi sympa le tuto et clair

Blog du grouik