Share
Un travailleur Web est un script JS qui s'exécute en arrière-plan, séparément des autres scripts, ce qui nous permet d'introduire des threads dans nos applications Web. Bien qu'ils ne fassent pas partie des spécifications HTML5, les travailleurs Web peuvent être utilisés avec des applications HTML5. Dans ce petit conseil, nous allons voir comment les utiliser..
Au pays de HTML5, nous avons des API très intéressantes disponibles. Certains d'entre eux, comme les travailleurs Web, sont utiles pour augmenter les performances, ce qui est très important pour les applications et les jeux. Mais comment travaillent-ils sur le Web??
Chaque instance d'un travailleur Web crée un autre thread dans lequel s'exécute votre JavaScript. Vous en instanciez un comme ceci:
Accentsconagua
var worker = new Worker ('nomfichier.js'); Ici, 'filename.js' est le nom du fichier contenant votre script. Les travailleurs étant des environnements individuels, vous ne pouvez pas utiliser de code directement incorporé au HTML; vous devez utiliser un fichier séparé.
Les travailleurs n'ont pas accès à la page DOM ni à l'objet global. Comment communiquent-ils avec le site? C'est simple. Lorsque vous souhaitez envoyer des données de votre page à un utilisateur, vous appelez postMessage ().
Cela prend un paramètre: les données à envoyer, qui peuvent être une chaîne ou un objet analysable JSON (ce qui signifie que vous ne pouvez pas transmettre de fonctions ou de références circulaires, ou vous obtiendrez un DOM_EXCEPTION). Sur certains navigateurs, il y a un problème avec les objets, il est donc toujours préférable d'analyser manuellement l'objet avec JSON.parse () de sorte que vous n'avez pas à vous soucier des implémentations incomplètes.
Il en va de même si vous envoyez des données d’un utilisateur à la page: il suffit d’appeler postMessage () sur soi, qui fait référence à la portée globale du travailleur. (Vous faites cela dans le script du travailleur, bien sûr).
Ensuite, pour recevoir les données, vous devez joindre un message gestionnaire d'événements. Il y a deux façons de faire cela, comme avec les événements réguliers pour les éléments DOM; vous pouvez soit assigner directement une fonction au travailleur message propriété, ou vous pouvez utiliser addEventListener ().
// Première manière: worker.onmessage = function (e) console.log (e.data); // Journalise les données passées // Deuxième méthode: worker.addEventListener ('message', fonction (e) console.log (e.data); // journalise les données passées); C'est votre choix quelle méthode utiliser. De toute façon, le paramètre de la fonction sera un un événement objet, et les données que vous avez envoyé en utilisant postMessage () sera transmis via le Les données propriété de cet événement.
D'accord, mais si nous devions utiliser une bibliothèque externe? Nous n'avons pas accès au DOM ou à la portée globale, nous ne pouvons donc pas simplement injecter le script.
Bien sûr, nous n’avons pas besoin de - il existe une fonction pour cela. On l'appelle importScripts () et il accepte un ou plusieurs arguments: noms de script à charger dans le champ d'application de Worker. Vous devez savoir que les scripts passés dans cette fonction sont chargés dans un ordre aléatoire, mais ils seront exécutés comme spécifié et l'exécution du script sera suspendue jusqu'à ce qu'ils soient chargés..
importScripts ('one-lib.js'); // Charge un script importScripts ('first-lib.js', 'second-lib.js', 'third-lib.js'); // Charge trois scripts Vous pouvez utiliser importScripts n'importe où dans votre code, ce qui facilite la création de requêtes JSONP dans les opérateurs, comme nous le ferons dans l'exemple suivant.
Bien, alors maintenant vous voulez probablement voir un ouvrier en action. Au lieu de montrer quelque chose d'assez inutile, comme obtenir des nombres premiers ou des nombres de Fibonacci, j'ai décidé de faire quelque chose que vous utiliserez peut-être après quelques modifications.
L’exemple de script (j’ai inclus uniquement le code du travailleur, le reste est facile à faire) obtiendra les 100 derniers tweets de @envatoactive (nous devons définir le nombre sur 121 au lieu de 100, car l’API Tweeter envoie moins de tweets que demandé - ne me demandez pas pourquoi, je ne sais pas).
Voici le code qui irait dans le fichier de script Web Worker actuel:
// Fonction d'assistance pour le traitement des données var process = function (données) // Itérer dans les données; nous savons que c'est un tableau, il est donc sûr pour (var i = 0, v; v = données [i]; i ++) // Et passez le texte du Tweet à la page self.postMessage (text: v.text); // Une fois le travail terminé, indiquez à la page self.postMessage ("completed"); // Attache un écouteur d'événement pour gérer les messages self.addEventListener ('message', function (event) // Vérifie si la commande envoyée était 'start' // non nécessaire ici, mais peut être utile ultérieurement si (event.data == "start") // Répondre à la page où nous avons démarré le travail self.postMessage ("started"); // Core du script, récupérez les Tweets // Le paramètre callback spécifie la fonction à exécuter après la demande. // (Nous appelons la fonction process (), définie ci-dessus.) // Le nombre doit être égal à 121, car l'API Tweeter envoie moins de données que importScripts demandé ("http://twitter.com/statuses/user_timeline/envatoactive." json? callback = process & count = 121 ");); Il devrait être facile de comprendre comment tout cela fonctionne à partir des commentaires. Cela permet à votre application de charger tous les tweets en arrière-plan, en utilisant un fil séparé.
Maintenant, essayez d’insérer le code équivalent suivant, qui ne pas utilisez des outils Web dans la tête d’une page vide et notez le retard. (C'est encore petit, mais imaginez si vous ne receviez pas 100, mais 100 000 Tweets):
Comme vous pouvez le constater, les travailleurs Web vous offrent un moyen simple de supprimer les retards de votre interface graphique et de déplacer des calculs complexes ou la mise en réseau vers des threads distincts..
J'espère que vous avez appris quelque chose de nouveau grâce à cet article. Peut-être utiliserez-vous Workers dans votre prochain projet? Si vous avez des questions ou des problèmes, veuillez commenter ci-dessous.
