Accentsconagua

Comment créer une application de conversation Web simple

Code
Share

Dans ce didacticiel, nous allons créer une application de discussion Web simple avec PHP et jQuery. Ce type d’utilitaire serait parfait pour un système de support en direct pour votre site Web..

Si vous recherchez une application, un script ou un plug-in prêt à l'emploi, vous pouvez jeter un coup d'œil à l'un des nombreux scripts de conversation disponibles sur CodeCanyon. Ou vous pouvez engager un développeur d'applications expérimenté pour vous aider.

Sinon, apprenez à en construire un vous-même dans ce tutoriel..

introduction

L'application de chat que nous allons créer aujourd'hui sera assez simple. Il comprendra un système de connexion et de déconnexion, des fonctionnalités de style AJAX, et offrira également une assistance à plusieurs utilisateurs..

Étape 1: balisage HTML

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

   Chat - Module client   
 
 
Bienvenue, 
 
Quitter le chat
  • Nous commençons notre html avec les balises habituelles DOCTYPE, html, head et body. Dans la balise head, nous ajoutons notre titre et un lien vers notre feuille de style css (style.css)..
  • À l'intérieur de la balise body, nous structurons notre mise en page à l'intérieur de #wrapper div. Nous aurons trois blocs principaux: un menu simple, notre boîte de discussion et notre entrée de message; chacun avec ses div et id respectifs.
    • Le #menu div sera composé de deux éléments de paragraphe. Le premier sera le bienvenu de l'utilisateur et flottera à gauche et le second sera un lien de sortie et flottera à droite. Nous incluons également une div pour effacer les éléments.
    • La div #chatbox contiendra notre chatlog. Nous allons charger notre journal depuis un fichier externe en utilisant la requête ajax de jQuery.
    • Le dernier élément de notre div #wrapper sera notre formulaire, qui comprendra une entrée de texte pour le message de l'utilisateur et un bouton d'envoi.
  • Nous ajoutons nos scripts en dernier pour charger la page plus rapidement. Nous allons d’abord nous connecter au CDN de jQuery Google, car nous utiliserons la bibliothèque jQuery pour ce didacticiel. Notre deuxième balise de script sera celle sur laquelle nous allons travailler. Nous chargerons tout notre code une fois le document prêt.

Étape 2: style CSS

Nous allons maintenant ajouter quelques css pour rendre notre application de chat plus belle qu'avec le style de navigateur par défaut. Le code ci-dessous sera ajouté à notre fichier style.css.

 / * Document CSS * / body font: 12px arial; couleur: # 222; text-align: center; rembourrage: 35px;  forme, p, span marge: 0; rembourrage: 0;  input font: 12px arial;  a color: # 0000FF; texte-décoration: aucun;  a: hover text-decoration: underline;  #wrapper, #loginform margin: 0 auto; rembourrage en bas: 25px; arrière-plan: # EBF4FB; largeur: 504px; bordure: solide 1px # ACD8F0;  #loginform padding-top: 18px;  #loginform p margin: 5px;  #chatbox text-align: left; marge: 0 auto; marge inférieure: 25 px; rembourrage: 10px; background: #fff; hauteur: 270px; largeur: 430px; bordure: solide 1px # ACD8F0; débordement: auto;  #usermsg width: 395px; bordure: solide 1px # ACD8F0;  #submit width: 60px;  .error color: # ff0000;  #menu padding: 12.5px 25px 12.5px 25px;  .welcome float: left;  .logout float: right;  .msgln margin: 0 0 2px 0;

Le CSS ci-dessus n'a rien de spécial à part le fait que certains identifiants ou classes, pour lesquels nous avons défini un style, seront ajoutés un peu plus tard.

Comme vous pouvez le voir ci-dessus, nous avons fini de construire l'interface utilisateur du chat.

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

Nous allons maintenant mettre en place un formulaire simple qui demandera à l’utilisateur son nom avant de continuer..

 
 
Veuillez entrer votre nom pour continuer:
'; if (isset ($ _ POST ['enter'])) if ($ _ POST ['name']! = "") $ _SESSION ['name'] = stripslashes (htmlspecialchars ($ _ POST ['name']) ) else echo 'Veuillez taper un nom'; ?>

La fonction loginForm () que nous avons créée est composée d'un simple formulaire de connexion qui demande à l'utilisateur son nom. Nous utilisons ensuite une instruction if et else pour vérifier que la personne a saisi un nom. Si la personne a entré un nom, nous le définissons comme suit: $ _SESSION ['name']. Puisque nous utilisons une session basée sur les cookies pour stocker le nom, nous devons appeler session_start () avant que quoi que ce soit ne soit envoyé au navigateur..

Une chose à laquelle vous voudrez peut-être accorder une attention particulière est que nous avons utilisé la fonction htmlspecialchars (), qui convertit les caractères spéciaux en entités HTML, protégeant ainsi la variable de nom de devenir victime à Cross-site Scripting (XSS). Nous ajouterons plus tard cette fonction à la variable de texte qui sera publiée dans le journal de discussion..

Affichage du formulaire de connexion

Afin d'afficher le formulaire de connexion au cas où un utilisateur ne se serait pas connecté et n'aurait donc pas créé de session, nous utilisons une autre instruction if et else autour des balises #wrapper div et script dans notre code d'origine. Dans le cas contraire, cela masquera le formulaire de connexion et affichera la boîte de discussion si l'utilisateur est connecté et a créé une session.

 
 
 
Bienvenue, 
 
Quitter le chat

Menu de bienvenue et de déconnexion

Nous n'avons pas encore fini de créer le système de connexion pour cette application de discussion. Nous devons toujours autoriser l'utilisateur à se déconnecter et à mettre fin à la session de discussion. Si vous vous en souvenez, notre balisage HTML original comprenait un menu simple. Revenons en arrière et ajoutons du code PHP qui donnera plus de fonctionnalités au menu..

Tout d’abord, ajoutons le nom de l’utilisateur au message de bienvenue. Nous faisons cela en affichant la session du nom de l'utilisateur.

Bienvenue,

Afin de permettre à l'utilisateur de se déconnecter et de mettre fin à la session, nous allons passer à autre chose et utiliser brièvement jQuery..

Le code jquery ci-dessus simple indique une alerte de confirmation si un utilisateur clique sur le lien #exit. Si l'utilisateur confirme la sortie et décide de mettre fin à la session, nous l'enverrons à index.php? Logout = true. Ce simple crée une variable appelée logout avec la valeur true. Nous devons attraper cette variable avec PHP:

if (isset ($ _ GET ['logout']))) // Message de sortie simple $ fp = fopen ("log.html", 'a'); fwrite ($ fp, "
Utilisateur ". $ _SESSION ['name']." a quitté la session de chat.
"); fclose ($ fp); session_destroy (); en-tête (" Location: index.php "); // Redirige l'utilisateur

Nous voyons maintenant si une variable get de 'logout' existe en utilisant la fonction isset (). Si la variable a été transmise via une URL, telle que le lien mentionné ci-dessus, nous procédons à la fin de la session du nom de l'utilisateur..

Avant de détruire le nom de l'utilisateur session avec la fonction session_destroy (), nous souhaitons écrire un simple message de sortie dans le journal de discussion. Il dira que l'utilisateur a quitté la session de discussion. Nous faisons cela en utilisant les fonctions fopen (), fwrite () et fclose () pour manipuler notre fichier log.html, qui, comme nous le verrons plus tard, sera créé comme journal de discussion. Veuillez noter que nous avons ajouté une classe de "msgln" à la div. Nous avons déjà défini le style CSS pour cette div.

Après cela, nous détruisons la session et redirigeons l’utilisateur vers la même page où le formulaire de connexion apparaîtra..

Étape 4: Traitement de la saisie utilisateur

Une fois qu'un utilisateur a soumis notre formulaire, nous souhaitons saisir son entrée et l'écrire dans notre journal de discussion. Pour ce faire, nous devons utiliser jQuery et PHP pour travailler de manière synchrone côté client et côté serveur..

jQuery

Presque tout ce que nous allons faire avec jQuery afin de traiter nos données, tournera autour de la demande de publication jQuery.

 // Si l'utilisateur soumet le formulaire $ ("# submitmsg"). Click (function () var clientmsg = $ ("# usermsg"). Val (); $ .post ("post.php", text: clientmsg ); $ ("# usermsg"). attr ("valeur", ""); retourne false;);
  1. Avant de faire quoi que ce soit, nous devons récupérer la saisie de l'utilisateur, ou ce qu'il a saisi dans l'entrée #submitmsg. Cela peut être réalisé avec la fonction val (), qui obtient la valeur définie dans un champ de formulaire. Nous stockons maintenant cette valeur dans la variable clientmsg.
  2. Voici notre partie la plus importante: la demande de publication jQuery. Cela envoie une demande POST au fichier post.php que nous allons créer dans un instant. Il poste l'entrée du client ou ce qui a été enregistré dans la variable clientmsg.
  3. Enfin, nous effaçons l'entrée #usermsg en définissant l'attribut value à blank.

Veuillez noter que le code ci-dessus ira dans notre balise de script, où nous avons placé le code de déconnexion jQuery..

PHP - post.php

À l'heure actuelle, des données POST sont envoyées dans le fichier post.php chaque fois que l'utilisateur soumet le formulaire et envoie un nouveau message. Notre objectif est maintenant de récupérer ces données et de les écrire dans notre journal de discussion..

(".date (" g: i A ").") ". $ _SESSION ['name'].": ".stripslashes (htmlspecialchars ($ text))."
"); fclose ($ fp);?>
  1. Avant de faire quoi que ce soit, nous devons démarrer le fichier post.php avec la fonction session_start (), car nous utiliserons la session du nom de l'utilisateur dans ce fichier..
  2. En utilisant le isset boolean, nous vérifions si la session pour 'name' existe avant de faire quoi que ce soit d'autre.
  3. Nous allons maintenant récupérer les données POST envoyées par jQuery dans ce fichier. Nous stockons ces données dans la variable $ text.
  4. Ces données, comme toutes les données d’entrée générales de l’utilisateur, seront stockées dans le fichier log.html. Pour ce faire, nous ouvrons le fichier avec le mode de la fonction fopen sur 'a', ce qui, selon php.net ouvre le fichier en écriture uniquement; place le pointeur de fichier à la fin du fichier. Si le fichier n'existe pas, essayez de le créer. Nous écrivons ensuite notre message dans le fichier en utilisant la fonction fwrite ().
    • Le message que nous écrirons sera enfermé à l'intérieur du div .msgln. Il contiendra la date et l'heure générées par la fonction date (), la session du nom de l'utilisateur et le texte, qui est également entouré par la fonction htmlspecialchars () pour empêcher l'utilisation de XSS..

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

Étape 5: Affichage du journal de discussion (log.html) Contenu

Tout ce que l'utilisateur a posté est traité et posté à l'aide de jQuery; il est écrit dans le journal de discussion avec PHP. Il ne reste plus qu'à afficher le journal de discussion mis à jour à l'utilisateur..

Afin de gagner du temps, nous allons précharger le journal de discussion dans le #chatbox div s'il contient du contenu..

 
 0) $ handle = fopen ("log.html", "r"); $ contents = fread ($ handle, taille du fichier ("log.html")); fclose ($ handle); echo $ content; ?>

Nous utilisons une routine similaire à celle du fichier post.php, sauf que cette fois, nous lisons et n'extrayons que le contenu du fichier..

La demande jQuery.ajax

La demande ajax est au cœur de tout ce que nous faisons. Cette requête nous permet non seulement d’envoyer et de recevoir des données via le formulaire sans actualiser la page, mais également de gérer les données demandées..

// Charge le fichier contenant la fonction de journal de discussion loadLog () $ .ajax (url: "log.html", cache: false, succès: function (html) $ ("# chatbox"). Html (html) ; // Insérer le journal de discussion dans le #chatbox div,);

Nous encapsulons notre requête ajax dans une fonction. Vous verrez pourquoi dans une seconde. Comme vous le voyez ci-dessus, nous n'utiliserons que trois des objets de requête jQuery ajax.

Comme vous le voyez, nous déplaçons ensuite les données demandées (html) dans la #chatbox div.

Défilement automatique

Comme vous l'avez peut-être vu dans d'autres applications de conversation, le contenu défile automatiquement vers le bas si le conteneur de journal de discussion (#chatbox) déborde. Nous allons implémenter une fonctionnalité simple et similaire, qui comparera la hauteur de défilement du conteneur avant et après la requête ajax. Si la hauteur de défilement est supérieure à la demande, nous utiliserons l'effet d'animation de jQuery pour faire défiler la div #chatbox..

 // Charge le fichier contenant la fonction de journal de discussion loadLog () var oldscrollHeight = $ ("# chatbox"). Attr ("scrollHeight") - 20; // Défilement de la hauteur avant la requête $ .ajax (url: "log.html", cache: false, succès: function (html) $ ("# chatbox"). Html (html); // Insérer le journal de discussion dans la #chatbox div // Défilement automatique var newscrollHeight = $ ("# chatbox"). attr ("scrollHeight") - 20; // Défilement en hauteur après la demande if (newscrollHeight> oldscrollHeight) $ ("# # chatbox") .animate (scrollTop: newscrollHeight, 'normal'); // défilement automatique au bas de la div,);

Mise à jour continue du journal de discussion

Maintenant, une question peut se poser, comment allons-nous constamment mettre à jour les nouvelles données échangées entre les utilisateurs? Ou pour reformuler la question, comment allons-nous continuer à envoyer des demandes pour mettre à jour les données?

setInterval (loadLog, 2500); // Recharger le fichier toutes les 2500 ms ou x ms si vous souhaitez modifier le second paramètre

La réponse à notre question réside dans la fonction setInterval. Cette fonction exécutera notre fonction loadLog () toutes les 2,5 secondes et la fonction loadLog demandera le fichier mis à jour et fera défiler automatiquement le fichier div..

Fini

Nous avons finis! J'espère que vous avez appris comment fonctionne un système de discussion de base et si vous avez des suggestions à formuler, je les en accueillerai avec plaisir. Ce système de discussion est simple, comme vous pouvez le faire avec une application de discussion. Vous pouvez y travailler et créer plusieurs salles de conversation, ajouter un serveur administratif, ajouter des émoticônes, etc. Le ciel est votre limite.

De plus, si vous avez besoin d'une application ou d'un plugin professionnel pour votre prochain projet, vous pouvez jeter un coup d'œil à l'un des nombreux scripts de chat que nous avons en vente sur CodeCanyon.. 

Vous trouverez ci-dessous quelques liens que vous voudrez peut-être vérifier si vous envisagez d'étendre cette application de discussion en ligne:

Apprendre JavaScript: le guide complet

Nous avons créé un guide complet pour vous aider à apprendre le JavaScript, que vous soyez débutant en tant que développeur Web ou que vous souhaitiez explorer des sujets plus avancés..

Code
×