Créer une messagerie instantanée (chat) PHP/Ajax Sans Base de Données

Une application de chat joue un rôle très important dans la communication en ligne aujourd’hui. Elle joue un rôle clé dans le succès de diverses plateformes comme Facebook, Google, WhatsApp, Skype, et bien d’autres. Elle est également devenue un composant du système de support en ligne aujourd’hui.

Donc dans ce tutoriel, vous allez apprendre à créer une application de chat ou une messagerie instantanée très basique basée sur un PHP et Ajax sans base de données. Voici a quoi rassemble notre application:
 

Exemple de notre application de chat:


 

L’architecture de notre application de chat:

Commençons par l’architecture de base de notre application de chat.
 


 
En général, l’architecture de chat a trois composants de base comme vous pouvez le voir dans l’organigramme ci-dessus. L’utilisateur, le contrôleur de chat(contient la logique du code) et le modèle(fichier text). Le rôle du contrôleur de chat est de prendre le message d’un utilisateur, de le stocker dans le modèle (chat.txt) et de l’acheminer vers l’autre utilisateur.

HTML, CSS3 et jQuery sont utilisés dans cette application pour concevoir l’interface utilisateur. Cette application a les 4 fichiers principaux :

  • index.php (Page d’accueil)
  • chat.php (Le contrôleur de chat)
  • data.txt (Le modèle)
  • style.css (Style CSS)

Le contenu de ces fichiers (sauf data.txt) est donné ci-dessous. Vous pouvez aussi télécharger le code source en cliquant sur ce lien.
 

Contenu du fichier index.php :
<?php
    session_start();
    //Créez une session
    if(isset($_POST['username'])){
      $_SESSION['username']=$_POST['username'];
    }
    //Annuler la session et déconnecter l'utilisateur du chat
    if(isset($_GET['logout'])){
      unset($_SESSION['username']);
      header('Location:index.php');
    }
    ?>
    <html>
    <head>
      <link rel="stylesheet" href="style.css" />
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/1.1.9/js/libs/jquery-1.10.2.min.js"></script>
    </head>
    <body>
    <div class='header'>
      <h1>
        SALLE DE DISCUSSION WAYTOLEARNX
        <?php if(isset($_SESSION['username'])) { ?>
          <a class='logout' href="?logout">Déconnexion</a>
        <?php } ?>
      </h1>
    </div>
    <div class='framechat'>
    <!-- Vérifier si l'utilisateur est connecté ou non -->
    <?php if(isset($_SESSION['username'])) { ?>
    <div id='result'></div>
    <div class='chatbody'>
      <form method="post" onsubmit="return lancerlechat();">
      <input type='text' name='chat' id='msgbox' placeholder="Tapez votre message ICI" />
      <input type='submit' name='send' id='send' class='btn btn-send' value='Envoyer' />
      <input type='button' name='clear' class='btn btn-clear' id='clear' value='X' title="Effacer la discussion" />
    </form>
    <script>
    // Fonction Javascript pour soumettre le nouveau chat entré par l'utilisateur
    function lancerlechat(){
        if($('#chat').val()=='' || $('#msgbox').val()==' ') return false;
        $.ajax({
          url:'chat.php',
          data:{msg:$('#msgbox').val(), send:true},
          method:'post',
          success:function(data){
			// Récupérer les enregistrements du chat et les ajouter à div avec id=result
            $('#result').html(data); 
			//Effacer la boîte de dialogue après une soumission réussie
            $('#msgbox').val(''); 
			// Ramener la barre de défilement au bas dans le cas où le chat est longue
            document.getElementById('result').scrollTop=document.getElementById('result').scrollHeight; 
          }
        })
        return false;
    };
    // Fonction permettant de vérifier à tout moment si quelqu'un a soumi un nouveau chat.
    setInterval(function(){
      $.ajax({
          url:'chat.php',
          data:{get:true},
          method:'post',
          success:function(data){
            $('#result').html(data);
          }
      })
    },1000);
    // Fonction d'accès à l'historique des chats
    $(document).ready(function(){
      $('#clear').click(function(){
        if(!confirm('Êtes-vous sûr de vouloir effacer le chat?'))
          return false;
        $.ajax({
          url:'chat.php',
          data:{username:"<?php echo $_SESSION['username'] ?>", clear:true},
          method:'post',
          success:function(data){
            $('#result').html(data);
          }
        })
      })
    })
    </script>
    <?php } else { ?>
    <div class='controlepanel'>
      <form method="post">
        <input type='text' class='input-user' placeholder="SAISISSEZ VOTRE NOM ICI" name='username' />
        <input type='submit' class='btn btn-user' value='Démarrer le chat' />
      </form>
    </div>
    <?php } ?>
    </div>
    </body>
    </html>

 

Contenu du fichier Chat.php :
<?php
    session_start();
    if(isset($_POST['send']) && $_POST['send']==true)
	{
      // Code pour sauvegarder et envoyer le chat
      $msgs = fopen("data.txt", "a");
      $data="<b>".$_SESSION['username'].':</b> '.$_POST['msg']."<br>";
      fwrite($msgs,$data);
      fclose($msgs);
      $msgs = fopen("data.txt", "r");
      echo fread($msgs,filesize("data.txt"));
      fclose($msgs);
    } else if(isset($_POST['get']) && $_POST['get']==true)
	{
      // Code pour envoyer l'historique du chat à l'utilisateur
      $msgs = fopen("data.txt", "r");
      echo fread($msgs,filesize("data.txt"));
      fclose($msgs);
    } else if(isset($_POST['clear']) && $_POST['clear']==true)
	{
      // Code pour effacer l'historique des chats
      $msgs = fopen("data.txt", "w");
      $data="<b>".$_SESSION['username']."</b> a effacé l'historique du chat.<br>";
      fwrite($msgs,$data);
      fclose($msgs);
    }

 

Contenu du fichier Style.css :
body{margin:0; padding: 0; font-family: 'Open Sans', sans-serif, arial; font-size: 14px; background: #FFD700; overflow: hidden;}
*{font-family: 'Open Sans', sans-serif, arial; font-size: 14px; color:#555; }
.framechat{max-width:1024px; width:100%; margin:auto;}
.header{background: black}
.header h1{max-width:1024px; width:100%; margin:0 auto; padding:10px 0; font-size: 20px; color: #fff; text-align: center; font-weight: 300}
.controlepanel{margin: auto; text-align: center; margin-top: 24%}
.input-user{padding: 10px; border: solid 2px #c9c9c9; width:250px}
.btn {border:1px solid #314179; color:#ffffff;}
.btn-user{padding:9px 30px; position: relative; top: 0px; font-size: 16px; font-weight: 300; background-color:#637aad}
#result{max-width:1024px; width:100%; padding:10px; background: #f1f1f1; max-height: 80%; overflow-y:auto;}
.chatbody{position: fixed; bottom: 0; width: 100%}
.chatbody form{margin: 0}
#msgbox{padding: 10px 10px; width: 56%; height: 60px; margin-bottom: 7px;}
.btn-send{font-size: 20px; padding: 15px; font-weight: 300; background-color:green}
.btn-clear{padding: 15px 25px; font-size: 20px; font-weight: 300; background-color:red}
.logout{float: right; color: #fff; text-decoration: none; font-size: 15px}

Vous pouvez aussi télécharger le code source en cliquant sur ce lien.
 

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.