Tchat simple en Ajax

[Jonathan.b]

Bonjour à tous,

J'ai pour l'instant une simple shoutbox en php sur mon site qui permet aux membres de communiquer rapidement. Cette shoutbox n'est pas très pratique dans le sens où il faut rafraichir toute la page pour voir s'il y a de nouveaux message.

Je souhaiterais donc remplacer cela par une shoutbox en ajax.

Avant de me lancer dans le code, je me pose quelques questions sur le fonctionnement générale:

- A quelle fréquence raffraichir la liste des messages?
- Par quel moyen pour que cela entraine le moins de requetes?
- Comment faire pour n'afficher que les nouveaux messages ?
petite explication: J'ai une shoutbox de 10 messages, 2 nouveaux message sarrivent depuis le dernier raffraichissement, j'affiche les deux nouveaux messages avec un style (le fond passe du rouge au blanc en fondu par exemple) et donc je supprime les deux plus vieux messages.

Voilà les 3 questions qui me bloquent avant de me lancer dans le code.

Avez vous des petites astuces?

Merci d'avance.

Ps: J'utilise prototypejs

[kangaxx]

Bonjour,
au niveau de la fréquence, tout dépend de ton serveur et de la charge.
Tu peux essayer 5 secondes pour commencer.

Au niveau du fonctionnement, ce qui me vient à l'esprit et assez simple à mettre en place, toutes les 5 secondes tu envoies avec le Datetime de la dernière réception que tu as eu. Coté serveur, il sélectionne tous les message antérieures à cette date, et te renvoit le nouveau datetime coté serveur. Tu affiches les messages recus, et stocke ce datetime que tu lui renverras dans 5 secondes.
Après c'est du détail, en fonction du nombre de messages recus, tu supprimes de ta liste autant de messages afin de faire de la place pour les nouveaux.

Voila

[Jonathan.b]

C'est tout à fait ce fonctionnement que je souhaite mettre en place.
Ca serait plus du coté javascript que mon problème se pose. Comment rajouter seulement les nouveaux messages.

Avec la fonction ajax.updater, je peux mettre à jour toute la shoutbox mais je n'arrive pas à rajouter seulement les nouveaux messages .

[kangaxx]

Coté javascript, il te suffit de mettre chaque message dans un div, eux meme dans ta shoutbox. Si tu recois par exemple 2 messages, tu supprimes les 2 premiers div de ta shoutbox, tu en crées 2 nouveaux, que tu remplis avc les 2 nouveaux messages, et tu les ajoutes à ta shoutbox.
Ca devrait pas poser de probleme comme cela.

[Jonathan.b]

Je commence tout juste à apprendre le JS et je pense qu'il faut utiliser dans ce cas les fonctions "removeChild" et "unshift"...

Connais tu un site équivalent à php.net mais pour le JS ???

[jeje13009]

slt,

il faudrait d'abord savoir où et comment tu stockes tes messages... à partir de là tu pourras définir comment les intégrer dans ta shoutbox...

[Jonathan.b]

J'ai étudié un petit peu la chose et je compte stocker les messages dans une base mysql (sauf contre-indication de votre part). La shoutbox est intégrée sur toutes les pages du site par le menu vertical du site.

Et voici les fonctions que je pensent faire:

- La fonction "initialisation",
qui affiche les 30 derniers messages et qui est exécuté lors de l'affichage de la page qui contient la shoutbox.

- La fonction "rafraichissement",
executée toutes les 2 secondes (à confirmer) et qui permet de récupérer tous les messages dont l'id est supérieur à l'id du dernier message affiché dans la shoutbox. Si des nouveaux messages sont arrivés, ont exécute la fonction 'affiche nouveaux messages' pour chaque message.

- La fonction "affiche nouveaux messages",
qui supprime le plus vieux messages et affiche le nouveau message à la suite des autres.

- La fonction "ecriture nouveaux message",
qui rajoute un message dans la BDD et lance un rafraichissement pour voir directement son message et ne pas attendre au maximum 2s.

Voilà à peu près tout.

Pour moi, chaque message sera un enfant du div shoutbox. Je compte donc utiliser les différentes fonctions permettant de gerer les enfants et noeud des DOM.

Pensez vous que je suis sur la bonne piste?

PS: un peu HS mais je cherche également une bibliothèque pour la gestion des affichage pour les nouveaux messages qui arriveront en fondu...

[kangaxx]

Oui, effectivement pour retirer tes messages, tu peux utiliser par exemple getElementByTagnames('div') + removeChild, et pour les ajouter, appendChild.

Sinon au niveau de tes fonctions, elles me paraissent cohérentes.

Et pour l'effet de fondu, la plupart des librairies sont indiquées dans le post it juste au dessus, jette y un oeil ^^

[Jonathan.b]

Je ne peux pas tester ca tout de suite donc je me pose quelques questions théorique:

Comment savoir quel sera l'enregistrement supprimé par removechild et comment savoir si l'enregistrement rajouté par appendchild se a la fin ou au début de la liste des enfants ?

[kangaxx]

GetElementByTagNames te renvoit un tableau de ses fils, tes messages dans ton cas. Les cases sont dans l'ordre, donc pour retirer le 1er fils, il te suffit de prendre la case d'indice 0, 1 pour le 2eme...

Et pour appendChild, il ajoute obligatoirement à la fin des autres fils, donc pas de probleme non plus

[Jonathan.b]

Une autre question pour la partie ressource; j'espere avoir une centaine de membres connectés sur le site dans quelques moi.
Si je compte raffraichir la shoutbox toutes les 2 secondes. Cela fera donc 3000 requetes mysql par minutes. Cela me parait enorme même si la requête elle-même est assez simple et ne prend pas beaucoup de ressource.

Je voulais donc votre avis pour cette partie. Avez vous un retour d'experience la dessus. Où sont les limites?

[Jonathan.b]

Petit Up

[kangaxx]

Ca me parait pas aberrant, mais bon ca dépend du serveur, des autres charges... donc comme ca on peut pas trop dire. Si tu vois que ca rame trop, tu seras obligé de limiter le nombre de membre et/ou diminuer la fréquence de raffraichissement et/ou prendre un serveur plus robuste.

[Jonathan.b]

J'ai commencé à programmer réellement ce module de tchat et je rencontre un premier problème.

Code :

1
2
3
4
5
6
7
8
<ul id="chatbox_messages">
<li id="p9">
test
</li>
<li id="p10">
coucou
</li>
</ul>

Je voudrais récuperer l'id du dernier li et je ne vois pas comment faire.
Voilà ce que j'ai comme code:

Code :

chatbox_dernier_id_msg = $('chatbox_messages').lastChild.id;

Mais cela ne marche évidemment pas. Cela ne doit pas être compliqué pourtant.

Avez vous une solution.

[EDIT] Faute de syntaxe dans mon code. Ca marche.