Chat en jQuery demande de test à travers plusieurs postes

Version imprimable

Bonjour, je me suis inspirer d'un chat existant.
Pouvez vous me dire si ma version fonctionne sur plusieurs postes clients.
Merci

Code:

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.

12/12/2019, 11h48
Toufik83

Bonjour,

Citation:

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.
12/12/2019, 15h29
StephCoul

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

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:

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:

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

16/12/2019, 21h28
Toufik83

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.
16/12/2019, 21h33
Philcmoi

Oui tu as raison Toufik83
Même chez moi en local ça rame.
:D
16/12/2019, 21h50
Toufik83

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😏
17/12/2019, 00h41
Philcmoi

Merci
17/12/2019, 01h47
ABCIWEB

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.