Verständnisfrage zu Ajax/Javascript

TheGateway

Mitglied
Hi

und zwar habe ich einen Chat gebaut. Dieser arbeitet aktuell so:

Daten senden:
Javascript:
function sendTextToDB() {

    posting = new Object();
                posting.ac = "5";
                posting.messageText = $("#sendChatTextQ").val();
                posting.fromID = userID;
                posting.userName = $("#userNameBox").val();
                posting.roomID = roomID;
                posting.type = "public";
           
        $.post("include/actionLoader.php", posting, function(data, status){
       
});}

Daten erhalten:
Javascript:
function getRoomMessages(roomID) {
 
 
        posting = new Object();
                posting.ac = "8";
                posting.roomID = roomID;
                posting.userName = $("#userNameBox").val();
                       
                $.post("include/actionLoader.php", posting, function(data, status){
                $("#chatTextQ").empty();
                $("#chatTextQ").append(data);
                });

}
Frage 1:
jetzt ist mein Problem, das ich trotzdem einen refresh habe. Es werden ja immer wieder alle Nachrichten ausgeben, ich beschränke diese zwar auf die letzten 20 aber irgendwie bin ich damit nicht glücklich, da ich in den Nachrichten durch den refresh nicht mehr scrollen kann. Wie kann man´s besser machen?

Da ich auch Request sparen möchte, könnte man nur, die noch nicht gelesenen Nachrichten ausgeben. aber ich wüsste keinen Ansatz wie man das macht. Es würde aber mehr Request verursachen bei dieser Methode ?

Frage 2: Wo ist der Unterschied zwischen meinem Insert und z.B diesem Ajax insert ?

Javascript:
$.ajax({               
  url: 'content/send.php', 
  type: 'post', // performing a POST request
  data : {
   data1 : 'value' // will be accessible in $_POST['data1']
  },
  dataType: 'json',               
  success: function(data)     
  {
// etc
  }
});
 
Zuletzt bearbeitet:
Hallo,

mit Ajax kannst du Requests zum Server schicken ohne das die Seite neu laden musst.

Warum willst du einen eigenen Chat schreiben. Es gibt doch schon genug Bibliotheken, die das ganz gut machen. Du musst auch bedenken, dass du auch mit AJAX ohne einen Request keine Antworten von deinem Partner bekommst. Hier werfe ich mal den Stichpunkt Websocket in den Raum.
 
hi Kalito,

ich bin ajax, javascript, jquery Anfänger. Um das ganze Prozedere zu verstehen schreibe ich es erstmal alles selbst und verwende daher keine fertigen Bibliotheken.

Das ich requests machen muss ist selbstverständlich. Websockets würde ich gern verwenden, aber verstehe es auch anhand von Tutorials nicht. Bin kein alleine lerner in dem sinne :)

Ich erleutere nochmal mein Problem:

ich lade eine userliste aus der Datenbank.
ebenso die Nachrichten mittels meines o.g. codes.

Problem ist nun, dass ich bei neuen Usern oder Nachrichten immer wieder alles komplett neu in eine div laden muss, da die divs scrollbar sind wird bei jedem neuen auslesen alle 1500ms wieder nach unten gescrollt. Man kann also nicht inruhe nachlesen wer was zu letzt geschrieben hat und das stört mich. Wie kann man es ändern? da bin ich noch nicht dahinter gekommen und bitte um Wissen :)
 
Um das ganze Prozedere zu verstehen schreibe ich es erstmal alles selbst und verwende daher keine fertigen Bibliotheken.
Und was ist jQuery, wenn keine fertige Bibliothek? :D

alles komplett neu in eine div laden muss
Genau das ist das Problem. Warum rufst du .empty() auf? Lass doch einfach diesen Aufruf weg. Dann musst du natürlich dafür sorgen, nur die letzten Nachrichten herauszufiltern (clientseitig mit JS) oder nur diese auszuliefern (serverseitig).

posting = new Object();
Idiomatischer ist übrigens "posting = {};" bzw. gleich mit den Attributen, die du danach füllst.
 
hi ComFreek,

jquery gehört für mich zum javascript xD

genau jetzt bin ich an dem Punkt, wenn ich .empty(); weg lasse, das ich dann alle nachrichren wieder hinten dran hänge. Wie könnte ich diesen filter realisieren? ich muss ja wissen welche nachrichten oder welche User andere User schon gesehen haben, das ist für mich wie den Urknall zu erläutern (kopfkino)

clientseitig prüfen hmmmmm
serverseitig prüfen wäre denkbar für mich, aber jeder user muss dem server mitteilen was er gelesen und gesehen hat oder nicht, das würde die requestanzahl x100 setzen :(
 
Du musst deine Nachrichten mit einer fortlaufenden ID versehen, quasi wie ein Timestamp, nur ohne den Fall, dass es zwei gleiche Timestamps geben kann.
Auf der Chatseite stellst du dann alle 1,5s die Anfrage "gib mir alle Nachrichten, deren ID > letzte zuletzt geladene ID". Bei der initialen Anfrage ist die Bedingung natürlich leer. Das serverseitige Skript lädt dann auch nur die entsprechenden Nachrichten aus der DB. Der Server teilt auch mit, welche ID die zuletzt übertragene Nachricht hat. So weiß das Clientskript immer genau, wo es ist.

Umgekehrt kannst du die Filteroperation auch clientseitig mit JS machen. Dafür muss der Server zusätzlich zu den Nachrichten auch deren IDs mitschicken, etwa in diesem Format:
Javascript:
[{
  id: 123,
  message: 'Hello'
}, {
  id: 124,
  message: 'World'
}
Die Filteroperation sieht dann so aus:
Javascript:
let lastReceivedId = /* immer merken */;
const data = /* per AJAX */;

const dataToBeShown = data.filter(function (message) {
  return message.id > lastReceivedId;
});

// Falls du schon über Arrow Functions (Lambdas) Bescheid weißt:
// So geht das wesentlich kürzer und schöner:
data.filter(message => message.id > lastReceivedId);
 
also so wie ich es jetzt verstanden habe:

1. ich lasse mir letzte id von allen nachricht ausgeben mit php
2. erstelle eine js abfrage ob die id > ist. wenn ja function -> alle nachrichten ab id 9923 zb.
3. ich gebe alle nachrichten aus die größer sind als id 9923

hab ich das so richtig verstanden? muss es ja auch verstehen, :)
 
Zurück