kostenloser Webspace werbefrei: lima-city

Chat: nur neue Zeilen laden

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   fuerderer

   fuerderer hat kostenlosen Webspace.

   21:29, 26.3.2012

   hallo zusammen,
   ich möchte einen Chatroom bauen, der Die Seite z.B. alle 5 Sek. neu lädt. Dabei sollen aber nur neue Zeilen geladen werden und nicht das ganze Dokument. Die neuen Zeilen werden dann von Javascript einfach angehängt. Gibt es dafür eine Möglichkeit?

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. chatstory

   

   chatstory hat kostenlosen Webspace.

   21:41, 26.3.2012

   du merkst dir einfach die ID der zuletzt geladenene Zeile, dann kannst du beim Laden alle danach eingetragenen Einträge laden und diese von Javascript anzeigen lassen ;)
   
   Also JS soll sich die ID merken ;)

4. hackyourlife

   Moderator

   hackyourlife hat kostenlosen Webspace.

   21:43, 26.3.2012

   Ja, die gibt es.
   Das funktioniert normalerweise so: du Lädst am Anfang einmal alle Zeilen vom Server herunter.
   Danach machst du z.B. mit XmlHttpRequests jeweils eine Abfrage ob eine neue Zeile nach der letzten die du am Client hast vorhanden ist und wenn ja lässt du sie dir zuschicken. Die hängst du dann an deinen Log an.
   
   Ich hab sowas zufälligerweise schon mal geschrieben, hier etwas Code:

   var lastid = 0;
   
   function chatUpdate() {
   	if(!loggedin)
   		return;
   	var request = createXMLHttpRequest();
   	request.onreadystatechange = function() {
   		if((request.readyState == 4) && (request.status == 200)) {
   			var output = document.getElementById('history');
   			if(request.responseXML == null)
   				return;
   			var doc = request.responseXML;
   			try {
   				var root = doc.getElementsByTagName('response')[0];
   				var status = root.getElementsByTagName('status')[0];
   				var statuscode = status.getElementsByTagName('code')[0].firstChild.data;
   				var statustext = status.getElementsByTagName('text')[0].firstChild.data;
   				if(statuscode != 0) {
   					output.innerHTML = statustext;
   					return;
   				}
   				setTimeout('chatUpdate();', 2000);
   				if(root.getElementsByTagName('lastid') == null)
   					return;
   				if(root.getElementsByTagName('lastid')[0] == null)
   					return;
   				if(root.getElementsByTagName('lastid')[0].firstChild == null)
   					return;
   				lastid = parseInt(root.getElementsByTagName('lastid')[0].firstChild.data);
   				var data = root.getElementsByTagName('data')[0];
   				var entries = data.getElementsByTagName('entry');
   				if(entries != null) {
   					for(var i = 0; i < entries.length; i++) {
   						var time = entries[i].getElementsByTagName('time')[0].firstChild.data;
   						var user = entries[i].getElementsByTagName('user')[0].firstChild.data;
   						var message = entries[i].getElementsByTagName('message')[0].firstChild.data;
   						var element = document.createElement("div");
   						var node = document.createTextNode(time + " " + user + "> " + message);
   						element.appendChild(node);
   						output.appendChild(element);
   					}
   				}
   			} catch(e) {
   				output.innerHTML = e;
   			}
   		}
   	}
   	request.open("GET", "db.php?get&last=" + lastid + "&" + new Date().getTime(), true);
   	request.send();
   }
   
   function createXMLHttpRequest() {
   	if(window.XMLHttpRequest) {
   		// code for IE7+, Firefox, Chrome, Opera, Safari
   		return new XMLHttpRequest();
   	} else {
   		// code for IE6, IE5
   		return new ActiveXObject("Microsoft.XMLHTTP");
   	}
   }

   Die Funktion chatUpdate enthält alles, was nötig ist, um eine Zeile zu laden (das ist nur ein Beispiel!!!).
   
   Das ganze in Funktion kannst du dir hier ansehen.
   
   Wie es funktioniert:
   Die Funktion chatUpdate wird in einem Intervall aufgerufen. Jedes mal schickt sie an den Server die ID der letzten Zeile, die noch empfangen wurde. Der Server schaut, ob er weitere Zeilen hat, und wenn er welche hat, schickt er sie an den Client. Der hängt sie dann an den Log an.
5. Autor dieses Themas

   fuerderer

   fuerderer hat kostenlosen Webspace.

   21:50, 26.3.2012

   danke für den Code, das sieht allerdings ziemlich viel aus!
   Wichtig ist mir der Bereich in dem die Anfrage an den Server geht und die Antwort gelesen wird.

6. hackyourlife

   Moderator

   hackyourlife hat kostenlosen Webspace.

   22:19, 26.3.2012

   fuerderer schrieb:
   danke für den Code, das sieht allerdings ziemlich viel aus!

   Ist gar nicht so viel. Es wird nur die Rückgabe des Servers als XML weiterverarbeitet und der relevante Text (Chat-Meldungen) per DOM in das aktuelle Dokument eingefügt.

7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?