Discussion :

[viddaa]

Bonjour,

Je consulte ce forum depuis un petit moment déjà, ce qui m'a souvent été d'une aide précieuse.

Je développe en ce moment, à titre d'apprentissage, un chat en ajax/PHP/MySQL.

Jusque là, tout est ok, à part un petit détail: Il arrive parfois que les messages arrivent en doublon.

Voici un extrait du code jquery:

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
 
var lastMsgId=-1; // à l'arrivée sur le tchat, ajax renvoi cet id message pour récupérer un éventuel historique des messages
var chatURL="monfichier.php"; // ce fichier renvoie un tableau json_encodé de la forme:
  // data[clear]  drapeau pour id début de lecture BDD dépendant de table SQL vide ou non
  // data[messages]  tableau relatif au(x) nouveau(x) message(s) obetnu(s)
  // data[messages][pseudo]  pseudo expéditeur
  // data[messages][id]  id du message dans la table SQL
  // data[messages][message] message envoyé
  // data[messages][time] date_heure du message
 
 
 
function getNewMsg()
{ $.ajax(
  { url 	: chatURL, // variable définie en tête de script sur php renvoyant le(s) dernier(s) message(s) en JSON
    type 	: 'POST',
    data	: $.param( { mode : 'getMsg', id	: lastMsgId	} ),
    dataType : 'json',
    error : function(xhr , textStatus, errorThrown)
    { alert('erreur');
      displayError(textStatus); // pas de problème
    },
    success : function(retour)
    { if(retour.errno!=null) displayPHPError(retour); //pas de problème
      else readMsg(retour); // fonction d'affichage de la réponse
      getmsg_interval=setTimeout("getNewMsg();",updInterval);
    }
  });
}
// envoi d'un message
function sendMsg()
{ var msg='';
   var pseudo=$.trim($('#pseudo').val()); // champs caché 
   var msg=$.trim($('#msgBox').val()); // champs de saisie de message
   $('#msgBox').val("");
   $('#msgBox').focus();
  var params={
    mode 	:"sendMsg",
    id		:lastMsgId,
    pseudo	: pseudo,
    message	: msg
  }
  if(msg!='')
  { $.ajax( 
    { url: chatURL,
      type: "POST",
      data: $.param(params),
      dataType: 'json',
      error : function(xhr , textStatus, errorThrown) 
      { displayError(errorThrown);},
      success: function(retour, textStatus)
      { if(retour.errno!=null) displayPHPError(retour);
	else readMsg(retour);
 
	//getmsg_interval=setTimeout("getNewMsg();",updInterval); // avec ou sans, le problème est le même
      }
    })
  }
}
 
function readMsg(data)
{ clearChat=data.clear; // drapeau pour réinit id de dernier message
  if(clearChat) // si init demandée
  { $("#scroll")[0].innerHTML=""; // vidage du div "#Scrollmsg"
    lastMsgId=-1; //réinit du drapeau
  }
  if(data.messages.length>0) // si nouveau messages
  { if(lastMsgId > data.messages[0].id) return; 
    lastMsgId=data.messages[data.messages.length-1].id; // l'id = id du dernier message arrivé
  }
  $.each(data.messages,function(i,message)
  { var str='';
  str+='<div>'+message.time+'['+message.pseudo+']: '+message.message+'</div>';
  })
  divCible=$('#scroll'); // zone d'affichage du message
  var isScrolledDown=( divCible[0].scrollHeight - divCible[0].scrollTop<= divCible[0].offsetHeight); // calcul pour hauteur de div/messages
  divCible[0].innerHTML+=str;
  divCible[0].scrollTop= isScrolledDown ? divCible[0].scrollHeight : divCible.scrollTop; // forçage descente scrollbar
}

les aller-retours client-serveur se passent très bien. c'est à l'affichage que j'ai un doublon de façon aléatoire.
A noter que le problème ne vient pas de l'insertion du message en BDD, j'ai bien vérifié. Même la réponse de la requête ajax n'indique pas de doublon(merci firebug).

Il va de soi que j'ai désespérément cherché la panne tout seul. Tantôt j'essayais en stoppant le setTimeout à l'envoi de message, tantôt je vérifiais l'id du dernier message de réponse, je magouillais, transposais, interpolais...

Si qqn pouvait me donner une piste sur l'erreur à corriger, j'en lui en serais fort reconnaissant.

Et si par la même occasion on pouvait me donner des exemples CONCRETS sur l'option "ifModified" de $.ajax(), ça serait pas mal non plus. Le web fourmille d'exemples bâclés qui ne font pas avancer le schmilblik pour autant.

D'avance merci pour les réponses (autres que "télécharge un tchat tout fait", c'est facile, rapide mais ludiquement c'est ZERO, ou bien "consulte la doc jquery", je l'ai déjà fait, pensez donc) et merci aussi pour ce forum où je trouve plus de réponses que n'importe quel autre forum ou tuto.

[viddaa]

Ah ça date!!

En fait, à l'époque, l'envoi d'un message demandait aussi la récupération des autres messages indépendamment de l’intervalle normal de récupération des messages. Pour peu que l'envoi d'un message et la récupération normale des messages se fassent en même temps, deux requêtes de récupération arrivent AVANT que l'id du message courant ne change coté client.

Enfin bref, c'était le bordel. J'avais trouvé une solution qui consistait simplement à interrompre le "setInterval" de js lors de l'envoi d'un message. J'aurais aussi pu simplement ne pas récupérer les messages lors d'un envoi...

Depuis, j'ai révisé ma copie. Un tel système en ajax est tout juste bon pour une messagerie instantanée avec deux ou trois personnes.
Pour un tchat digne de ce nom, il vaut mieux utiliser les sockets et éventuellement REDIS pour un historique de messages éphémère.