Scripts

PHP chatbox

Door Jelmer - -01-04-2005 00:00 -18.932 views

Wil je iets uitgebreiders? Kijk dan even naar de mysql-versie Dit is een te simpele chatbox puur gemaakt om een beetje duidelijk te maken wat er allemaal mogelijk is met javascript's XMLhttpRequest. Met XMLhttpRequest is het mogelijk data (niet alleen xml-bestanden zoals de naam doet vermoeden) binnen te slepen in een pagina (client-side) zonder de pagina te hoeven herladen, en dus ongemerkt. Ik heb dus als voorbeeld even een chatbox gemaakt. Maar mooier is natuurlijk dat als je bijvoorbeeld in een formulier je postcode invoert, je woonplaats vast voor je geselecteerd wordt. Ik heb deze tutorial hiervoor gebruikt. Deze chatbox heeft geen enkele beveiliging, en dient hoogstens als ondergrond voor iets anders. Voor diegenen die een kant en klare vergelijkbare chatbox willen, zie deze webpagina Om een of andere reden haalt (bij mij in ieder geval) Internet Explorer de opgevraagde data alsmaar weer uit de cache. Ik weet niet wat ik er tegen moet doen. In Firefox spelen er geen problemen op... Probleem opgelost! --- Revisie : titel even verbeterd Revisie 2 : Klein beetje beveiliging erin gestopt. Het is niet meer mogelijk om geen tekst toe te sturen, en html wordt niet meer uitgevoerd. Revisie 3 27 april 2005 : Eindelijk erachter hoe ik in internet explorer om het cacheprobleem heen kom. Stuur gewoon iedere keer een andere url (natuurlijk, hoe logisch!). Klinkt ingewikkeld, maar het komt erop neer dat je gewoon iedere aanvraag even een random nummer meestuurd. Kleine revisie 3.1 21 maart 2006 : Dankzij Cees moet het nu ook mogelijk zijn te gebruiken. mogelijke verbeteringen: checken of gebruikersnaam al in gebruik is alleen de nog niet toegevoegde berichten toevoegen -> mysql :S Mogelijk in versie 2 enterknop aan de praat krijgen ^^, Mogelijk in versie 2 Nu ook in deze dankzij Cees.

Download alle bestanden als ZIP

php-chatbox

--chatbox.html-----------------------------------------------------------------------------
[code]
<script>
var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
// JScript gives us Conditional compilation, we can cope with old IE versions.
// and security blocked creation of the objects.
 try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
  try {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (E) {
   xmlhttp = false;
  }
 }
@end @*/
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  xmlhttp = new XMLHttpRequest();
}
var timer = 6000; //iedere 5 seconden refreshen

function say(value)
{
	name = document.getElementById('name').value;
	xmlhttp.open("GET", "chat.php?text="+value+"&name="+name+"&random="+Math.round(9000*Math.random()),true);//method, target, async (set always true!)
	
	xmlhttp.onreadystatechange=function() {
		if (xmlhttp.readyState==4) {
			document.getElementById('chatwindow').innerHTML = xmlhttp.responseText;
		}
	}
	
	xmlhttp.send(null);
	timer = 6000;
	counter();
}

function update()
{
	xmlhttp.open("GET", "chat.php?random="+Math.round(9000*Math.random()),true);//method, target, async (set always true!)
	
	xmlhttp.onreadystatechange=function() {
		if (xmlhttp.readyState==4) {
			document.getElementById('chatwindow').innerHTML = xmlhttp.responseText;
		}
	}
	
	xmlhttp.send(null);
	timer = 6000;
	counter();
}

function counter()
{
	if(timer == 0)
	{
		update();
	}
	else
	{
		timer = timer - 1000;
		setTimeout("counter()", 1000);
	}
}

function check_enter(eventobjekt) 
{
   //Bedankt Cees!
   var var_key;
   if (navigator.appName == "Microsoft Internet Explorer") {
      var_key = window.event.keyCode;
   } else {
      var_key = eventobjekt.which;
   }
   if (var_key==13) {//{alert(var_key);
      say(value);
      document.getElementById('chattext').value = "";
   }
}

function hasvalue(value)
{
	if(value != "")
	{
		document.getElementById('submitbutton').disabled = false;
	}
	else
	{
		document.getElementById('submitbutton').disabled = true;
	}
}
</script>
<input type="text" id="name" name="name" style="width: 600px;" maxlength="256" value="Annoniem"/>
<div id="chatwindow" style="display:block; width: 600px; height: 400px; overflow: scroll;">
	Welcome to the chat. Please type a message.
</div><br/>
<input type="text" id="chattext" name="chattext" onKeyPress="check_enter(event);hasvalue(this.value);" onChange="hasvalue(this.value);" maxlength="256" style="width: 450px; "/>
<input type="submit" id="submitbutton" onMouseDown="javascript: say(document.getElementById('chattext').value);document.getElementById('chattext').value = '';" value="Say!" style="width:150px; " disabled />
<script>
	update()
</script>
[/code]
--chat.php----------------------------------------------------------------------------------
[code]
<pre>
<?php
if(isset($_GET['text']))
{
	$already = file("text.txt");
	$already[] = htmlentities($_GET['name'])." says:\t".htmlentities($_GET['text'])."\n";
	$handle = fopen("text.txt",'w');
	$iwant = array_chunk(array_reverse($already), 20);
	if(!fwrite($handle, implode("", array_reverse($iwant[0]))))
	{
		die("grote error!");
	}
	fclose($handle);
	echo implode("", array_reverse($iwant[0]));
}
else
{
	echo implode("", file("text.txt"));
}
?>
</pre>
[/code]
--text.txt------------------------------------------------------------------------------------
[code]
Hij doet het verdorie!
[/code]