ブラウザの複数ページ通信ブロードキャストチャネルと SharedWorker

日々の開発では、音楽 Web サイトにアクセスし、特定の音楽を聴くために新しいページを開いてから、元のページに戻るなど、特定のページで特定の操作を実行し、同時に別のページに操作する必要があるという要件に遭遇することがあります。元のページで他の曲に切り替えると、音楽再生ページも同期して対応する曲に切り替わる必要があります。

ブロードキャストチャンネルAPI

ブロードキャストチャネル API を使用すると、ブラウザの異なるタブ間でのメッセージ通信が可能になります。ブロードキャストチャネル API を使用すると、チャネル (チャネル) を作成し、さまざまなタブでメッセージを送受信できます。

メッセージを送ります

const channel = new BroadcastChannel('myChannel'); 
channel.postMessage({
    
     message: 'Hello' })

メッセージを受信する

const channel = new BroadcastChannel('myChannel');
channel.addEventListener('message', function(event) {
    
    
    const receivedData = event.data;
    // 处理接收到的数据
    console.log(receivedData);
});

近い接続

channel.close();

シェアードワーカー

SharedWorker は、異なるタブ間で実行環境を共有し、複数のタブ間の通信を可能にするバックグラウンドスレッドです。さまざまなタブが SharedWorker を通じてメッセージを送受信できます。同じ URL のワーカー js はsharedWorkerのみを作成し、他のページは同じURLを使用してsharedWorkerを作成し、作成したワーカーは再利用されます。このワーカーはそれらのページで共有されます。

// worker.js
var clients = [];
onconnect = function(e) {
    
    
  var port = e.ports[0];
  clients.push(port);
  port.addEventListener("message", function(e) {
    
    
    for (var i = 0; i < clients.length; i++) {
    
    
      var eElement = clients[i];
      eElement.postMessage(e.data);
    }
  });
  port.start();
};

メッセージを送ります

const worker = new SharedWorker('worker.js'); 
worker.port.postMessage({
    
     message: 'Hello' });

メッセージを受信する

const worker = new SharedWorker('worker.js');
worker.port.addEventListener('message', function(event) {
    
    
    const receivedData = event.data;
    // 处理接收到的数据
    console.log(receivedData);
});

クロスドメインの場合、WebSocket、サーバー側のメッセージプッシュなど、他の技術的手段を使用する必要がある場合があることに注意してください。

BroadcastChannel と SharedWorker の違い:

通信範囲: BroadcastChannel は同じブラウザ内の異なるタブ間でメッセージを通信できますが、SharedWorker は異なるタブ間で実行環境を共有でき、異なるウィンドウまたはブラウザで通信することもできます。
データブロードキャスト: BroadcastChannel は同じブラウザ内のタブ間でのみメッセージをブロードキャストできますが、SharedWorker は同じ SharedWorker に接続されているすべてのウィンドウまたはタブにメッセージを配信できます。
共有データ: SharedWorker を使用すると、接続された各タブ間でデータを共有できます。タブは SharedWorker を通じて同じ状態、変数、またはオブジェクトを共有でき、これを使用して状態を共有したり、共有機能を実装したりできます。BroadcastChannel は単純なメッセージを送信するためにのみ使用され、データを共有する機能はありません。
ライフサイクル: SharedWorker はバックグラウンドで実行されるスレッドで、接続されているタブがない場合でも存在し続けますが、BroadcastChannel は接続されているタブがある場合にのみ有効です。

したがって、BroadcastChannel は、同じブラウザの異なるタブ間の単純なメッセージ通信に適していますが、SharedWorker は状態、データ、機能の共有に適しており、より複雑なクロスタブまたはクロスウィンドウの通信要件を実現できます。