Detailliertes Beispiel für sharedWorker in JavaScript zur Realisierung einer mehrseitigen Kommunikation

Folgendes ist passiert. Heute habe ich mit GitHub gespielt. Ich habe zuerst einige Seiten durchsucht, ohne mich anzumelden, und mich dann auf einer bestimmten Seite angemeldet. Wenn Sie zu anderen Seiten wechseln, wird die folgende Eingabeaufforderung angezeigt:

Wie wird das also gemacht? Eine Möglichkeit, die wir uns vorstellen können, ist localStorage. Wenn Sie sich bei einer bestimmten Seite anmelden, ändern Sie den Status von localStorage. Wenn andere Seiten angezeigt werden, lesen Sie den neuesten Status und zeigen Sie dann eine Eingabeaufforderung an:

// Anmeldeseite localStorage.setItem('login', true);

// Andere Seiten document.addEventListener("visibilitychange", function() {
	wenn (localStorage.setItem('login') === 'true') {
		alert('Sie sind angemeldet, bitte aktualisieren Sie die Seite');
	}
}

GitHub hat dies jedoch nicht getan und es konnten keine relevanten Felder in localStorage gefunden werden. Nach einiger Suche fand ich heraus, dass sie es mit sharedWorker implementiert haben. Dann schauen wir uns sharedworker an

Was ist sharedWorker

Wie der Name schon sagt, ist sharedWorker ein Workertyp, der von allen Seiten mit demselben Ursprung gemeinsam genutzt werden kann. Genau wie bei der Worker-API können Sie eine sharedWorker-Instanz registrieren, indem Sie die js-URL übergeben:

let meinWorker = neuer SharedWorker('worker.js');

Aber es ist anders als bei normalen Arbeitern:
1 Dieselbe JS-URL erstellt nur einen SharedWorker. Wenn andere Seiten dieselbe URL verwenden, um SharedWorker zu erstellen, wird der erstellte Worker wiederverwendet und von diesen Seiten gemeinsam genutzt.
2 sharedWorker sendet und empfängt Nachrichten über den Port

Sehen wir uns als Nächstes an, wie Nachrichten zwischen dem Worker und der Seite gesendet und empfangen werden.

NachrichtenPort

Angenommen, wir haben zwei JS, eines ist page.js, das auf der Seite ausgeführt wird, und das andere ist worker.js, das im Worker ausgeführt wird. Dann müssen wir einen sharedWorker in page.js registrieren, der Code lautet wie folgt:

// Seite.js
let meinWorker = neuer SharedWorker('worker.js');
// Seite sendet eine Nachricht über den Worker-Port myWorker.port.postMessage('hum');
// Seite empfängt Nachrichten über den Worker-Port myWorker.port.onmessage = (e) => console.log(e.data);

// arbeiter.js
onconnect = Funktion(e) {
	const port = e.ports[0];
	port.postMessage('Hey');
	port.onmessage = (e) => {
		Konsole.log(e.data);
	}
}

Debuggen von sharedWorker

Im obigen Beispiel haben wir console.log im Worker verwendet, um die Nachricht von der Seite auszudrucken. Wo können wir also das ausgedruckte Protokoll sehen? Wir können `chrome://inspect in die Adressleiste des Browsers eingeben
, wählen Sie dann in der Seitenleiste „Shared Worker“ aus. Anschließend werden alle aktuell im Browser ausgeführten Worker angezeigt. Wenn Sie auf „Untersuchen“ klicken, wird ein Entwicklertool geöffnet und Sie können dann das Ausgabeprotokoll sehen.

Hier sehen wir, dass unser Worker-Name unbenannt ist. Das liegt daran, dass der Sharedworker-Konstruktor auch die Übergabe eines zweiten Parameters als Namen unterstützt:

let myWorker = neuer SharedWorker('worker.js', 'toller Arbeiter');

Posten Sie Nachrichten auf mehreren Seiten

Kehren wir zum Beispiel am Anfang des Artikels zurück. Wir haben die Kommunikation zwischen der Seite und dem Worker implementiert. Wie können wir also dem Worker ermöglichen, Nachrichten an mehrere Seiten zu senden? Eine Idee besteht darin, den Port als Portpool zwischenzuspeichern, sodass wir, wenn wir eine Nachricht an alle Seiten senden müssen, den Port durchlaufen und die Nachricht senden können:

// Arbeiter js
const portPool = [];
onconnect = Funktion(e) {
	const port = e.ports[0];
	// Beim Verbinden Port zum PortPool hinzufügen portPool.push(port);
	port.postMessage('Hey');
	port.onmessage = (e) => {
		Konsole.log(e.data);
	}
}

Funktion Boardcast(Nachricht) {
	portPool.fürJeden(port => {
		port.portMessage(port);
	})
}

Auf diese Weise haben wir grundsätzlich die Funktion zum Senden von Nachrichten an mehrere Seiten realisiert.

Löschen ungültiger Ports

Bei der obigen Implementierung gibt es ein Problem. Nach dem Schließen der Seite wird der Port im WorkerPool nicht automatisch gelöscht, was zu einer Speicherverschwendung führt. Wir können den gemeinsam genutzten Worker benachrichtigen, dass die Seite geschlossen wird, bevor die Seite geschlossen wird, und den Worker dann den ungültigen MessagePort aus dem PortPool entfernen lassen.

// Seite window.onbeforeunload = () => {
  myWorker.port.postMessage('Wird geschlossen');
};

// arbeiter.js
const portPool = [];
onconnect = Funktion(e) {
  var port = e.ports[0];
  portPool.push(port);
  port.onmessage = Funktion(e) {
    konsole.log(e);
    if (e.data === 'ZU GESCHLOSSEN') {
      const index = ports.findIndex(p => p === port);
      portPool.splice(index, 1);
    }
    var workerResult = 'Ergebnis: ' + (e.data[0] * e.data[1]);
    port.postMessage(workerResult);
  }
}

Funktion Boardcast (Nachricht) {
	portPool.fürJeden(port => {
		port.portMessage(port);
	})
}

Auf diese Weise haben wir einen einfachen SharedWorker für die Übertragung mehrerer Seiten implementiert. Damit können wir die Uhrzeit übermitteln:

setInterval(() => boardcast(Datum.jetzt()), 1000);

siehe

https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker/SharedWorker
https://github.com/mdn/simple-shared-worker

Dies ist das Ende dieses Artikels über sharedWorker in JavaScript zur Realisierung einer mehrseitigen Kommunikation. Weitere verwandte Inhalte zu js sharedWorker zur mehrseitigen Kommunikation finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!