Comment utiliser les travailleurs Web partagés JavaScript dans HTML5

Nous avons récemment discuté des travailleurs Web JavaScript en référence à la variété «dédiée». Si vous ne l'avez pas encore lu, je vous suggère de le faire en premier - cet article s'appuie sur les mêmes concepts.

Les travailleurs du Web en un mot

Un travailleur Web est un seul fichier JavaScript chargé et exécuté en arrière-plan sur un thread séparé. Les travailleurs Web dédiés sont liés à leur créateur (le script qui a chargé le travailleur). Les travailleurs Web partagés permettent à n'importe quel nombre de scripts de communiquer avec un seul travailleur. Les travailleurs Web partagés adhèrent aux mêmes règles que leurs homologues dédiés: pas d'accès DOM, document ou de script de page et une autorisation en lecture seule à la plupart des propriétés de fenêtre. De plus, les scripts de page ne peuvent communiquer qu'avec des travailleurs Web partagés à partir de la même origine / domaine (SomeSite.com). Actuellement, les travailleurs Web partagés sont pris en charge dans Chrome, Safari et Opera. Le support Firefox 4 et IE9 peut arriver, mais ne pariez pas dessus. Les travailleurs partagés peuvent économiser des ressources, mais ils ajoutent un niveau de complexité supplémentaire. Attendez-vous à quelques problèmes, par exemple,

• Les gestionnaires des événements DOM2 (AdveventListener) semblent être l'implémentation la plus fiable.
• Vous rencontrerez presque certainement des bizarreries spécifiques au navigateur et le débogage est difficile. Le code suivant fonctionne dans la dernière version de Chrome, mais ne présumez pas qu'il fonctionnera dans Safari ou Opera.

Création d'un travailleur Web partagé

Pour créer un travailleur Web partagé, vous passez un nom de fichier JavaScript à une nouvelle instance de l'objet SharedWorker:

var worker = new SharedWorker("jsworker.js");

communiquer avec un travailleur Web partagé

Tous les scripts de votre page peuvent communiquer avec le travailleur Web partagé. Contrairement aux travailleurs Web dédiés, vous devez communiquer via un objet «port» et joindre un gestionnaire d'événements de message. De plus, vous devez appeler le début du port () Méthode avant d'utiliser le premier postMessage (): pagescript.js:

var worker = new SharedWorker("jsworker.js");

worker.port.addEventListener("message", function(e) {
	alert(e.data);
}, false);

worker.port.start();

// post a message to the shared web worker
worker.port.postMessage("Alyssa");

Lorsque le script Web Worker reçoit le premier message d'un script, il doit joindre un gestionnaire d'événements au port actif. Dans la plupart des cas, le gestionnaire exécutera sa propre méthode postMessage () pour renvoyer un message au code d'appel. Enfin, la méthode start () du port doit également être exécutée pour activer la messagerie: jsworker.js:

var connections = 0; // count active connections

self.addEventListener("connect", function (e) {

	var port = e.ports[0];
	connections++;

	port.addEventListener("message", function (e) {
		port.postMessage("Hello " + e.data + " (port #" + connections + ")");
	}, false);

	port.start();

}, false);

Comme leurs frères et sœurs dédiés, les travailleurs Web partagés peuvent:

• Chargez d'autres scripts avec importations ()
• attacher des gestionnaires d'erreur et
• Exécutez la méthode port.close () pour empêcher une communication supplémentaire sur un port spécifique.

Les travailleurs du Web partagés ne seront probablement pas une technologie viable pendant quelques années, mais ils soulèvent des opportunités passionnantes pour l'avenir du développement JavaScript. Espérons que les fournisseurs de navigateurs pourront fournir quelques outils de traçage et de débogage décents!

Questions fréquemment posées (FAQ) sur les travailleurs Web partagés JavaScript

Quelle est la principale différence entre les travailleurs partagés et les travailleurs du Web en JavaScript?

Les travailleurs partagés et les travailleurs du Web en JavaScript permettent tous deux le multi-threading, mais ils diffèrent dans leur portée et leur utilisation. Un travailleur Web est limité à la portée de l'onglet dans lequel il a été créé. Il ne peut pas communiquer avec d'autres onglets ou fenêtres. D'un autre côté, un travailleur partagé est accessible à partir de plusieurs scripts - même ceux qui sont exécutés sur différents onglets, fenêtres ou iframes, tant qu'ils sont dans le même domaine. Cela rend les travailleurs partagés idéaux pour les tâches qui nécessitent le partage de données et la communication entre les différents contextes de navigateur.

Comment créer un travailleur partagé en JavaScript?

La création d'un travailleur partagé en JavaScript implique l'instance de l'objet partagé. Voici un exemple simple:

var mysharedWorker = new SharedWorker ('worker.js');

Dans cet exemple, «Worker.js» est le script que le travailleur partagé exécutera. Il est important de noter que le script doit être sur le même domaine que le script créant le travailleur partagé en raison de restrictions de stratégie d'origine même.

Comment puis-je communiquer avec un travailleur partagé?

La communication avec un travailleur partagé est effectuée en utilisant la méthode postmesage et le gestionnaire d'événements OnMessage. La méthode de postMessage est utilisée pour envoyer des messages au travailleur partagé, tandis que le gestionnaire d'événements OnMessage est utilisé pour en recevoir des messages. Voici un exemple:

// Envoi d'un message au travailleur partagé
MysharedWorker.port.PostMessage ('Hello, Worker!');

// Recevoir un message du travailleur partagé
MysharedWorker.port.onMessage = Function (e) {
Console.Log ('' 'Message de Worker:' e.data);
};

Les travailleurs partagés peuvent-ils partager des données entre les différents onglets de navigateur?

Oui, l'une des principales caractéristiques des travailleurs partagés est leur capacité à partager des données entre différents onglets de navigateur, fenêtres ou iframes. Cela est possible car tous les scripts du même domaine ont accès à la même instance de travail partagée. Cela rend les travailleurs partagés idéaux pour les tâches qui nécessitent des mises à jour en temps réel sur plusieurs onglets ou fenêtres, tels que les applications d'édition collaboratives ou les jeux multi-tabs.

Les travailleurs partagés sont-ils pris en charge dans tous les navigateurs?

À partir de maintenant, les travailleurs partagés sont pris en charge dans la plupart des navigateurs modernes, y compris Google Chrome, Firefox et Safari. Cependant, ils ne sont pas pris en charge dans Internet Explorer. C'est toujours une bonne idée de vérifier les dernières informations de compatibilité du navigateur sur des sites Web comme puis-je utiliser ou MDN Web Docs.

Comment puis-je gérer les erreurs dans les travailleurs partagés?

Les travailleurs partagés ont un gestionnaire d'événements «OnError» qui peut être utilisé pour attraper et gérer toutes les erreurs qui se produisent lors de leur exécution. Voici un exemple:

mysharedworker.onerror = function (e) {
console.log ('Une erreur s'est produite:' e.Message);
};

Les travailleurs partagés peuvent-ils faire des demandes ajax?

Oui, les travailleurs partagés peuvent faire des demandes ajax. Ils ont accès à l'objet XMLHTTPRequest, qui peut être utilisé pour faire des demandes asynchrones à un serveur. Cela permet aux travailleurs partagés de récupérer des données à partir d'un serveur sans bloquer le thread principal, améliorant les performances de votre application Web.

Les travailleurs partagés peuvent-ils utiliser des lignes WebSockets?

Oui, les travailleurs partagés peuvent utiliser des lignes Web. Cela leur permet d'établir un canal de communication bidirectionnel avec un serveur, ce qui permet d'envoyer et de recevoir des données en temps réel sans avoir besoin de sondage.

Les travailleurs partagés peuvent-ils accéder au dom?

Non, les travailleurs partagés ne peuvent pas accéder directement au DOM. En effet, ils s'exécutent dans un thread séparé et n'ont pas accès à la même portée que le thread principal. Cependant, ils peuvent envoyer des messages au thread principal, qui peuvent ensuite mettre à jour le DOM en fonction de ces messages.

Comment puis-je résilier un travailleur partagé?

Les travailleurs partagés peuvent être résiliés en appelant la méthode «terminer» sur l'objet SharedWorker. Cependant, il est important de noter que cela mettra immédiatement fin au travailleur partagé, qu'il ait terminé sa tâche actuelle. Voici un exemple:

MysharedWorker.terniate ();

Cela mettra immédiatement finira le travailleur partagé. C'est généralement une bonne idée de mettre fin à un travailleur partagé que s'il n'est plus nécessaire ou si cela cause des problèmes de performance.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!