Problem mit AJAX-Chat

[Sasser]

Guten Tag!

Ich habe mir einen kleinen Chat gebaut, welcher wunderbar funktioniert.

Ich möchte in der folgenden Funktion die Funktion loadchat() aufrufen, sodass er Chat nach dem Absenden neu geladen wird. Korioserweise habe ich immer entweder im FF oder im IE ein Problem. Die folgende Funktion funktioniert im IE super, nur der FF zeigt nach dem Absenden den Chat einfach nicht mehr an und lädt ihn dann nach einiger Zeit neu. Integriere ich in der folgenden Funktion nach dem Absenden loadchat() funktioniert es im FF super und der IE schickt überhaupt keine Daten mehr, zeigt aber den Chat an.

function sendchat() {
	if (xmlHttp) {
		if (document.chat.mode.value == 'global') {
			xmlHttp.open('POST', 'include/sendchat.php');
			xmlHttp.setRequestHeader('Content-Type',
					'application/x-www-form-urlencoded');
			xmlHttp
					.send('message=' + encodeURIComponent(document.chat.message.value) + '&mode=global');
		} else if (document.chat.mode.value == 'alliance') {
			xmlHttp.open('POST', 'include/sendchat.php');
			xmlHttp.setRequestHeader('Content-Type',
					'application/x-www-form-urlencoded');
			xmlHttp
					.send('message=' + encodeURIComponent(document.chat.message.value) + '&mode=alliance');
		}
		document.chat.message.value = '';
		document.chat.message.focus();
	}
}

Wenn ich aber nun den Aufruf der Funktion loadchat() am Anfang aufrufe funktioniert es, allerdings lädt er ja den Chat neu, bevor der neue Inhalt gespeichert wurde:

function sendchat() {
	if (xmlHttp) {
		loadchat();
		if (document.chat.mode.value == 'global') {
			xmlHttp.open('POST', 'include/sendchat.php');
			xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			xmlHttp.send('message=' + encodeURIComponent(document.chat.message.value) + '&mode=global');
		} else if (document.chat.mode.value == 'alliance') {
			xmlHttp.open('POST', 'include/sendchat.php');
			xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			xmlHttp.send('message=' + encodeURIComponent(document.chat.message.value) + '&mode=alliance');
		}
		document.chat.message.value = '';
		document.chat.message.focus();
	}
}

So sieht mein kompletter Quelltext aus:

var xmlHttp = false;
try {
	xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
	try {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	} catch (e) {
		xmlHttp = false;
	}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
	xmlHttp = new XMLHttpRequest();
}
loadchat();
setInterval("loadchat()", 5000);

function loadchat() {
	if (xmlHttp) {
		if (document.chat.mode.value == 'global') {
			xmlHttp.open('GET', 'include/loadchat.php?mode=global', true);
			var validity = new Date();
			validity = new Date(validity.getTime() + 1000 * 60 * 20);
			document.cookie = 'chat=global; expires=' + validity.toGMTString() + ';';
		} else if (document.chat.mode.value == 'alliance') {
			xmlHttp.open('GET', 'include/loadchat.php?mode=alliance', true);
			var validity = new Date();
			validity = new Date(validity.getTime() + 1000 * 60 * 20);
			document.cookie = 'chat=alliance; expires=' + validity.toGMTString() + ';';
		}
		xmlHttp.onreadystatechange = function() {
			if (xmlHttp.readyState == 4) {
				if (xmlHttp.status == 200) {
					document.getElementById("chathistory").innerHTML = xmlHttp.responseText;
				}
			}
		};
		xmlHttp.send(null);
	}
}

function sendchat() {
	if (xmlHttp) {
		if (document.chat.mode.value == 'global') {
			xmlHttp.open('POST', 'include/sendchat.php');
			xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			xmlHttp.send('message=' + encodeURIComponent(document.chat.message.value) + '&mode=global');
		} else if (document.chat.mode.value == 'alliance') {
			xmlHttp.open('POST', 'include/sendchat.php');
			xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			xmlHttp.send('message=' + encodeURIComponent(document.chat.message.value) + '&mode=alliance');
		}
		document.chat.message.value = '';
		document.chat.message.focus();
	}
}

 

[Abro]

1) Benutz ein JS-Framework wie jQuery, MooTools, ... Gibt's ja schließlich wegen der Browserproblemchen. Da hast du dann auch unkomplizierte Callbacks.

2) Benutz eine Push-Technik, sonst kannste das vergessen mit dem Chat. Das Stichwort heisst Comet. Als Applikationen gibt es da z.B. die AJAX Push Engine oder Lightstreamer. Letzteres noch nicht getestet. In den Google Libs müsste es da auch etwas zu geben und ich habe vor einiger Zeit mal von Plänen bei Dojo gehört, mich allerdings nicht weiter damit beschäftigt.

Eine Möglichkeit so etwas selbst zu machen ist z.B. einen unsichtbaren Iframe in die Seite zu integrieren, der nicht aufhört zu laden und in dem man dann immer wieder Script-Tags ausgibt, sobald es etwas neues gibt. Ist allerdings je nach Anwendungsgröße eine Performancetechnische katastrophe. Wenn man da nicht weiss was man tut sollte man eben oben beschriebene Fertiglösungen nehmen.....oder Javascript vergessen und auf *hust* Flash & Co. zurückgreifen.