複数ページ通信を実現する JavaScript の sharedWorker の詳細な例

こんなことがありました。今日はGitHubで遊んでいました。最初はログインせずにいくつかのページを閲覧していましたが、あるページでログインしました。他のページに切り替えると、次のプロンプトが表示されます。

それで、これはどのように行われるのでしょうか? 1 つの方法として考えられるのは、localStorage です。特定のページにログインするときに、localStorage のステータスを変更します。他のページを表示するときに、最新のステータスを読み取ってプロンプトを表示します。

// ログインページ localStorage.setItem('login', true);

// その他のページ document.addEventListener("visibilitychange", function() {
	localStorage.setItem('ログイン') === 'true'の場合{
		alert('ログインしています。ページを更新してください');
	}
}

しかし、GitHub ではこれが行われておらず、localStorage に関連するフィールドは見つかりませんでした。検索してみると、sharedWorker を使用して実装されていることがわかりました。それではシェアードワーカーを見てみましょう

sharedWorkerとは

名前が示すように、sharedWorker は同じオリジンのすべてのページで共有できるワーカーの一種です。 Worker API と同様に、js URL を渡すことで sharedWorker インスタンスを登録できます。

myWorker を新しい SharedWorker('worker.js') にします。

しかし、普通の労働者とは異なります。
1 同じ js URL では、sharedWorker が 1 つだけ作成されます。他のページが同じ URL を使用して sharedWorker を作成すると、作成されたワーカーが再利用され、このワーカーはそれらのページで共有されます。
2 sharedWorkerはポートを介してメッセージを送受信します

次に、ワーカーとページ間でメッセージがどのように送受信されるかを見てみましょう。

メッセージポート

2 つの js があり、1 つはページで実行されている page.js で、もう 1 つはワーカーで実行されている worker.js であるとします。次に、page.js に sharedWorker を登録する必要があります。コードは次のようになります。

// ページ.js
myWorker を新しい SharedWorker('worker.js') にします。
// ページはワーカー ポートを通じてメッセージを送信します。myWorker.port.postMessage('hum');
// ページはワーカー ポートを介してメッセージを受信します。myWorker.port.onmessage = (e) => console.log(e.data);

// ワーカー.js
onconnect = 関数(e) {
	ポートを定数で指定します。
	port.postMessage('こんにちは');
	ポート.onmessage = (e) => {
		コンソールログ(e.data);
	}
}

sharedWorker のデバッグ

上記の例では、ワーカーで console.log を使用してページからメッセージを出力しましたが、出力されたログはどこで確認できるでしょうか?ブラウザのアドレスバーに「chrome://inspect」と入力すると、
をクリックし、サイドバーで共有ワーカーを選択すると、ブラウザで現在実行中のすべてのワーカーが表示されます。 「検査」をクリックすると開発者ツールが開き、出力ログが表示されます。

ここで、ワーカー名が untitled であることがわかります。これは、sharedworker コンストラクターが 2 番目のパラメーターを名前として渡すこともサポートしているためです。

myWorker を新しい SharedWorker('worker.js', '素晴らしいワーカー') にします。

複数のページにメッセージを投稿する

記事の冒頭の例に戻りましょう。ページとワーカー間の通信を実装しました。では、ワーカーが複数のページにメッセージを送信できるようにするにはどうすればよいでしょうか。 1 つのアイデアは、ポートをポート プールとしてキャッシュすることです。これにより、すべてのページにメッセージをブロードキャストする必要がある場合に、ポートをトラバースしてメッセージを送信できます。

// ワーカー js
ポートプール
onconnect = 関数(e) {
	ポートを定数で指定します。
	// 接続時に portPool にポートを追加します portPool.push(port);
	port.postMessage('こんにちは');
	ポート.onmessage = (e) => {
		コンソールログ(e.data);
	}
}

関数ボードキャスト(メッセージ) {
	portPool.forEach(ポート => {
		port.portMessage(ポート);
	})
}

このようにして、基本的に複数のページにメッセージをブロードキャストする機能を実現しました。

無効なポートをクリアする

上記の実装には問題があります。ページが閉じられた後、workerPool 内のポートが自動的にクリアされず、メモリが無駄になります。ページが閉じられる前に、ページが閉じられることを共有ワーカーに通知し、ワーカーに無効な messagePort を portPool から削除させることができます。

// ページ window.onbeforeunload = () => {
  myWorker.port.postMessage('閉鎖予定');
};

// ワーカー.js
ポートプール
onconnect = 関数(e) {
  var ポート = e.ports[0];
  ポートプールをプッシュします。
  port.onmessage = 関数(e) {
    コンソールログ(e);
    if (e.data === '閉鎖予定') {
      const インデックス = ports.findIndex(p => p === port);
      ポートプール.splice(インデックス、1);
    }
    var workerResult = '結果: ' + (e.data[0] * e.data[1]);
    ポート。
  }
}

関数ボードキャスト(メッセージ) {
	portPool.forEach(ポート => {
		port.portMessage(ポート);
	})
}

このようにして、複数ページのブロードキャスト用のシンプルな sharedWorker を実装しました。これを使って時間をブロードキャストすることができます:

setInterval(() => boardcast(Date.now()), 1000);

参照する

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

JavaScript で sharedWorker を使用してマルチページ通信を実現する方法については、これで終わりです。js sharedWorker マルチページ通信に関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。