1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
---
title: Worker
slug: Web/API/Worker
tags:
- API
- DOM
- JavaScript
- Reference
- Web Workers
- Worker
- Workers
translation_of: Web/API/Worker
---
<p>{{APIRef("Web Workers API")}}</p>
<p>L'interface <strong>Worker</strong> de l'<a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Workers_API">API Web Workers</a> représente une tâche de fond qui peut facilement être créée et peut envoyer des messages en retour à son créateur. Créer un Worker est aussi simple que d'appeler le constructeur <code>Worker()</code>, en spécifiant un script qui définira le comportement du thread du worker.</p>
<p>Notez qu'un worker peut lui aussi lancer d'autre Worker tant que ces autres workers sont hébergés par une page qui a la même origine que la page parente. (Note: <a href="https://bugs.webkit.org/show_bug.cgi?id=22723">Les workers imbriqués ne sont pas encore implémentés dans WebKit</a>).</p>
<p>De plus les workers peuvent utiliser <a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest"><code>XMLHttpRequest</code></a> pour les communiquer avec le réseau, à l'exception des attributs <code>responseXML</code> et <code>channel</code> qui vont toujours retourner <code>null</code>.</p>
<p>Toutes les<a href="/fr/DOM/Worker/Functions_available_to_workers"> interfaces et toutes les fonctions</a> ne seront pas disponibles pour le script associé au worker.</p>
<div class="blockIndicator note">
<p>Dans firefox, si vous souhaitez utiliser les workers dans une extension et que vous souhaitez avoir accès au <a href="/en/js-ctypes" title="en/js-ctypes">js-ctypes</a>, vous devez utiliser le {{ domxref("ChromeWorker") }} à la place.</p>
</div>
<h2 id="Constructeurs">Constructeurs</h2>
<dl>
<dt>{{domxref("Worker.Worker", "Worker()")}}</dt>
<dd>Créer un web worker dédié qui execute le script qui est au bout de l'URL spécifié. Les workers peuvent aussi être créés en utilisant les <a href="https://developer.mozilla.org/fr/docs/Web/API/Blob">Blobs</a>.</dd>
</dl>
<h2 id="Propriétés">Propriétés</h2>
<p><em>Il hérite de propriétés de son parent, {{domxref("EventTarget")}}, et implémente les propriétés de {{domxref("AbstractWorker")}}.</em></p>
<h3 id="Gestionnaires_dévénements">Gestionnaires d'événements</h3>
<dl>
<dt>{{domxref("AbstractWorker.onerror")}}</dt>
<dd>Un {{ domxref("EventListener") }} qui est appelé quand un {{domxref("ErrorEvent")}} de type <code>error</code> arrive dans le worker. Il est hérité de {{domxref("AbstractWorker")}}.</dd>
<dt>{{domxref("Worker.onmessage")}}</dt>
<dd>Un {{ domxref("EventListener") }} qui est appelé quand un {{domxref("MessageEvent")}} de type <code>message</code> arrive dans le worker — i.e. quand un message est envoyé au document parent depuis le worker via {{domxref("DedicatedWorkerGlobalScope.postMessage")}}. Le message est stocké dans la propriété {{domxref("MessageEvent.data", "data")}} de l'événement.</dd>
<dt>{{domxref("Worker.onmessageerror")}}</dt>
<dd>Un {{domxref("EventHandler")}} qui indique le code à appeler quand un message {{event("messageerror")}} arrive.</dd>
</dl>
<dl>
</dl>
<h2 id="Méthodes">Méthodes</h2>
<p><em>Il hérite de son parent, </em> <em>{{domxref("EventTarget")}},</em> et implémente les propriétés de <em>{{domxref("AbstractWorker")}}.</em></p>
<dl>
<dt>{{domxref("Worker.postMessage()")}}</dt>
<dd>Envoie un message, qui est n'importe quel objets JavaScript vers la clôture du worker.</dd>
<dt>{{domxref("Worker.terminate()")}}</dt>
<dd>Termine immédiatement le worker. Ceci n'offre aucune chance au worker de finir son opération en cours, il est simplement arrêté une fois pour toute. Les instances de <code><a href="/fr/docs/Web/API/ServiceWorker">ServiceWorker</a></code> ne supportent pas cette méthode.</dd>
</dl>
<h2 id="Évènements">Évènements</h2>
<dl>
<dt><code><a href="/fr/docs/Web/API/Worker/message_event">message</a></code></dt>
<dd>Lorsque le worker parent reçoit un message venant du worker. On peut aussi y accéder via la propriété {{domxref("Worker.onmessage")}}.</dd>
<dt><code><a href="/fr/docs/Web/API/Worker/messageerror_event">messageerror</a></code></dt>
<dd>Lorsque le worker reçois un message qu'il ne peut <a href="/fr/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">désérialiser</a>. Aussi disponible à travers la propriété {{domxref("Worker.onmessageerror")}}.</dd>
</dl>
<dl>
<dt><code><a href="/fr/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a></code></dt>
<dd>Levé à chaque fois qu'une {{jsxref("Promise")}} est rejeté, avec ou sans gestionnaire pour intercepter l'exception. Aussi disponible à travers le gestionnaire <code><a href="/fr/docs/Web/API/WindowEventHandlers/onrejectionhandled">onrejectionhandled</a></code>.</dd>
<dt><code><a href="/fr/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a></code></dt>
<dd>Levé quand une {{jsxref("Promise")}} est rejetée sans gestionnaire pour récupérer l'exception. Aussi disponible à travers la propriété <code><a href="/fr/docs/Web/API/WindowEventHandlers/onunhandledrejection">onunhandledrejection</a></code>.</dd>
</dl>
<h2 id="Exemple">Exemple</h2>
<p>L'extrait de code suivant montre la création d'un objet {{domxref("Worker")}} en utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}} et l'utilisation de l'objet:</p>
<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> monWorker <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Worker</span><span class="punctuation token">(</span><span class="string token">"worker.js"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="keyword token">var</span> premier <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'#numero1'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
premier<span class="punctuation token">.</span>onchange <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
monWorker<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span><span class="punctuation token">[premiere</span><span class="punctuation token">.</span>valeur<span class="punctuation token">, deuxieme</span><span class="punctuation token">.</span>valeur<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Message envoyé au worker'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span></code></pre>
<p>Pour un exemple complet, voir <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Exemple basique de worker dédié</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">exécuter le worker dédié</a>).</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spécification</th>
<th scope="col">Statuts</th>
<th scope="col">Commentaire</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "#worker", "Worker")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
<div>
<p>Voici le support des différents type de worker. Voir les pages de chaque worker pour avoir les particularités.</p>
<p>{{Compat("api.Worker")}}</p>
<h3 id="Comportement_des_erreur_Cross-origin_sur_les_worker">Comportement des erreur Cross-origin sur les worker</h3>
<p>Dans les premières versions des spécifications, charger un scripte worker en cross-origin lève une exception <code>SecurityError</code>. Désormais, à la place un évènement {{event("error")}} lancé. Pour en savoir plus, voir <em><a href="https://www.fxsitecompat.com/en-CA/docs/2016/loading-cross-origin-worker-now-fires-error-event-instead-of-throwing-worker-in-sandboxed-iframe-no-longer-allowed/">(en) Loading cross-origin worker now fires error event instead of throwing; worker in sandboxed iframe no longer allowed</a></em>.</p>
</div>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a class="internal" href="/fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers" title="Utiliser les web Worker">Utiliser les web Worker</a></li>
<li><a href="/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Fonctions et classes disponibles dans les Web Workers</a></li>
<li>D'autres type de workers: {{ domxref("SharedWorker") }}, et <a href="https://developer.mozilla.org/fr/docs/Web/API/ServiceWorker_API">ServiceWorker</a>.</li>
<li>Worker non-standard, spécifique à Gecko: {{ domxref("ChromeWorker") }}, utilisé par les extensions.</li>
</ul>
|
