IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Chat en jQuery demande de test à travers plusieurs postes


Sujet :

jQuery

  1. #1
    Membre averti
    Profil pro
    Inscrit en
    juillet 2006
    Messages
    467
    Détails du profil
    Informations personnelles :
    Âge : 50
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : juillet 2006
    Messages : 467
    Points : 342
    Points
    342
    Par défaut Chat en jQuery demande de test à travers plusieurs postes
    Bonjour, je me suis inspirer d'un chat existant.
    Pouvez vous me dire si ma version fonctionne sur plusieurs postes clients.
    Merci
    Code HTML : 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
    <body>
       <fieldset>
         <legend>Un chat en jQuery</legend>
          <div class="conversation"></div><br />
          <form action="#" method="post">
            <input type="text" id="nom" value="pseudo" size="6"></br>
            <input type="text" id="message" size="35">
            <button type="button" id="envoyer" title="Envoyer"><img src="envoyer.gif"></button>
          </form>
        </fieldset>
        <script>
        
        $(document).ready(function() {
            
     
              
            $('#envoyer').click(function() {
                var nom = $('#nom').val();
                var message = $('#message').val();
     
                afficheConversation();
                
            });
     
            function afficheConversation() {
     
                      var ligne = $('#nom').val() + '>' + $('#message').val();
                      $(".conversation").append(ligne);
                      $(".conversation").append("<br/>");
              $('#message').val('');
              $('#message').focus();
            }
              
            
          });
        </script>
      </body>
    Cela fonctionne sur mon ordinateur mais sans correspondants.

  2. #2
    Membre expert Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    1 927
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 1 927
    Points : 3 686
    Points
    3 686
    Par défaut
    Bonjour,

    Citation Envoyé par Philcmoi Voir le message
    Cela fonctionne sur mon ordinateur mais sans correspondants.
    Si tu veux faire un vrai chat en temps réel, tu dois passer par Socket.IO et Nodejs ou bien utiliser l'un des scripts php qui font ça.

  3. #3
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    avril 2018
    Messages
    82
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : avril 2018
    Messages : 82
    Points : 67
    Points
    67
    Par défaut
    Salut.
    A la limite, j'ai envie de dire que cela ne sert à rien.
    Ou du moins, pas à faire un chat.
    Qui dit chat avec JQuery dit utiliser AJAX.
    Tu peux avoir des cours sur AJAX à cette adresse:
    Les meilleurs cours et tutoriels pour apprendre l'AJAX
    N'oubliez pas le petit pouce, si mon message vous a été utile.

  4. #4
    Membre averti
    Profil pro
    Inscrit en
    juillet 2006
    Messages
    467
    Détails du profil
    Informations personnelles :
    Âge : 50
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : juillet 2006
    Messages : 467
    Points : 342
    Points
    342
    Par défaut
    La version original donnée était remplie de bug.
    d'abord l'afficheConversation effacer le message par setInterval et bloquer la zone de saisie sur le nom.
    Grace à une recherche google, il suffit d'appuyer sur enter pour envoyer un message.
    voici le code en entier. Il fonctionne.
    Code HTML : 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
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>Chat jQuery</title>
        <script src="jquery3.4.1"></script>
     
      </head>
     
      <body>
       <fieldset>
         <legend>Un chat en jQuery</legend>
          <div id="conversation"></div><br />
          <form action="#" method="post">
            <input type="text" id="nom" value="pseudo" size="6">
            <input type="text" id="message" size="27">
            <button type="button" id="envoyer" title="Envoyer"><img src="envoyer.gif"></button>
          </form>
        </fieldset>
        <script>
        
        $(document).ready(function() {
            afficheConversation();
            
            $('#envoyer').click(function() {
                var nom = $('#nom').val();
                var message = $('#message').val();
                $.post('chat.php', {
                    'nom': nom,
                    'message': message
                }, afficheConversation);
            });
            
            $(document).keypress(function(event) {
                var keycode = (event.keyCode ? event.keyCode : event.which);
                var nom = $('#nom').val();
                var message = $('#message').val();
                if(keycode == '13') {
    //                 alert('You pressed a "enter" key in somewhere'+ nom);
     
                    $.post('chat.php', {
                        'nom': nom,
                        'message': message
                }, afficheConversation);
                }
            });
                    
                    
     
            function afficheConversation() {
              $('#conversation').load('ac.htm');
    //           $('#message').val('');
    //           $('#message').focus();
            }
              
     
            
            setInterval(afficheConversation, 100);
          });
        
        </script>
      </body>
    </html>

    chat.php, n'oublier pas de creer le fichier ac.htm.

    Code PHP : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <?php
    $nom = $_POST['nom'];                    //On récupère le pseudo et on le stocke dans une variable
    $message = $_POST['message'];            //On fait de même avec le message
    $ligne = $nom.' > '.$message.'<br>';     //Le message est créé
    $leFichier = file('ac.htm');             //On lit le fichier ac.htm et on stocke la réponse dans une variable (de type tableau)
    array_unshift($leFichier, $ligne);       //On ajoute le texte calculé dans la ligne précédente au début du tableau
    file_put_contents('ac.htm', $leFichier); //On écrit le contenu du tableau $leFichier dans le fichier ac.htm
    ?>

  5. #5
    Membre expert Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    1 927
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 1 927
    Points : 3 686
    Points
    3 686
    Par défaut
    Envoyer une requête Ajax toute les 100 millisecondes résout le problème à condition que le serveur sur lequel ton site est hébergé supporte les requêtes clients multiples.

  6. #6
    Membre averti
    Profil pro
    Inscrit en
    juillet 2006
    Messages
    467
    Détails du profil
    Informations personnelles :
    Âge : 50
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : juillet 2006
    Messages : 467
    Points : 342
    Points
    342
    Par défaut
    Oui tu as raison Toufik83
    Même chez moi en local ça rame.

  7. #7
    Membre expert Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    1 927
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 1 927
    Points : 3 686
    Points
    3 686
    Par défaut
    Donc je répète mon conseille, il faut passer par socket.io qui utilise Ajax en mode long pooling.
    À ta place je commence par découvrir nodejs et socket.io.
    N'aies pas peur, c'est seulement du JavaScript😏

  8. #8
    Membre averti
    Profil pro
    Inscrit en
    juillet 2006
    Messages
    467
    Détails du profil
    Informations personnelles :
    Âge : 50
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : juillet 2006
    Messages : 467
    Points : 342
    Points
    342
    Par défaut
    Merci

  9. #9
    Expert éminent sénior

    Homme Profil pro
    Développeur Web
    Inscrit en
    septembre 2010
    Messages
    5 271
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : septembre 2010
    Messages : 5 271
    Points : 10 122
    Points
    10 122
    Par défaut
    Pour qu'ajax et le long poll soit viable il faudrait un petit chat (peut fréquenté) et espacer tes requêtes de quelques secondes. Sinon évidemment tu satures le serveur de requêtes et il ne va pas aimé cela, sauf s'il est prévu pour comme disait Toufik83 avec socket.io ou les websocket de php.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [TestNG] Transporter une variable à travers plusieurs tests
    Par arnovodao dans le forum Tests et Performance
    Réponses: 1
    Dernier message: 27/04/2019, 18h41
  2. Teste de plusieurs JTextField vide
    Par nicotine002 dans le forum Langage
    Réponses: 4
    Dernier message: 09/07/2006, 12h22
  3. [XSLT] <xsl:if> test sur plusieurs condition
    Par oxilab dans le forum XSL/XSLT/XPATH
    Réponses: 8
    Dernier message: 30/06/2006, 21h30
  4. [Demande de tests] SELRA Moteur d'affichage 3D
    Par Bob.Killer dans le forum OpenGL
    Réponses: 5
    Dernier message: 31/08/2005, 20h18

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo