den Chat-Body für jeden der Benutzer aktualisieren

Ich habe versucht, ein Chat-System mit PHP + Ajax + MySQL erstellen.den Chat-Body für jeden der Benutzer aktualisieren

<?php 
    session_start(); 
?> 
<html> 
    <head> 
     <title>Live Table Data Edit</title> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    </head> 
    <body> 
     <div class="container"> 
      <br /> 
      <br /> 
      <br /> 
      <div class="table-responsive"> 
       <h3 align="center">You Are : <?php echo $_SESSION['name']; 
       ?></h3><br /> 
       <div id="live_data"></div>     
      </div> 
      <div id="messages"></div> 
      <div class="area" style="display:none"> 
      <textarea id="text" name="text"></textarea> 
      <input type="submit" id="sub" name="sub" value="Send" /> 
      </div> 
     </div> 
    </body> 
</html> 

<script> 
$(document).ready(function() { 
    function fetch_data() { 
    $.ajax({ 
     url: "select.php", 
     method: "POST", 
     success: function(data) { 
     $('#live_data').html(data); 
     } 
    }); 
    } 
    fetch_data(); 

    $(document).on('click', '.first_name', function() { 
    var id = $(this).data("id1"); 

    function fetch_chat() { 
     $.ajax({ 
     url: "fetch_chat.php", 
     method: "POST", 
     data: { 
      id: id 
     }, 
     dataType: "text", 
     success: function(data) { 
      $('#messages').html(data); 
      $("div.area").show(); 
     } 

     }); 
    } 

    function myTimeoutFunction() { 
     fetch_chat(); 
    } 

    myTimeoutFunction(); 
    setInterval(myTimeoutFunction, 1000); 

    fetch_chat(); 
    $("#sub").click(function() { 
     var text = $("#text").val(); 
     $.post('insert_chat.php', { 
     id: id, 
     msg: text 
     }, function(data) { 
     $("#messages").append(data); 
     $("#text").val(''); 

     }); 
     alert(text); 
    }); 
    }); 
}); 
</script>

aber das Problem mit diesem Code ist, dass es nur für den ersten Benutzer arbeitete ich mit Chat aber der Bildschirm blinken beginnen häufig, wenn ich auf andere Benutzer klicken name. Beispiel: Benutzer 'a' ist angemeldet und klickt auf Benutzer 'b' und startet den Chat. Alles funktioniert bis jetzt gut, aber wenn Benutzer 'a' denkt, mit einem anderen Benutzer zu chatten 'c' beginnt der gesamte Chat-Teil mit allen in der Datenbank gespeicherten Chats zu blinken. Bitte sag mir wo ich falsch liegen soll.

Quelle

2017-11-03 max tech

Dies erfordert ein komplettes Umdenken wirklich, um alle möglichen Fehler loszuwerden.

Das oben beschriebene Problem besteht darin, dass Sie jedes Mal, wenn ein Benutzer auf einen Namen klickt, ein neues Zeitintervall erstellen. Dadurch entsteht allmählich und Sie werden alle paar Millisekunden statt jeder Sekunde angefragt. Dies ist nicht nachhaltig. Es besteht keine Notwendigkeit, Intervalle, Funktionen usw. innerhalb des "Klick" -Handlers des Namens zu deklarieren. Ich denke, Sie tun dies wegen der Abhängigkeit von der Benutzer-ID, die sich aus der Auswahl eines Namens ergibt. Sie können dies jedoch überwinden, indem Sie den Wert einer globalen Variablen zuweisen.

Dies bedeutet, dass Sie alle Funktionen außerhalb des Click-Handlers verschieben können, wodurch die Gefahr vermieden wird, dieselben Intervalle/Ereignisse mehrmals neu zu erstellen. Ich habe es auch geändert, so dass es kein Intervall verwendet. Stattdessen ruft fetch_chat sich selbst 2 Sekunden nach dem Empfang der vorherigen Antwort erneut auf. Auf diese Weise haben Sie, wenn ein Abruf länger als normal dauert, nicht mehrere konkurrierende Abrufvorgänge parallel ausgeführt und möglicherweise Verwirrung verursacht. Ich habe auch das Zeitintervall auf etwas erhöht, das immer noch vernünftig ist, aber den Server nicht überlasten wird.

Hier ist eine komplette Überarbeitung des Codes:

<script> 
var currentID = null; 
var chatTimer = null; 

function fetch_data() { 
    $.ajax({ 
    url: "select.php", 
    method: "POST", 
    success: function(data) { 
     $('#live_data').html(data); 
     fetch_chat(); 
    } 
    }); 
} 

function fetch_chat() { 
    $.ajax({ 
    url: "fetch_chat.php", 
    method: "POST", 
    data: { 
     id: currentID 
    }, 
    dataType: "text", 
    success: function(data) { 
     $('#messages').html(data); 
     $("div.area").show(); 
     chatTimer = setTimeout(fetch_chat, 2000); //request the chat again in 2 seconds time 
    } 

    }); 
} 

$(document).ready(function() { 

    $(document).on('click', '.first_name', function() { 
    currentID = $(this).data("id1"); 
    //immediately fetch chat for the new ID, and clear any waiting fetch timer that might be pending 
    clearTimeout(chatTimer); 
    fetch_chat(); 
    }); 

    $("#sub").click(function() { 
    var text = $("#text").val(); 

    $.post('insert_chat.php', { 
     id: currentID, 
     msg: text 
    }, function(data) { 
     $("#messages").append(data); 
     $("#text").val(''); 
    }); 
    alert(text); 
    }); 

    fetch_data(); //this will also trigger the first fetch_chat once it completes 
}); 
</script>

P. S. Wenn Sie etwas schneller als 2 Sekunden aktualisieren möchten, dann müssen Sie wahrscheinlich überlegen, die Lösung mit Websockets neu zu gestalten, um vollständige 2-Wege-Kommunikation zu erhalten, so dass der Server Chat-Elemente an den Client "schieben" kann Umfrage den Server.

Quelle

2017-11-03 13:53:18 ADyson

Danke für Ihre Hilfe. Es funktioniert wirklich für mich. und du wurdest vorgeschlagen, websockets, also kannst du einen Link teilen, um zu lernen, websockets in php zu benutzen. Danke noch einmal. –

Kein Problem Ich habe keine Websockets benutzt, tbh, ich kenne nur die Theorie, also bin ich wahrscheinlich nicht die beste Person, die nach einer bestimmten Ressource fragt. Aber ich weiß nur aus dem Googeln des Themas, dass Open-Source-Projekte existieren, die behaupten, dass man sie nutzen kann, um eine funktionierende PHP-Websocket-Lösung leichter zu bekommen, als dies von Grund auf selbst zu tun. – ADyson

benötigen Sie weitere Hilfe: https://stackoverflow.com/questions/47112045/cant-scroll-up-the-div-contents –

Sie verwenden setInterval, das ist falsch, das startet eine Schleife jedes Mal, wenn Sie auf einen Chat klicken, sollten Sie eine einzige Schleife über alle Ihre Chats laufen haben. Erwägen Sie auch, setTimeout anstelle von setInterval zu verwenden, um sicherzustellen, dass Sie zuerst die Antwort erhalten.

Quelle

2017-11-03 13:15:31

können Sie mir den Code bereitstellen.Es wird sehr hilfreich für mich sein. –

den Chat-Body für jeden der Benutzer aktualisieren

Antwort

Verwandte Themen