Réalisation d'un petit tchat

[xanthius]

Bonsoir,
je suis entrain d'essayer de réaliser un petit chat en m'aidant du tuto d'openclassroom. Tout ce passe bien, l'envoi du message se passe bien, cependant j'aurai aimé voir le message envoyé placé au dessus des anciens.
j'ai vue les méthodes before mais je rencontre un souci, lorsque j'écris le premier message et que je valide il est placé au dessus des autres mais lorsque je re tente (sans actualisation) le message est envoyé mais pas affiché.

mes messages sont affichés dans une div : message
et le nouveau message dans la div : new_message

j'utilise cela :

$('.new_message').before($('.message'));


Quelqu'un pour m'aider s'il vous plait ?

[Sephi-Chan]

Je crois que le problème vient de la ligne 12.

Plus sérieusement, comment veux-tu qu'on t'aide avec si peu d'informations ?
Indique le lien vers le cours et le passage qui pose problème, ton code PHP et Javascript actuel, etc.

[xanthius]

Bonsoir,
non c'était la ligne 50 mais il y avait effectivement une erreur à la ligne 12 :p !

Il est vrai que mon post est inutile dans la mesure où je donne aucune source ou autre informations nécessaire pour que vous puissiez m'aider.

J'ai finalement réussi. je fais une actualisation du script toutes les 5 secondes et ça fonctionne. On peut clore le sujet. La prochaine fois je mettrais davantage d'informations !

[@lucard]

Le but d'un problème / résolution, c'est de partager le problème, et par la même partager la solution...

Dans X jours il y aura une autre personne qui posera la même question, parce qu'au final, il n'y à pas vraiment d'explication sur ta résolution...
Ok, toi de ton côté ça fonctionne... mais expliquer comment tu en es arrivé à résoudre le problème est souvent plus intéressant que la solution toute faite.

Edit : j'en ais pas trouvé sans faute

[Xenos]

Perso, dans X jours, je répondrai "Ne refais pas inutilement un chat et regarde ce qui existe en Open-Source ou service tiers car je serai surpris s'il n'existait aucun module de chat qui pourrait s'isoler du code du jeu et éviter de l'encombrer, tout en te faisant bénéficier d'un tas de truc comme les smileys, les /me /machin et autres intégrations FB [ie: avoir le chat du jeu dans son FB]".

Pour le reste, ce n'est pas le premier topic que tu ouvres sur un problème trop peu présenté, résolu dans la foulé, et pour lequel ta solution se limite à "j'ai trouvé". Je n'ai aucun soucis avec le fait d'ouvrir un topic sur un problème, et le résoudre entre temps (voire presque dans la foulée de la rédaction du problème), mais dans ce cas, le problème et sa solution doivent être clairement définis et explicités (limite façon "tutoriel", pas aussi générique et clairement ciblé sur ton cas pratique, mais dans le même ordre d'idée éducatif).

Sinon, sur ta solution "j'actualise le script"... Heu, wut? tu recharges le script JS toutes les 5 secondes?! Quid de insertBefore()?


PS: @lucard, t'aurai la même image sans une énorme faute dans le sous-titre? :roll:

[xanthius]

Bonjour,
oui c'est vrai que je vais sun peu trop vite. Je poste sans prendre le temps de bien chercher, de creuser.

Alors voilà comment j'ai procédé.
J'ai attribué une class (CSS) pour les messages déjà présent et une class à part pour le nouveau message rédigé. Après le traitement JS, je place mon nouveau message au dessus des messages déjà présent en utilisant leur class.
"$('.new_conteneur').after($('.ancien_conteneur'));
(mes messages sont affichés du plus récent au plus vieux)
Après je procède à une actualisation, pour le prochain nouveau message. Sinon ça ne fonctionne pas si on envoi un deuxième message d'affilé.

Concernant les autres tchat, oui, il en existe pas mal mais je voulais créer le mien.

[Xenos]

Pourquoi t'as besoin de sélecteurs (de classes) lorsque tu fais ton insertion? A mon sens, tu crées ton DOMNode:

var myNewNode = $('<div/>', { 'class': 'message last-message' }, messageContent);

Puis tu l'insère simplement dans le DOM, après avoir retiré la classe "last-message" éventuellement présente dans le chat:

$('.last-message').removeClass('last-message');
$('#messageContainer').appendChild(myNewNode); // ou autre .after()

?
Là, je me trompe peut-être hein, mais j'ai l'impression que tu insère ton noeud n'importe où, au p'tit bonheur, puis que tu te sers de la classe (last-message) pour aller le récupérer et le déplacer à un autre endroit...

A mon avis (bon, ok, j'vais en faire un article parce que j'ai l'impression de souvent le répéter!), il n'y a effectivement pas de mal à vouloir coder soi-même le chat pour le plaisir de coder. Toutefois, rien n'interdis de coder le chat dans un projet à part, qu'on pourra facilement massacrer d'ailleurs et bricoler en tous sens, et d'utiliser un chat externe (plus avancé, sécurisé et tout) dans son jeu. Voire, pourquoi pas, brancher son jeu sur ce projet de chat perso. Niveau "efficacité industrielle", ce sera bien meilleur (j'en veux pour preuve que là, tu galères sur ce chat; rien n'interdis de galérer dans sa zone de test, mais dans son projet web, c'est peu utile et même risqué).

[xanthius]

Je ne le crée pas n'importe où, je le crée lors de l'envoi du nouveau message; Ca le place ainsi au dessus des autres et par la suite après actualisation ce message devient "normal" et ainsi de suite.
Pour l'instant tout se passe bien, j'ai bien ma liste de message et quand j'en insère un nouveau il se met au dessus des autres comme prévu..

[Xenos]

Je ne vois pas comment tu peux te servir d'un sélecteur jQuery basé sur les classes pour insérer ton noeud dans le document: s'il n'est pas déjà inséré dans le document, comment le sélecteur $('.gnagna') peut-il te permettre de récupérer ce noeud? T'as pas le code correspondant, qu'on y voit plus clair?

[xanthius]

Code :

$('#envoi').click(function(e){
    e.preventDefault(); // on empêche le bouton d'envoyer le formulaire

    var pseudo = $('#pseudo').val();
    var BrutMsg = $('#messages');
    var message = BrutMsg.val().replace(/\n\r?/g, '<br />');
  
    

    if(pseudo != "" && message != ""){ // on vérifie que les variables ne sont pas vides
        $.ajax({
            url : "../game/core/ajax/envoi_tchat.php", // on donne l'URL du fichier de traitement
            type : "POST", // la requête est de type POST
            data : "pseudo=" + pseudo + "&message=" + message // et on envoie nos données
        });

       $('#afficher').append("<div class='new_conteneur_tchat'><font color ='white'><b>" + pseudo + " :</b><br> " + message + "</font></div>"); // on ajoute le message dans la zone prévue
$('.new_conteneur_tchat').after($('.conteneur_tchat'));
    }

  $('#messages').val('');
});

voilà mon code !