HTML5Web Workers
Exécuter des scripts en tâche de fond
Les Web Workers permettent d'exécuter des scripts en tâche de fond (à l'arrière-plan).
Une fois créé, un worker peut envoyer des messages à son processus père en envoyant des messages qui seront réceptionnés par un gestionnaire d'événement spécifié à la création.
Exemple de recherche de nombre premiers:
Le fichier worker.js :
Attention, si vous testez ce code avec le moteur Webkit (qui est utilisé par Chrome et Safari), vous devez mettre la page en ligne. Car webkit refuse d'utiliser les web-workers en local !
Une fois créé, un worker peut envoyer des messages à son processus père en envoyant des messages qui seront réceptionnés par un gestionnaire d'événement spécifié à la création.
Dedicated-Workers
Il existe deux types de web-workers : Les shared-workers (workers partagés en français) et les dedicated-workers (workers dédiés) que nous allons analyser ci-dessous. Ces dedicated-workers, une fois créés, sont liés à leur créateur et uniquement à celui-ci.Exemple de recherche de nombre premiers:
<!DOCTYPE HTML>
<html>
<head>
<title>Worker - Exemple de noyau de calcul</title>
</head>
<body>
<p>Le plus grand nombre premier découvert à ce jour est : <output id="result"></output></p>
<script>
var worker = new Worker('worker.js');
worker.onmessage = function (event) {
document.getElementById('result').textContent = event.data;
};
</script>
</body>
</html>
<html>
<head>
<title>Worker - Exemple de noyau de calcul</title>
</head>
<body>
<p>Le plus grand nombre premier découvert à ce jour est : <output id="result"></output></p>
<script>
var worker = new Worker('worker.js');
worker.onmessage = function (event) {
document.getElementById('result').textContent = event.data;
};
</script>
</body>
</html>
Le fichier worker.js :
var n = 1;
search: while(true) {
n += 1;
for (var i = 2; i <= Math.sqrt(n); i += 1)
if (n % i == 0)
continue search;
// trouve un nombre premie!
postMessage(n);
}
> Essayez le !search: while(true) {
n += 1;
for (var i = 2; i <= Math.sqrt(n); i += 1)
if (n % i == 0)
continue search;
// trouve un nombre premie!
postMessage(n);
}
Attention, si vous testez ce code avec le moteur Webkit (qui est utilisé par Chrome et Safari), vous devez mettre la page en ligne. Car webkit refuse d'utiliser les web-workers en local !
Shared-Workers
Contrairement aux dedicated-workers (workers dédiés), les shared-workers (workers partagés) peuvent être contrôlés par plusieurs threads.Il est donc possible de créer plusieurs références vers le même worker, et ces références peuvent même provenir de pages différentes.
Voici la page HTML (Exemple du Hello World !)
<!DOCTYPE HTML>
<title>exemple de Shared workers</title>
<pre id="log">Message :</pre>
<script type="text/javascript">
var worker = new SharedWorker('test-shared-workers.js');
var log = document.getElementById('log');
worker.port.onmessage = function(e) { // note: not worker.onmessage!
log.textContent += '\n' + e.data;
}
</script>
<title>exemple de Shared workers</title>
<pre id="log">Message :</pre>
<script type="text/javascript">
var worker = new SharedWorker('test-shared-workers.js');
var log = document.getElementById('log');
worker.port.onmessage = function(e) { // note: not worker.onmessage!
log.textContent += '\n' + e.data;
}
</script>
Le fichier test-shared-workers.js
onconnect = function(e) {
var port = e.ports[0];
port.postMessage('Bonjour le Monde!');
var port = e.ports[0];
port.postMessage('Bonjour le Monde!');
> Essayez cet exemple plusieurs fois !
