Scripts

Web Worker met Ajax

Door Johan Dam -12-07-2010 11:23 -9.191 views

Een klein voorbeeld om dmv een Web Worker een pagina continue te laten updaten, Dit kan gebruikt worden om continue het laatste nieuws weer te geven bv, of ervoor te zorgen dat altijd de laatste reacties worden weergegeven. Dit is meer een voorbeeld dan een kant-en-klaar script. (IE8 Ondersteund geen web workers, mogelijk dat het downloaden van de google chrome frame plugin ervoor zorgt dat dit wel werkt maar dat heb ik niet getest, IE gebruikers zullen maar gewoon F5 moeten drukken (er van uit gaande dat je de informatie vooraf al met PHP oid hebt geladen en de web worker alleen gebruikt om extra content toe te voegen) Voorbeeld waarbij er continue de tijd word gevraagt: http://www.johandam.com/html5_test/web_worker.html (de seconden lijken raar te lopen, dit komt omdat er niet precies elke seconde een verzoek word gedaan)

Download alle bestanden als ZIP

worker.js

[code]
var old_value = '';
var xmlhttp = new XMLHttpRequest();

// web-workers are asynchrone, so we can use an infinite loop here. Normaly an infinite loop equels suicide.
while(true){
	// because the XMLHttpRequest asynchrone parameter is false, the script will wait for its execution, thus, no onreadystate is necesary
	// you could set it to true and watch your browser kill himself because he will open new connections one after another without waiting.
	xmlhttp.open("GET", "url_to_php_script_or_whatever.php", false);
	xmlhttp.send();
	
	// there isn't any reason to return the data to the main screen if the values haven't changed
	new_value = xmlhttp.responseText;
	if(new_value != old_value){
		old_value = new_value;
		postMessage(new_value);
	}
}
[/code]

web_worker.html

[code]
<!DOCTYPE html>
<html>
<head>
<title>Web Worker</title>
<script>
var worker = new Worker("js/worker.js");
worker.onmessage = function(event){
	document.getElementById('data_wrapper').innerHTML += event.data;
}
</script>
</head>

<body>

<div id="data_wrapper">Showing Data<br /><br /></div>

</body>
</html>
[/code]