J'essaie de créer un petit système de chat simple sur PhP.
Mon idée était vraiment simple, j'ai un formulaire qui envoie un texte à un script en PHP et ce script enregistre le var dans une base de données, puis l'autre utilisateur actualise la page pour télécharger le nouveau message et l'afficher sur la boîte de discussion. < br />Le problème vient, quand je dis actualiser la page.
Je pense juste que ce serait probablement un problème pour l'utilisateur qui rafraîchirait la page entière toutes les secondes ou moins grâce à une fonction JavaScript.
L'idée originale était d'utiliser setInterval() mais sachez que je pense que cela peut être une mauvaise idée.
Je ne suis pas sûr, mais à partir de chrome, lorsque vous actualisez un formulaire, il enregistre le formulaire et le remplit automatiquement, une fois que vous avez terminé l'actualisation, est-ce que chaque navigateur fait cela?
Une fonction JavaScript pour rafraîchir la page sera-t-elle un problème pour ceux qui ont une connexion vraiment lente?

Mais le plus important, pour résoudre le problème, est en fait possible de simplement actualiser un script PHP spécifique, qui permet à l'utilisateur de n'actualiser que ce script et de télécharger le nouveau message, sans actualiser la page entière toutes les secondes?

Toute l'aide serait appréciée.

-REMARQUE-

Pour être honnête, le type qui veut que je fasse ce système de chat m'a demandé de ne pas utiliser JavaScript, donc en théorie je ne suis même pas autorisé à utiliser setInterval()

3
Lynxes Exe 22 juil. 2017 à 17:44

2 réponses

Meilleure réponse

Pour rafraîchir la partie, vous pouvez utiliser <META http-equiv="refresh" content="3; URL=truc.php"> au lieu de setInterval (au fait, setTimeout suffit car il se produira 1 fois à chaque actualisation de la page).

Pour le remplissage du formulaire, lorsque vous soumettez le message, il actualisera la page et libérera le formulaire pour que tout soit correct. Pour le gars qui vient de «lire», s'il commence à taper quelque chose et que la page est actualisée, il devrait le conserver après l'actualisation pour que ça ait l'air bien aussi? Mais vous pouvez ajouter autocomplete="off" pour vous assurer que le formulaire ne suggérera rien de indésirable.

0
Pierre Granger 22 juil. 2017 à 21:43

Utilisez la fonction jQuery appelée load (). Publiez un balisage HTML de base de votre page de discussion et je modifierai avec une réponse spécifique.

$("#messageboard").load("chat.php #messageboard > *");

Mettez ce code après la soumission du chat dans votre requête ajax pour enregistrer. Modifiez #messageboardpour l'ID de la division du tableau de messages à actualiser. Changez chat.php pour la page où le chat est affiché. Afin de gagner du temps de chargement, vous pouvez transmettre les variables GET à la page de discussion et empêcher un chargement complet de la page et ne renvoyer que les messages.

Vous pouvez également avoir la fonction setTimeout mais les deux doivent s'exécuter sur la page afin que l'utilisateur soumettant le message voit immédiatement une actualisation (pas de décalage)

function startTimer() {
     $("#messageboard").load("chat.php #messageboard > *", function(){
          //repeats itself after 1 seconds
          setTimeout(startTimer, 1000);
     });
}

startTimer();

Dans ce qui précède, 1000 est en millisecondes, donc égal à 1 seconde.

L'utilisation de setTimeout présente l'avantage que si la connexion se bloque pendant un certain temps, vous n'obtiendrez pas des tonnes de requêtes en attente car une nouvelle ne sera envoyée qu'une fois la précédente terminée.

Je suppose que vous utilisez ajax pour soumettre le message de l'utilisateur afin que la page ne s'actualise pas chaque fois qu'un utilisateur publie quelque chose. Besoin d'un exemple pour cela?

<html>
<head>
<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

<script>
    $('document').ready(function(){
        $('#submit').click(function(){
            var message = $('#message').val();
            $('#message').reset();
            $.post('chat.php',{message: message},function(response){
                $("#messageboard").load("chat.php #messageboard > *");
            });
        })
        $('#message').keypress(function(e){
            if(e.which == 13){//Enter key pressed
                var message = $('#message').val();
                $('#message').reset();
                $.post('chat.php',{message: message},function(response){
                    $("#messageboard").load("chat.php #messageboard > *");
                });
            }
        });

        function startTimer() {
          $("#messageboard").load("chat.php #messageboard > *", function(){
              //repeats itself after 1 seconds
              setTimeout(startTimer, 1000);
          });
        }

        startTimer();
    });
</script>
</head>
<body>
<div id="messageboard"></div>
<input type="text" placeholder="Message" id="message"><input value="submit" type="button" id="submit">
</body>
</html>

Ce qui précède déclenchera un POST sur le bouton de soumission mais aussi si l'utilisateur clique sur Entrée. Le script s'actualisera automatiquement mais également lors d'une nouvelle soumission d'entrée. Ceci est juste un concept. Assurez-vous de créer le gestionnaire côté serveur pour enregistrer les messages dans la base de données.

0
Patrick Simard 22 juil. 2017 à 15:26