Tutoriel vidéo PHP : Créer un tchat en Ajax/PHP

Tutoriel PHP

Ce tutoriel est un tutoriel "Premium".

Pour y accéder il vous suffit de créer un compte devenir premium, vous pourrez alors télécharger la vidéo complète et les fichiers liés...

Dans ce tutoriel vidéo vous découvrirez comment réaliser un tchat dynamique en Ajax/PHP. Nous verrons donc comment utiliser jQuery et l'objet Javascript timer afin d'appeler un script PHP de manière récurrente.

Ce tutoriel est découpé est deux partie :

  • Dans la première partie nous verrons un système basique permettant aux utilisateurs de choisir un pseudo et de tchatter en live
  • Dans la seconde partie (disponible au téléchargement pour les membres premiums) vous verrez comment lister les personnes connectés mais aussi comment éviter les pseudos dupliqués
Démonstration

Tags : PhpJqueryJavascriptAjaxTchat

Tutoriel PHP posté Mardi 03 Novembre 2009
 68 Commentaires

 

Partager
Ils l'ont utilisé

 

Publicité

 

Vos commentaires
Laisser un commentaire

Lepelley (Mardi 03 Novembre 2009 à 23:02):

Jolie =)

Badbart (Mardi 03 Novembre 2009 à 23:41):

Le coup du 2eme tableau pour inverser l'ordre des commentaires c'est pas un peu compliquer ? Juste ORDER date ASC aurait suffit non ?

Grafikart (Mercredi 04 Novembre 2009 à 02:18):

Bonne réflexion, mais vu qu'on veut les 10 derniers messages on est obligé d'utiliser DESC puis d'inverser.

WoaWorld (Mercredi 04 Novembre 2009 à 00:06):

Encore un superbe tuto!
Je le regarde demain, car la je suis crevé.
Bravo !

fantoche (Mercredi 04 Novembre 2009 à 00:08):

L'aventure continue !! Extra.

OverSpeed (Mercredi 04 Novembre 2009 à 09:08):

Merci pour ce tutoriel Grafikart

tagcash (Mercredi 04 Novembre 2009 à 18:04):

c cool sa merci juste se que je voulais

WA007 (Mercredi 04 Novembre 2009 à 19:05):

Comme toujours tes tutos en impressionne plus d'un !! mais sérieusement c'est dommage que tu garde tes tutos les plus intéressant qu'au payeur ! je sais qu'on doit se faire payer dans ce domaine mais justement en créant pour des compagnies leur site c'est ski doit rester payant mais pour montrer la merveille du web à tout tes admirateurs tu devrais garder le tout gratuit c'est seulement mon opignon !!! pour un visuel comme moi tes vidéos sont ma source d'inspiration ^^ )

doo (Mercredi 04 Novembre 2009 à 19:56):

merci comme toujours!!

DoDo021 (Mercredi 04 Novembre 2009 à 20:54):

Très très bon tuto comme toujours ! =)
As-tu prévu de faire un tuto dans le même style mais avec les socket ?
Sa serais très interessant =)

Merci encore pour tout j'en apprend beaucoup grâce à toi. =D

Have Fun DoDo021

WA007 (Mercredi 04 Novembre 2009 à 21:06):

Je tien à dire que j'ai mis des fonds dans mon compte paypal pour te soutenir mais espérons que tu en profite pour en rajouter d'avantage ^^ )

Grafikart (Mercredi 04 Novembre 2009 à 22:28):

Pour la qualité je te conseille vivement de télécharger la vidéo. Pour les vidéos assez longue je suis obligé de réduire la qualité pour dailymotion.

WA007 (Mercredi 04 Novembre 2009 à 21:06):

P.S la qualité pas super :S

pobourger (Jeudi 05 Novembre 2009 à 17:05):

Jolie tuturiel est ce que tu pense faire un compte payable pas ALLOPASS ? j'ai pas trop confiance même si je devrais avec ma carte bleu sur internet. ?
Cordialement,

pobourger (Jeudi 05 Novembre 2009 à 17:05):

Si tu veut tenter je te conseil : http://www.allopass.com

spookdealer (Jeudi 05 Novembre 2009 à 21:58):

trop cool ce tchat en ajax et php merci grafikart :p.

Quent1du58 (Vendredi 06 Novembre 2009 à 00:35):

Merci pour le tuto

Harry (Vendredi 06 Novembre 2009 à 18:07):

Tu te tapes un pire délire avec les messages à la fin U_o
LOL, sinon très bon tutoriel

Shin (Samedi 07 Novembre 2009 à 01:00):

Ow depuis le temps que j'attends ce tuto il faut que la seconde partie soit payante T_T
Snif...

Toutes les meilleures choses ont une fin, on glisse vers le emob-type (des tuto gratuits ultra light histoire d'uniquement donner envie de se payer les autres ~)
En espérant que l'inévitable glissade déjà bien entamée prenne longtemps !

C'est vraiment dommage que le volontariat ne fonctionne pas... =/

Allez merci quand même de te donner tout ce mal, moi je fonce m'inscrire pour un mois~~

Badbart (Samedi 07 Novembre 2009 à 13:06):

Faudrait pas abuser non plus, les parties gratuite sont en général assez complète. De plus je pense que les tutos sont la pour donner des idées, pour donner envie aux gens d'utiliser leurs clavier, et pas simplement être recopier.
Pis 10€ pour 6 mois, faut être une pince pour trouver ça chère :s, ça fait 2 paquets de clope, ou 5 bières en bar. Réparti sur 6 mois c'est ridicule.
Vu le nombre d'heure investi pour créé un tuto (prepa,real,montage,postage), on peut s'estimer heureux que ça soit pas facturé a l'heure lol !!

shin (Samedi 07 Novembre 2009 à 13:21):

Le prix est effectivement très attractif comparé à beaucoup de sites mais le fait est que comme beaucoup de monde je n'aime pas être manipulé par des techniques commerciales visant uniquement à nous faire ouvrir notre bourse (comme faire des tutos gratuits incomplets (même s'il est vrai que pour l'instant ça n'arrive que rarement sur grafikart.fr) et nous faire payer pour voir "la suite").
A la rigueur je pense que si de temps en temps un tuto complet était payant (sans partie gratuite), peut-être aurait-on moins l'impression d'être forcé.

M'enfin je déplorais, si tu avais fait attention, que le volontariat ne marche pas puisque, ayant déjà tenté d'apporter une contribution volontaire avant que ce système ne soit mit en place, celle-ci me laissait une meilleure impression que l'abonnement obligatoire =/
Mais bon si je le déplore c'est bien que je me rend compte que peut-être le raton ne pouvait faire autrement, c'est pour cela que je l'ai quand même fait.

Grafikart (Dimanche 08 Novembre 2009 à 02:51):

Attention quand même, les tutoriels ne sont pas incomplet. Avec la partie visible gratuitement on peut tout à fait réaliser un tchat. Après c'est les fonctions avancé qui sont décrite.

Effectivement le volontariat ça marchait avec des tutos que j'enregistrais vite fait. Maintenant les tutos sont devenus plus conséquent, plus fréquents et me prennent donc du temps, il est normal de chercher à valoriser ce travail

Contrairement à ce qui est dit dans le premier message, je ne changerai rien au contenu gratuit. Les tutoriels ne deviendront pas "ultra-light" ne t'inquiète pas.

fantoche (Lundi 09 Novembre 2009 à 00:13):

Il n'y a pas une page ou je peux lire le mécontentement de certains, devant le faite de devoir payer, je dirais plutôt contribuer.

Connaissant le travail que représente un cours, et de plus, aussi complet que tous ceux proposés ici, je pense que le prix demander est largement en dessous.

Je rejoins donc, les propos de certaines personnes ici, comme Badbart.

Peut être qu'il faudrait proposer un tuto "comment faire un tuto vidéo " pour que certains se rendent compte du travail a fournir :-))

Cyrix (Mercredi 11 Novembre 2009 à 22:34):

Vous êtes quand même bien marrant vous.
Grafikart nous fait des tutoriels géniaux et il faut que vous vous plainiez ?! Mais on va où là ? Si vous n'êtes pas content, vous allez voir ailleurs mais les bons tutoriels (comme ceux de notre ami) ne se trouvent pas de partout.

Si vous en voulez plus, vous payez et puis c'est tout ! Mais c'est hallucinant quand même !
Il y a plus de volontariat qu'autre chose là dedans, mais c'est son droit de faire payer et vous n'avez pas à critiquer ce point-ci.

Bref, merci pour ce tutoriel Grafikart ;o)

BORK (Samedi 07 Novembre 2009 à 13:14):

je suis tout à fait daccord avec Badbart =)

merci encore pour ce magnifique tutoriel =)

29.02 (Samedi 07 Novembre 2009 à 19:11):

Pour progresser, j'ai quelques questions qui me viennent à l'esprit :
- pourquoi ne pas mettre le champs id en clé primaire ?
Peut-être vu que le moteur est MyIsam et vu qu'il n'y a qu'une table ceci est inutile ?
- egalement, la fonction last_insert_id() pourrait t'elle suffir à obtenir le dernier id inséré au lieu de la requête ?

Grafikart (Dimanche 08 Novembre 2009 à 02:45):

Je n'ai pas mis le champ ID en clé primaire parceque j'ai oublié Il faut le mettre en clef primaire
Je ne m'y connais pas du tout au niveau des moteurs des tables, je laisse par défaut
la fonction peur suffir oui.

29.02 (Mardi 10 Novembre 2009 à 15:05):

D'accord. Merci de tes réponses.
Je trouve qu'une partie analyse serait intéressante. Pourquoi pas une partit oû l'on pourrait donner notre avis sur certains MCD ou encore MLR.

Nouipoz (Samedi 07 Novembre 2009 à 21:48):

Salut , cool , merci beaucou en + très bien expliquer , merci beaucoup a toi .

Sid (Dimanche 08 Novembre 2009 à 13:36):

Super tuto mais pourquoi utilises-tu windows et sur les autres mac os ^^ ? tu n'aimes pas mac ? p:

sc62 (Lundi 09 Novembre 2009 à 14:46):

Salut ,

ça fonctionne en local avec Wamp ... mais sur mon serveur j'ai des erreurs de session ... ( j'ai utiliser le code source dans le Zip )

Grafikart (Lundi 09 Novembre 2009 à 17:14):

Tu es sur Free ? Si oui il faut créer un dossier sessions à la racine.

sc62 (Lundi 09 Novembre 2009 à 18:34):

non chez OVH

Grafikart (Mardi 10 Novembre 2009 à 02:11):

Peux tu me donner plus d'infos sur ton erreur alors ?

sc62 (Mardi 10 Novembre 2009 à 23:37):

Voila l'erreur :

Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at /homez.139/monsite/www/tchat/index.php:1) in /homez.139/monsite/www/tchat/index.php on line 4

Warning: Cannot modify header information - headers already sent by (output started at /homez.139/monsite/www/tchat/index.php:1) in /homez.139/monsite/www/tchat/index.php on line 30

Grafikart (Mercredi 11 Novembre 2009 à 06:13):

En général le problème vient du fait qu'un texte a déja été écris avant (parfois juste un espace fait planté) donc si tu arrive pas à identifier le problème met des @ devant les lignes qui te bloquent, ça masquera les erreurs.

Cyrix (Mercredi 11 Novembre 2009 à 22:36):

Ou sinon, tu peux avoir deux fois la fonction de déclarée (sans que Wamp ne t'affiche l'erreur ...).

DoDo021 (Lundi 09 Novembre 2009 à 20:23):

Re salut =)
J'ai une petite question =)
Jquery n'ai pas compatible avec IE j'aurais aimé savoir si tu avais des liens ou des astuces pour que cela fonctionne. =) Car j'ai cherché mais j'ai pas trouvé grand chose qui peux m'aider.

Merci d'avance =)

Have Fun DoDo021

Badbart (Lundi 09 Novembre 2009 à 20:54):

Jquery est compatible avec IE !

DoDo021 (Mercredi 11 Novembre 2009 à 10:07):

Si j'essaie de faire une requête ajax sa ne fonctionne pas et j'ai été sur plusieur site beaucoup de monde on le même problème que moi.
Je sais que jQery fonctionne mais pas aussi bien que sur les navigateurs qui respecte les normes W3C.
C'est pour sa que j'aimerais savoir si quelqu'un à des astuces.

Merci d'avance =)

Have Fun DoDo021

PifyZ (Mardi 10 Novembre 2009 à 19:42):

Je voudrais juste savoir où sont les sources des tutos ?

Grafikart (Mardi 10 Novembre 2009 à 20:00):

Les sources sont téléchargeables pour les membre premium à droite de la vidéo.

PifyZ (Mardi 10 Novembre 2009 à 20:03):

Mais comment faire alors, car tout recopier ça met 20 ans, et la qualité... :S

Mais sinon c'est bien

Et j'ai pu faire les commentaires, mais j'aurais aimer le t'chat, tant pis...

Cyrix (Mercredi 11 Novembre 2009 à 22:36):

Il faut payer ;o)

Thomas (Jeudi 12 Novembre 2009 à 13:44):

Merci pour ce tuto graphik
A tous les pleureuses qui trouve ca chère, pensez au boulot que représente le montage de ses tutos.
Perso je trouve que graphik devrait faire payer tous ses tutos, un abonnement de que 10 euros pour 6 mois franchement c'est donné ...
Moi ca fait deux ans que je me suis lance dans l'apprentissage des techniques web et je n'avais pas encore rencontré un site aussi intéressant et surtout en vidéo.

PS:
Pour les pleureuses qui ne font que du copier coller et ne cherche pas à comprendre les codes passez votre chemin ou passez à la CAISSE ...

Necko (Lundi 23 Novembre 2009 à 20:36):

Salut tout le monde, dans la vidéo, on peut voir que la personne utilise un débugger sur son navigateur, ce qui est bien pratique.
quel est le nom de ce débugger ? ou puis je le trouver ?

Badbart (Lundi 23 Novembre 2009 à 20:45):

Firebug, tu le trouves sur google .

Necko (Lundi 23 Novembre 2009 à 22:02):

Merci à toi.

Gérald (Lundi 30 Novembre 2009 à 22:05):

hello,

tout d'abord les tutoriaux sont vraiment top, un grand bravo ! même avec des années de php on découvre toujours une petite ruse bien utile !

ma question : y a t il moyen de faire descendre automatiquement l'ascenseur vertical afin que le message le + récent soit directement visible ?
j'avais vu ça avec du javascript de type scrollBy(0,999999)
=> partage tu cette méthode ? (qui ne marche pas toujours bien selon le navigateur je crois me souvenir)

A+

valentin45000 (Vendredi 04 Décembre 2009 à 10:20):

Bon mon post à était supprimer donc je remet :
quand on envoi un message sa charger, sa charge sans jamais s'arrêter, alors que c'est correctement envoyer, c'est seulement quand on actualise qu'ont peut le voir.
Quel le problème à votre avis ?

Grafikart (Vendredi 04 Décembre 2009 à 11:37):

Désolé j'ai fait un gros nettoyage des commentaire et j'ai supprimé un peu trop. Tu dois avoir une erreur du retour Ajax, regarde firebug et envois moi les erreurs par mail (on va éviter de faire une conversation en commentaire).

valentin45000 (Vendredi 04 Décembre 2009 à 12:43):

Oula mais pas d'affolement c'est pas bien grave ^^
Ok j'envoie tout sa ^^

Zigee (Dimanche 06 Décembre 2009 à 16:02):

Bonjour Graf !

Voilà, j'avais eu un pépin avec le carrousel du coup j'avais dit que si je te sollicitais pour un bug, je t'achetais un autre tuto ! Bah voilà, j'ai acheté celui du chat et je vais pas tarder à t'en acheter un autre parce que j'ai à nouveau un problème sur ce tuto !!

Voilà, il me semble que la fonction clearInterval ne fonctionne pas dans mon cas.
Dans firebug, le script s'emballe dés que j'envoie un nouveau message. Comme si il ajoutait un nouveau SetInterval du coup à chaque post.

Si à l'occasion tu pouvais jeter un oeil de ce côté
http://www.scopland.com/sandbox/chat

En tout cas le carrousel marche à merveille et ce tuto est excellent.

Grafikart (Dimanche 06 Décembre 2009 à 19:29):

Lorsque tu fais
setInterval("getMessages()",5000);
Tu relance un timer du coup ils s'additionnent donc il faut que tu le supprime puis que tu le relance
clearInterval(timer);
timer = setInterval("getMessages()",5000);

Zigee (Lundi 07 Décembre 2009 à 11:15):

Argh, j'ai toujours l'impression qu'en tapant vite mes messages, le rechargement s'emballe encore. L'inconvénient c'est que par moment deux getMessages() sont appelés a quelques milisecondes d'écart et il y a donc répétition du messages postés.
J'avoue que là ça me dépasse.

Grafikart (Mardi 29 Décembre 2009 à 12:03):

Remplace le setInterval par un setTimeout que tu relance lorsque tu as finit de récupérer les messages.

Zigee (Dimanche 13 Décembre 2009 à 16:22):

Je suis toujours dans la panade

nbuis47 (Mardi 29 Décembre 2009 à 09:36):

Hello, une petite suggestion ou question... Comment faire pour qu'on puisse valider par la touche entrer ? Ce serait l'idéal, comme beaucoup on a le réflexe de taper son texte et valider par la touche entrer ! Une idée ??
Merci d'avance à tous, et encore félicitation à grafikart pour ses tutoriels plus que complets...

Grafikart (Mardi 29 Décembre 2009 à 12:02):

Ca se passe au niveau du javascript il faut "écouter" les actions du clavier et regardé quand la personne appuie sur entrer et lancer à ce moment là la soumission du formulaire. Je t'invite à faire des recherches sur la doc de jquery et sur google.

louisdsm (Samedi 02 Janvier 2010 à 15:31):

Hehe super le tchat mais le tchat public a des faiblesse non. On se connecter sans pseudos. Avec des balise <?php ?>, ou autre et pareil dans ton tutos pour les formulaire on peut utiliser du javascript et du html. Les expression réguliere est-elle la solution a c'est problémes???

quent1du58 (Vendredi 12 Février 2010 à 02:16):

Le mieux est encore de forcer l'utilisateur à s'inscrire ou tout simplement à mettre la zone de saisie entre les balises <xmp> et </xmp>.

ipika (Mardi 05 Janvier 2010 à 13:31):

Bonjour,

Le système n'est-elle pas trop lourde en requête SQL ?

Cordialement.

FOKDS (Vendredi 12 Février 2010 à 01:55):

Bonjour,
j'aime votre travail mais je rencontres les problemes suivant.

<br />
<b>Fatal error</b>: Call to undefined function: json_encode() in <b>/web/fokds/www/Tchat/tchatAjax.php</b> on line <b>70</b><br />

et

showLoader ne se masque pas il est toujours visible et mon messages ne s'affiche uniquement si je raffraichis ma pas manuellement

merci de votre aide

quent1du58 (Vendredi 12 Février 2010 à 02:12):

Deux questions:
1. Est-ce-que la fonction est appelée?
2. Est-ce-que la version de php est égale ou supérieure à la 5.2?

Arbiter0x (Samedi 20 Février 2010 à 16:04):

Bonjour,
Personnelement je n'ai eu aucune problème avec le tutoriel si on garde la mise en forme de base.

J'ai voulu changer la position du textaera et du bouton envoyer, j'ai donc mis
bottom : 10px; left: 50px;

Avec cette mise en forme là, quand on refresh pas la page tout seule, dés qu'il y a plus de 15 messages, les messages s'affichent en dessous du formulaire pour tchatter ... assez génant je trouve, personne n'aurai une solution ?

J'ai essayer les refresh auto de la page mais ca ne fonctionne pas :s

KentiinFR (Vendredi 26 Février 2010 à 11:50):

J'ai ce problème lors que je rentre on pseudo dans le champ:
Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at /home/j690874/domains/kentinworld.com/public_html/tchat/index.php:1) in /home/j690874/domains/kentinworld.com/public_html/tchat/index.php on line 4

Warning: Cannot modify header information - headers already sent by (output started at /home/j690874/domains/kentinworld.com/public_html/tchat/index.php:1) in /home/j690874/domains/kentinworld.com/public_html/tchat/index.php on line 30

Ligne de index.php: header("location:tchat.php");

j'ai télécharger la source/

webcap (Mardi 02 Mars 2010 à 18:59):

Bonjour,
moi je suis ravi de voir des tutos comme ceux proposé ici.
grand merci

par contre je test le tchat mais j'ai un soucis

var message = $('#chatform form textarea').val();
alert(message);
$.post(url,{ action:"addmessage",message:"message" },
function(data){
alert('fonction postée');
}, "json");

l'alert fonction posté ne fonctionne pas

je pense avoir bien tout suivi pourtant

merci d'avance si je pouvais comprendre pourquoi ca fonctionne pas

bibiphaue (Mercredi 10 Mars 2010 à 11:23):

AHHH JE Craque , je ne pige pas , pour avoir les messages en ordre inversés, c'est a dire le plus recent en haut, il faut changer la troisieme requêtes celle qui est dans le tchat.php , et de metttre un order by date asc , non ?

en tout cas moi j 'ai gerer ca de maniere bien barbare du coup tout est generé dans le code tchatajax php, pour le coup les autres requetes ne servent a rien: voici mon get message :
$d["lastid"]= $lastid;
while($data=mysql_fetch_assoc($req)){
$dnom= '<span class="affichercommentnom">'.$data["nom"].'</span>';
$dste= '<span class="afficherimageste"></span><span class="affichercommentste">'.$data["ste"].'</span>';
$dclr= '<p class="clr"></p>';
$dcontenu= '<DIV class="affichercommentcontenu"><p class="afficherimagefleche"></p>'.nl2br($data["contenu"]).'</div>';
$d1 = '<span class="afficherimagetime"></span>';
$d2 = '<span class="affichercommenttime">'.date("H.i",strtotime($data["date"])).'</span>';
$dtime = $d1.$d2;
/*$dtime = echo ("Message posté à" . date("H:i",strtotime($data["date"])));*/
$dcommentindividuel= '<script language="javascript">$(".commentindividuel").hide().fadeIn(800);</script><div class="commentindividuel">' .$dnom. $dtime . $dste. $dclr. $dcontenu. '</div>';
$d["result"] = $dcommentindividuel;
$d["lastid"] = $data["id"];
je pense que c est pas tres conventionnel ce genre d ecriture mais bon >...

en tout cas si quelqu un a une petite idee pour inverser les messages ca me plairait bien
a+

 

Ajouter un commentaire
Vous devez activer javascript.
 

 

Suivre les commentaires de ce tutoriel