[AJAX] Tchat et notification d'écriture

**zeclubbeur** · 30/09/2011, 13h16

Bonjour

Voilà, je vous expose mon interrogation

J'ai développé un petit Tchat utilisant du Long Polling.
L'affichage du tchat fonctionne très bien. Quand les deux personnes se parlent, ça s'affiche.

Partant de là, j'ai voulu implémenter une notification d'écriture : Quand une personne écrit, cela affiche chez l'autre qu'il est en train d'écrire.

J'ai donc "bricolé" un système qui, allie js et php.
L'algorithme de notification est le suivant :
On mesure la taille de la chaîne dans le champ de saisie par l'utilisateur A.
Si la taille de chaîne de saisie est supérieure à zéro, on modifie le fichier de notification de l'utilisateur A pour le mettre à 1.
Sinon, On modifie le fichier de notification de l'utilisateur A pour le mettre à 0.

L'algorithme de lecture est le suivant :
On ouvre le fichier de notification de l'utilisateur ne correspondant pas à l'utilisateur qui lit le tchat.
On retourne le contenu du fichier.

Là, JS prend le relais.
Si la valeur de réponse est un entier supérieur à 0
on affiche sur le navigateur l'icone de notification d'écriture.

Pour faire tout ça, j'utilise une fonction AJAX qui va exécuter un bout de code php permettant d'interroger le contenu des fichiers sur le serveur et afficher la réponse sur le navigateur)
Cette fonction est récursive, donc, se boucle sur elle-même toutes les 500ms (valeur arbitraire) afin de faire une notification instantanée.

J'aurais aimé savoir si il n'existait pas une méthode plus "propre" plutôt que l'usine à gaz que j'utilise ^^

J'espère que vous avez saisi le système.

Merci,
ZeClubbeur

**bewidia** · 30/09/2011, 17h29

C'est effectivement la solution qui vient me viendrait à l'esprit pour faire ce que tu veux faire. C'est lourd, principalement parce qu'à la base, les sites internet ne sont pas fait pour ça (le serveur répond à un client web, il ne le contacte pas spontanément)

Il existe cependant un framework Javascript qui propose une telle solution :
http://www.ape-project.org/

Je ne l'ai pas utilisé donc je en sais pas ce que ca vaut, mais la démo est impressionnante.

**zeclubbeur** · 01/10/2011, 13h15

Merci

En général, je fuis les framworks simplement parce que ça oblige à être dépendant des concepteur du framwork. Mais je regarderais bien comment ils font ^^

Invité · 01/10/2011, 22h37

Bonsoir,
Je ne comprends rien a ton affaire, car depuis longtemps je poste un tchat ou autant de visiteurs peuvent tchater en même temps, tout cela avec un AJAX classique enfantin et de l'autre coté le PHP qui gére MySql !

Je dirais presque qu'il sagirait d'un exemple type d'AJAX

Bon alors dison du trés trés basique mais qui marchera de suite
si tu le mets sur un site et invite un ami a tchater avec toi !
ou tout seul en local.
Aprés cela a toi d'ajouter des trucs en plus, et mettre en forme
ton environement !
deux tables basiques
(pour le teste respectes les noms de tables et PHP...)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
--
-- Structure de la table `ajax_tchat_messages`
--
 
DROP TABLE IF EXISTS `ajax_tchat_messages`;
CREATE TABLE IF NOT EXISTS `ajax_tchat_messages` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `pseudo` varchar(60) NOT NULL,
  `pseudoid` int(11) NOT NULL,
  `message` varchar(255) NOT NULL,
  `date` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=15 ;
 
--
-- Contenu de la table `ajax_tchat_messages`
--
 
INSERT INTO `ajax_tchat_messages` (`id`, `pseudo`, `pseudoid`, `message`, `date`) VALUES
(1, 'vinc', 1, 'Super sympa ce tchat', 1256932662),
(2, 'topaze', 4, 'J''aime pas les chats', 1256929881),
(3, 'vinc', 1, 'Salut le tchat marche ?', 1256926870),
(4, 'vinc', 1, 'Salut moi c''est vinc Poster une nouvelle valeur', 1256928232),
(5, 'vinc', 1, 'Re salut', 1256928327),
(6, 'vinc', 1, 'azzeazea', 1256928426),
(7, 'christele', 7, 'avec les avatars super plus', 1287755594),
(8, 'christele', 7, 'Ã§a va effacer', 1287910552),
(9, 'christele', 7, 'alors on efface', 1287910235),
(10, 'christele', 7, 'oui oui Ã§a va le faire', 1287909933),
(11, 'christele', 7, 'alors Ã§a vient', 1287911049),
(12, 'vinc', 1, 'Ã©patent', 1287913077),
(13, 'christele', 7, 'whaou', 1299491366),
(14, 'christele', 7, 'bon voila ', 1302526621);
 
--
-- Structure de la table `ajax_tchat_user`
--
 
DROP TABLE IF EXISTS `ajax_tchat_user`;
CREATE TABLE IF NOT EXISTS `ajax_tchat_user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `pseudo` varchar(60) NOT NULL,
  `ip` varchar(15) NOT NULL,
  `date` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;
 
--
-- Contenu de la table `ajax_tchat_user`
--
 
INSERT INTO `ajax_tchat_user` (`id`, `pseudo`, `ip`, `date`) VALUES
(1, 'vinc', '127.0.0.1', 1287913085),
(2, 'christele', '127.0.0.1', 1257247228),
(3, 'topaze', '127.0.0.1', 1256932521);

Un mini login c 'est celui que tu lance en premier
ajax_tchat.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
<?php
session_start();
header('Content-type: text/html; charset=ISO-8859-1');
try
 {
  $bdd = new PDO('mysql:host=localhost;dbname=tabase', 'root', '');
  $bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 }
catch(Exception $e) { die('Erreur : '.$e->getMessage());}
$pseudo = (isset($_POST['pseudo'])) ? $_POST['pseudo'] : '';
if($pseudo!="")
 {
  $result = $bdd->prepare("SELECT * FROM ajax_tchat_user WHERE pseudo = :login");
  $result->execute(array(':login' =>  $pseudo));
  if ($row = $result->fetch())
    {
      if($row["ip"] == $_SERVER["REMOTE_ADDR"] && time()-$row["date"]<60 )
       {            $ActuPseudoID = $row["id"];}
         else if (time()-$row["date"]>60) { $ActuPseudoID =  $row["id"];}
             else { $erreur = "Ce pseudo est déja en cours d'utilisation";}
    }
   else
   {
     $result->closeCursor();
     $ip = $_SERVER["REMOTE_ADDR"];
     $result = $bdd->prepare("INSERT INTO `ajax_tchat_user`
     ( `pseudo`,`ip`,`date`)  VALUES (:Upseudo, :Uip, ".time().")");
     $result->execute(array(':Upseudo' => $pseudo,':Uip' => $ip));
     $ActuPseudoID=$bdd->lastInsertId();
   }
 
  if(!isset($erreur))
   {
    $_SESSION["pseudo"] = $pseudo;
    $_SESSION["ActuPseudoID"] = $ActuPseudoID;
    $bdd=NULL;
    header("location:ajax_tchat_page.php");
   }
 }
$bdd=NULL;
?>
<div id='conteneur'>
<h1>Mon tchat</h1>
<?php if(isset($erreur)){ echo "<p>".$erreur."</p>"; }?>
<form action='ajax_tchat.php' method='post'>
Votre Pseudo : <input class='le213'  type='text' name='pseudo'    autocomplete='off'  />
<input type='submit' value='tchatter' />
</form>
</div>
</body></html>

ajax_tchat_page.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
<?php
session_start();
$pseudo = (isset($_SESSION['pseudo'])) ? $_SESSION['pseudo'] : '';
if($pseudo=="") header("location:ajax_tchat.php");
header('Content-type: text/html; charset=ISO-8859-1');
try
 {
  $bdd = new PDO('mysql:host=localhost;dbname=tabase', 'root', '');
  $bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 }
catch(Exception $e) { die('Erreur : '.$e->getMessage());}
?>
<script type="text/javascript">
<!--
var url="ajax_tchat_sql.php";
var timer = setInterval(Affiche_Tchat,5000);
var ctimer = setInterval(Qui_En_Ligne,10000);
var lastid=0;
<?php
 $result = $bdd->prepare("SELECT id FROM ajax_tchat_messages ORDER BY id DESC LIMIT 1");
 $result->execute();
 while ($row = $result->fetch())  {echo ("lastid = ".$row['id'].";"); }
?>
/* ============================== */
function maFonctionAjax(message, pseudo,action)
{
  var MonAjax;
  if (window.XMLHttpRequest){ MonAjax = new XMLHttpRequest();}
  else if (window.ActiveXObject) {MonAjax = new ActiveXObject('Microsoft.XMLHTTP');}
  else {
    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
    MonAjax = false;   }
  MonAjax.open('POST',"ajax_tchat_pdo.php",true);
  MonAjax.onreadystatechange = function()
  {
      if (MonAjax.readyState == 4 && MonAjax.status==200)
      {
          if (document.getElementById) 
          {    
          if(action=="Affiche_Tchat") { document.getElementById('LeRetourL').innerHTML=''+MonAjax.responseText+'';}
          if(action=="Qui_En_Ligne") { document.getElementById('LeRetour').innerHTML=''+MonAjax.responseText+'';}
          if(action=="Ajout") { document.LeForm.message.value='';}
          }     
      }
  }
  MonAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  MonAjax.send('message='+message+'&pseudo='+pseudo+'&action='+action+'&lastid='+lastid);                  
}
function Affiche_Tchat(){
<?PHP
echo "pseudo='".$pseudo."';";
?>
 maFonctionAjax("", pseudo,"Affiche_Tchat");
}
function Qui_En_Ligne(){
<?PHP
echo "pseudo='".$pseudo."';";
?>
 maFonctionAjax("", pseudo,"Qui_En_Ligne");
}
//-->
</script>
 
 
<div class='centre01'>
<h1>Mon tchat, connectez en tant que <?php echo $pseudo; ?></h1>
<br />
<form id='LeForm'name='LeForm'  method='post' onsubmit="maFonctionAjax(this.message.value,this.pseudo.value,'Ajout');return false" action='' >
Message    <input  class='le413' name='message' id='message' type=text  autocomplete='off'  ><br />
<?PHP
echo "<input name='pseudo' id='pseudo' type='hidden' value='".$pseudo."' >";
?>
<input type=submit value='envoyer'  /><br />
 
</form>
 
<div id='LeRetour' class='LeRetour' style='visibility:visible'>
</div>
<br />
<div id='LeRetourL' class='LeRetourL' style='visibility:visible'>
<?php
    echo "<table><tr><td class='tchat1'>Pseudo&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;</td><td class='tchat2'>Edite le&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;</td><td class='tchat3'>message&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;</td></tr>";
    $result->closeCursor();                                    
    $result = $bdd->prepare("SELECT * FROM ajax_tchat_messages ORDER BY date DESC ");
    $result->execute();
    while ($row = $result->fetch())
     {
     $LaDate=date("d/m/Y H:i:s",$row['date']);
     echo "<tr><td><b>".$row['pseudo']."</b></td><td>(".$LaDate.")</td><td>&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;".$row['message']."</td></tr>";
     }
    echo "</table>";
?>
</div>
</div>
</body></html>

ajax_tchat_pdo.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
<?PHP
session_start();
try
 {
  $bdd = new PDO('mysql:host=localhost;dbname=tabase', 'root', '');
  $bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 }
catch(Exception $e) { die('Erreur : '.$e->getMessage());}
 
header('Content-type: text/html; charset=ISO-8859-1');
$pseudo = (isset($_SESSION['pseudo'])) ? $_SESSION['pseudo'] : '';
$ActuPseudoID = (isset($_SESSION['ActuPseudoID'])) ? $_SESSION['ActuPseudoID'] : '';
$action = (isset($_POST['action'])) ? $_POST['action'] : '';
$lastid = (isset($_POST['lastid'])) ? intval($_POST['lastid']) : 0;
$message = (isset($_POST['message'])) ? utf8_decode($_POST['message']) : '';
$liste="";
 
if($pseudo=="" || $action=="" )
 {
  $liste="Vous devez être connecté pour utiliser le tchat";
 }
  else
  {
   if($action=="Ajout")
     {
      $result = $bdd->prepare("INSERT INTO  ajax_tchat_messages 
      (  pseudo ,pseudoid, message , date ) VALUES (:Xpseudo,:Xpseudoid, :Xmessage, ".time().")");
      $result->execute(array(':Xpseudo' => $pseudo,':Xpseudoid' => $ActuPseudoID,':Xmessage' => $message));
      $result->closeCursor();
      $now = time();
      $result = $bdd->prepare("UPDATE ajax_tchat_user SET date = :Lenow WHERE id = :Avat");
      $result->execute(array(':Lenow' => $now,':Avat' => $ActuPseudoID ));
     }                                          
    if($action=="Affiche_Tchat")
     {
        $lastid = floor($lastid);
        $lastid = 0;
        $result = $bdd->prepare("SELECT * FROM ajax_tchat_messages WHERE id> :LaLid ORDER BY date DESC ");
        $result->execute(array(':LaLid' => $lastid));
        $liste .= "<table><tr><td class='tchat1'>Pseudo&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;</td><td class='tchat2'>Edite le&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;</td><td class='tchat3'>message&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;</td></tr>";
        while ($row = $result->fetch())
         {
          $LaDate=date("d/m/Y H:i:s",$row['date']);
          $liste .="<tr><td><b>".$row['pseudo']."</b></td><td>(".$LaDate.")</td><td>&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;".$row['message']."</td></tr>";
         } 
        $liste .= "</table>";
        $result->closeCursor();
        $now = time();
        $result = $bdd->prepare("UPDATE ajax_tchat_user SET date = :Lenow WHERE id = :Avat");
        $result->execute(array(':Lenow' => $now,':Avat' => $ActuPseudoID ));
     }
    if($action=="Qui_En_Ligne")
     {
        $now = time();
        $liste= "Connectés : ";
        $result = $bdd->prepare("SELECT * FROM ajax_tchat_user WHERE :Lenow -date <60 ");
        $result->execute(array(':Lenow' => $now));
        while ($row = $result->fetch())
         {
            $liste .= $row['pseudo'].", ";
          }
        $liste  = substr($liste,0,-2);
        $result->closeCursor();
        $result = $bdd->prepare("UPDATE ajax_tchat_user SET date = :Lenow WHERE id = :Avat");
        $result->execute(array(':Lenow' => $now,':Avat' => $ActuPseudoID ));
     }
}
 
echo $liste;
?>

**zeclubbeur** · 03/10/2011, 14h03

Hello

Merci pour ta réponse, mais je n'utilise pas PDO ^^
Mon tchat fonctionne bien. J'utilise du long polling parce que je voulais apprendre à le faire et que cela me semblait plus approprié qu'un short polling. Pour savoir quels sont les gens avec qui on parle est guère plus dur ^^

En revanche, ce que je cherchais à faire, c'était obtenir une notification quand la personne avec qui je discute est en train d'écrire. En gros, quand l'autre tape sur son clavier, ça affiche, dans ma fenêtre de tchat, un truc du genre "machin est en train d'écrire"
Et pour le moment, je n'ai pas trouvé plus simple que de faire une boucle qui va lire un fichier mis à jours par une fonction AJAX et afficher si l'utilisateur tape ou non quelque chose au clavier

Invité · 03/10/2011, 15h51

Te dire avant tout que PDO ou MySql ou autre, le script que je te propose s'applique a tout ce que l'on veut !
C' est au sens propre un model , ensuite tu l'adaptes !
Le mien dit qui est connecté, mais en trente seconde j'y ajoutes s'il tapes un message ou tout action que tu veux ! Le faite de lire dans un SQL avec PDO n'as aucun intéret par rapport au moteur AJAX et sa richesse.

[AJAX] Tchat et notification d'écriture

AJAX

Vue hybride

Discussions similaires

Partager

Partager