Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Comment Créer Une Application Chat Web Simple

by
Difficulty:BeginnerLength:LongLanguages:

French (Français) translation by Flavien B (you can also view the original English article)

Dans ce tutoriel, nous allons créer un chat avec PHP et jQuery. Cette sorte d'application serait parfaite pour un système de support live pour votre site.

Introduction

final product

L'application chat que nous allons construire aujourd'hui va être assez simple. Elle va inclure un système d'identification/déconnexion, utilisant Ajax et va aussi supporter les utilisateurs multiples.  


Etape 1 : Balisage (code) HTML

Nous allons commencer ce tutoriel en créant notre premier fichier appellé : index.php

  • Nous commençons notre html avec l'habituel DOCTYPE, html, head, tags body. Dans l'entête (balise head), nous ajoutons notre titre et nos liens à nos feuilles de style css (style.css)
  • Dans la balise body, nous structurons notre schéma à l'intérieur de la div #wrapper Nous allons avoir trop blocks principaux : un simple Menu, notre boite de chat et notre entrée pour écrire les messages; chacun avec son id et son div respectif.
    • Le div #menu va être constitué de deux éléments de paragraphe. Le premier sera un accueil à l'utilisateur et flottera à gauche et le second aura un lien de "sortie" et flottera à droite. Nous incluons aussi une div pour réinitialiser les éléments.
    • La div #chatbox va contenir notre journal du chat (log). Nous allons charger notre journal (log) à partir d'un fichier externe en utilisant une requête jQuery/Ajax.
    • Le dernier élément dans notre div #wrapper va être notre formulaire, qui va inclure une entrée texte pour le message de l'utilisateur et un boutton d'envoi.
  • Nous ajoutons nos scriptes en dernier pour charger la page plus rapidement. Nous allons premièrement nous connecter au jQuery de Google, étant donné que nous utilisons la librairie jQuery pour ce tutoriel. Notre second tag script va être celui dont nous allons travailler dessus. Nous allons charger tout notre code après que le document (page) soit prêt.

Etape 2 : Le CSS

Nous allons maintenant ajouter un peu de css pour rendre notre chat visuellement correct dans le look des navigateurs par défault. Le code ci-dessous va être ajouté à notre fichier style.css.

Il n'y a rien de spécial à propos du css hormis le fait que quelques "id" ou "classes", pour qui nous avons à créer un design, vont être ajoutées un peu plus tard.

Comme vous pouvez le voir ci-dessus, nous avons terminé de construire l'interface chat pour l'utilisateur.

Etape 3 : Utiliser PHP pour créer un formulaire de connexion.

Maintenant, nous allons implémenter un formulaire simple qui va demander à l'utilisateur son nom avant de continuer.

La fonction loginForm() que nous avons créée est composée d'un simple formulaire d'identification qui va demander le nom à l'utilisateur. Nous utilisons ensuite des conditions pour vérifier si la personne a entré un nom. Si la personne a entré un nom, nous initialisons son nom dans la variable $_SESSION['name'] Puisque nous utilisons une session basée sur les cookies pour enregistrer le nom, nous devons appeller session_start() avant que n'importe quel élément soit affiché au navigateur.

Une chose dont vous devriez prêter attention, est que nous avons utilisé la fonction htmlspecialchars(), qui convertie les caractères spéciaux en entités HTML, protégeant ainsi la variable du nom de la victime à être atteinte par le "Cross-site scripting (XSS)". Nous allons ensuite également ajouter cette fonction à la variable du texte qui va être posté dans le journal de chat.

Montrer le formulaire de connexion

Afin de montrer le formulaire de connexion si l'utilisateur n'est pas déjà connecté, et qu'il n'a pas de session stockée, nous utilisons d'autres conditions autour de la div #wrapper et de notre tag script à l'intérieur de notre code original. Dans le cas opposé, ceci va cacher le formulaire de connexion et montrer le "chat box" si l'utilisateur est connecté et qu'il a une session initialisée.

Menu de bienvenue et de déconnexion

Nous n'avons pas encore totalement terminé de créer le système de connexion pour le chat. Nous avons toujours besoin que l'utilisateur se déconnecte et termine la session du chat. Si vous pouvez vous en rappeller, notre code HTML original incluais un simple menu. Retournons ajouter quelque code PHP qui va donner au menu plus de fonctionnalité.

Premièrement, ajoutons le nom de l'utilisateur et le message de bienvenue. Nous faisons ceci en montrant la session du nom de l'utilisateur.

Afin d'autoriser l'utilisateur à se déconnecter et à terminer la session, nous allons sauter en avant de nous-mêmes et utiliser brièvement jQuery.

Le code jQuery ci dessus montre simplement un boite "alert" si un utilisateur clique sur le lien de déconnexion. Si l'utilisateur comfirme la sortie, nous dicidons donc de terminer la session et le redirigeons vers index.php?logout=true. Ceci créé seulement une variable appellée logout avec pour valeur "true". Nous avons besoin de capturer cette variable avec PHP:

Nous voyons maintenant si une variable "get" de "logout" existe en utilisant la fonction isset(). Si la variable a été communiquée via une url, tout comme le lien mentionné ci dessus, nous procédons à la fin de session du nom de l'utilisateur.

Avant de détruire la session du nom de l'utilisateur avec la fonction session_destroy(), nous voulons écrire un simple message de déconnexion dans le journal du chat. Il va dire que l'utilisateur à quitter la session du chat. Nous faisons ceci en utilisant les fonctions fopen(), fwrite(), et fclose() pour manipuler notre fichier log.html qui comme nous allons le voir plus tard, va être créé tout comme notre journal de chat. Merci de noter que nous avons ajouté la class "msgln" à la div. Nous avons défini défini le style css pour cette div.

Après avoir fait ça, nous détruisons la session et redirigeons l'utilisateur à la même page où le formulaire de connexion va apparaitre.


Etape 4 : Récupérer Les Entrées De l'Utilisateur

Après que l'utilisateur envoie notre formulaire, nous voulons récupérer ses entrées et les écrire dans notre journal de chat. Afin de faire ceci, nous devons utiliser jQuery et Php pour travailler de manière synchronisée du côté client et serveur.

jQuery

A peu près tout ce que nous allons faire avec jQuery dans le but de récupérer nos informations, va tourner autour des requêtes "post" jQuery.

  1. Avant que nous faisons quoi que ce soit, nous devons récupérer les entrées de l'utilisateur, ou ce qu'il a tapé dans l'entrée #submitmsg. Nous pouvons le faire avec la fonction val(), qui va récupérer la valeur entrée dans un champ de formulaire. Nous stockons maintenant cette valeur à l'intérieur de la variable clientmsg.
  2. Ici arrive la partie la plus importante: les requêtes "post" jQuery. Ceci envoie une requête POST au fichier post.php que nous allons créer dans un moment. Elle va poster les entrées du client, ou ce qui a été sauvegardé à l'intéreur de la variable clientmsg.
  3. En dernier, nous réinitialisons l'entrée #usermsg en mettant sa valeur à "blank".

Merci de noter que le code ci dessus va aller dans notre tag de script où nous avon placé notre code de déconnexion jQuery.

PHP - post.php

Au moment où nous avons POSTé les informations en train d'être envoyées au fichier post.php à chaque fois que l'utilisateur envoit le formulaire, et envoit un nouveau message. Notre but est maintenant de récupérer cette donnée, et l'écrivons dans notre journal de chat.

  1. Avant de faire quoi que ce soit, nous devons commencer le fichier post.php avec la fonction session_start(), étant donné que nous allons utiliser la session du nom de l'utilisateur dans ce fichier.
  2. En utilisant la fonction isset(), nous vérifions si la session nommée "name" existe avant de faire quoi que ce soit.
  3. Nous prenons maintenant l'information POSTée qui était en train d'être envoyée à ce fichier via jQuery. Nous stockons cette donnée dans la variable $text
  4. Ces données, de même que toutes les données d'ensemble d'entrée de l'utilisateur, seront stockées sur le fichier log.html. Pour ce faire, nous ouvrons le fichier avec le mode de la fonction fopen à «un», qui, selon php.net ouvre le fichier en écriture seule; place le pointeur du fichier à la fin du fichier. Si le fichier n'existe pas, nous tantons de le créer. Nous écrivons ensuite notre message dans le fichier en utilisant la fonction fwrite().
    • Le message que nous allons écrire va être inclus à l'intérieur de la div .msgln. Il va contenir la date et l'heure générée par la fonction date(), la session "name" de l'utilisateur et le texte, qui est également contrôlé par la fonction htmlspecialchars() pour prévenir les failles XSS.

    Enfin, nous fermons notre fichier en utilisant fclose().


Etape 5 : Montrer le journal de chat (log.html) Contenu

Tout ce que l'utilisateur a posté est récupéré et posté en utilisant jQuery; c'est écrit dans le journal de chat avec PHP. La seule chose qui reste à faire est d'afficher le journal de chat mis à jour à l'utilisateur.

Afin de nous faire gagner du temps, nous allons pré-charger le journal de chat dans la div #chatbox si il n'y a aucun contenu.

Nous utilisons la même routine comme nous avons utilisé le fichier post.php, sauf que cette fois nous ne lisons et délivrons le contenu du fichier.

La requête jQuery/Ajax

La requête ajax est le coeur de tout ce que nous sommes en train de faire. Cette demande nous permet non seulement d'envoyer et recevoir des données via le formulaire sans rafraîchir la page, mais il nous permet également de gérer les données demandées.

Nous terminerons notre requête Ajax dans une fonction. Vous avez voir pourquoi dans quelques secondes. Comme vous pouvez le voir ci dessus, nous allons seulement utiliser trois des objet-requête jQuery /Ajax.

  • url: Une chaine de caractère de l'URL à la requête. Nous allons utiliser le nom du fichier de notre journal de chat : log.html.
  • cache: Ceci va prévenir notre fichier d'être mis en cache. Il va s'assurer que nous obtenons une mise à jour du journal de chat à chaque fois que nous envoyons un requête.
  • succès: Ceci va nous permettre d'attacher une fonction qui va transmettre les données que nous avons mis en requête.

Comme vous pouvez le voir, nous déplaçons ensuite les informations que nous avons demandé (html) à l'intérieur de la div #chatbox.

Défilement automatique

Comme vous avez pu le voir dans d'autres applications de chat, le contenu défile automatiquement vers le bas si le conteneur du journal de chat (#chatbox) déborde. Nous allons implémenter une fonction simple et similaire qui va comparer le défilement haut du conteneur avant et après que nous ayons fait notre requête ajax. Si le défilement vers le haut est supérieur après la requête, nous allons utiliser une animation jQuery pour défiler la div #chatbox.

  • Nous allons premièrement stocker la hauteur du défilement de la div #chatbox à l'intérieur de la variable oldscrollHeight avant de faire la requête.
  • Après que notre requête ai retourné un "succès", nous stocker la hauteur du défilement de la div à l'intérieur de la variable newscrollHeight.
  • Nous allons ensuite comparer les deux hauteurs de défilement en utilisant des conditions. Si la valeur de la variable newscrollHeight est supérieur à oldscrollHeight, nous utilisons l'animation pour défiler la div #chatbox.

Mettre à jour continuellement le journal de chat

Maintenant, une question peut se poser, comment allons-nous mettre constamment à jour les nouvelles données envoyées et reçus entre les utilisateurs? Ou pour réécrire la question, comme allons nous continuellement envoyer les requêtes pour mettre à jours les données ?

La réponse à notre question tient en la fonction setInterval. Cette fonction va lancer notre fonction loadLog() toutes les 2.5 secondes et la fonction loadLog va demander à rafraichir et automatiquement défiler la div.

Finit !

Nous avons terminé ! J'espère que vous avec appris comment un système basique de chat fonctionne, et si vous souhaitez poser n'importe quelle question ou si vous avez une suggestion ou bien quoi que ce soit, je les acceuillerait joyeusement. Ce système de chat est aussi simple que ce que vous pouvez obtenir avec une application de chat. Vous pouvez bien entendu retravailler ce script et construire un système de salles de chat, ajouter un backend administratif, ajouter des émoticônes, ect... Le ciel est votre seule limite.

Ci dessous, il y a certains liens qui pourraient vous intéressait si vous souhaitez améliorer cette application.

  • Suivez nous sur Twitter , ou abonnez vous au flux NETTUTS RSS Feed pour des tutos et articles quotidiens à propos du développement web.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.