Chat et jQuery [Gérer le mode Asynchrone]

**Caxton** · 21/07/2011, 10h47

Bonjour,

Pour informations:
Mon précédent tread était liée à une reflexion stratégique sur la connexion au travers de jQuery. Ce problème étant résolu, afin de ne pas plus poluer mon post initial, j'ai pris la décision de le taggé résolu et d'ouvrir celui-ci qui va traiter de la construction de mon application en ajax.

Le projet:
Actuellement je tente de développer un t'chat en jquery. Je ne connaissait pas bien ce type de programmation et je m'y familiarise au fur et à la mesure des problématique à gérer. La partie Php ne me posant pas de problème, des essais ont été réaliser pour faire un retour et une exploitation en json, tout ce petit monde fonctionne à merveille.

La problématique actuelle:
Actuellement je suis en train de travailler sur le champ de saisie qui est un simple textarea. Celui-ci soit pouvoir prendre la saisie et un appuie sur la touche "entrer" évènement 13 provoque l'envoie du message dans la base d donnée. J'y suis pratiquement arrivé mais je bloque encore sur de nouveau points.

En effet, je cherche maintenant à ne pas revenir à la ligne lorsque j'appuie sur entrée et en même temps une majuscule + entrer soit provoqué non pas l'envoie mais un saut de ligne.

J'ai réussi à capturer la touche entrée en mode "keypress" mais je n'ai pas su trouver pour le majuscule + entrer.

J'aimerais modifier le code suivant pour réaliser ce comportement, si c'est possible.

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
 
//La gestion de l'envoie d'une sasie au serveur
$(document).ready( function() {
 
	$('#chatForm').bind('keypress', function(e) {
 
        //Touche entrée
        if(e.keyCode==13){
 
            //Charge la saisie dans la variable
            gSaisie = $('#cSaisie').val();
 
            //Si la siaise n'est pas vide
            if(gSaisie) {
 
				//Effacer le champ de saisie
				$('#cSaisie').val('').focus();
 
				//Envoie au serveur une requête de saisie dans le bon canal avec l'id du pseudo
				alert('[' + Pseudo + ']: ' + gSaisie);
 
                                //Evite un saut de ligne (existe-t-il une meilleure solution ?)
				return false;
			}
        }
	});
});

La conclusion:
Pour le moment j'ai volontairement mis un alert() à la place de l'envoie de la requête car je procède à un débuggage progressif. Cette ligne sera remplacé par du requêtage en ajax, dans le futur.

Remerciement:
Je remercie déjà, alors que je n'ai aucune réponse, pour l'aide que vous me porterais.

**Golgotha** · 21/07/2011, 11h01

Je pense que la FAQ Jquery est assez complète sur ce point :

Comment puis-je intercepter les frappes multitouches ?

**Caxton** · 21/07/2011, 11h15

Oui j'y suis aller avant de poster

Mais je songeais plus une fois la capture réalisé. Est-ce que le return false; est la bonne solution ?

Merci.

**SpaceFrog** · 21/07/2011, 11h19

Vu que ça doit être à peu près la seule ...

**Caxton** · 21/07/2011, 11h58

Hey, justement, il serait intéressant de complémenté

Bon ceci dit, j'ai pas encore trouvé comment attribuer à mon textarea un saut de ligne sur le maj+enter.

Je pense à un $('#champSaisie').??? Voila c'est ça quand on débute, il y a des ??? à remplacer par des choses que l'on ne connais pas encore

**SpaceFrog** · 21/07/2011, 12h01

un += sur le html ?

**Caxton** · 22/07/2011, 10h36

C'est bon, je suis arrivé à faire un comportement correct.

Je passe maintenant à la partie rigolote du programme. L'asynchrone.

Je sait que l'ajax, le jquery aussi peut effectuer des traitements asynchrones. Je me demandais si, dans mon js, je ne ferais pas une fonction qui irais chercher toutes les 2 secondes dans une bdd les nouveaux messages. Et à ce sujet, j'aimerais avoir quelques informations.

Faut-il partir d'un timer puis lancer une fonction qui contiendrais un appel en jquery ?
Faut-il partir d'un jQuery, placer son timer et donc son exécution indépendamment d'une fonction ?
Au final j'aurais deux zones qui doivent aller chercher des informations qui leurs sont propres, soit je me base sur le même timer, soit je fais un timer séparé de 2 et 3 secondes.

J'ai regardé des cas similaires mais je n'ai pas encore su trouver l'exactitude du fonctionnement que j'aurais à écrire. J'espère donc déjà dégrossir le terrain avec la demande ci-dessus. Je pense qu'au fil de la conversation de nouvelles questions seront de mise pour en apprendre un peu plus. L'idéal étant quand même de resté encapsulé dans le jQuery.

Merci

**Caxton** · 22/07/2011, 14h11

Ça peut semblé stupide...
J'ai trouvé un élément de réponse tardif

J'ai vue dans un exemple la chose suivante:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
//Ici je suppose que toutes les 2500 ms on va lancer une fonction.
//Est loadChat ou loadChat() qu'il faut marqué ici ?
setInterval(loadChat, 2500);
 
function loadChat() {
   //Ici on trouve un jQuery allant cherché sur un fichier php des informations
   //Je suppose que c'est la BDD
   //success:
      //Mettre à jour la div
   //Erreur:
      //Mettre à jour la div
}

Je pense avoir compris le principe (reprenez-moi si je me trompe).
Comment après on fait pour la liste des canaux et les personnes connectés/déconnectés ?

**Golgotha** · 22/07/2011, 21h24

Il faut pas oublier que tu devra gerer un index dans ta base de donnée et dans ton javascript ou php pour ne pas ré-afficher les messages en double.

Par exemple dans ta BDD tu as :

0
*
*
110 - "salut !"
111 - "salut golgotha"
112 - "ça va"
113 - "oui et toi"
114 - "bien bien"

L'utilisateur qui arrive va peut etre listé les 5 derniers messages, bon ça c'est facile, une requette en ajax sur les 5 derniers, ensuite dans ta page tu doit mettre à jour ton index à 114, puis à chaque envoie de ta requêtes ajax tu envoie cette index, pour pouvoir faire la requete, si il y à des données supérieur à 114 alors, je renvoie toutes ces données, puis je met à jour mon index.

Il faut aussi gérer ça quand tu envoie un message, changement d'index et récupération des messages posté avant.

j'espère que cette réfléxion t'aidera