Chat en jQuery demande de test à travers plusieurs postes

**Philcmoi** · 11/12/2019, 15h59

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.

**Toufik83** · 12/12/2019, 11h48

Bonjour,

Envoyé par Philcmoi

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.

**StephCoul** · 12/12/2019, 15h29

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

**Philcmoi** · 16/12/2019, 20h50

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
?>

**Toufik83** · 16/12/2019, 21h28

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.

**Philcmoi** · 16/12/2019, 21h33

Oui tu as raison Toufik83
Même chez moi en local ça rame.

**Toufik83** · 16/12/2019, 21h50

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😏

**Philcmoi** · 17/12/2019, 00h41

Merci

**ABCIWEB** · 17/12/2019, 01h47

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.

Chat en jQuery demande de test à travers plusieurs postes

jQuery

Discussions similaires

Partager

Partager