今回の内容

今回の記事の内容は、2年以上前に以下の記事で紹介していた内容の続きです（ずいぶん時間がたってしまいましたが...）。

●ブラウザのタブ間でのリアルタイム通信を行う 4つの方法【概要編】 #JavaScript - Qiita
　https://qiita.com/youtoy/items/b202209d0eb36bad830f

上記は、ブラウザのタブ間でリアルタイムに通信を行う場合、以下の 4つの方法があるという情報などを見かけ、そのソースコードがどんな感じになるか、概要を書いていたものでした。

Local Storage Events
Broadcast Channel API
Service Worker Post Message
Window Post Message

その後は、上記を試す機会がなかったのですが、以下の内容に関するテスト実装をやりたくなり（とりあえずは　MQTT を使った部分があり、それを置きかえたかった）、上記の内容を久しぶりに発掘してきました。

●「スクリーン上でブラウザのウィンドウを動かしたら描画に影響」「2つのブラウザのウィンドウの一方を動かすと他方に影響」という方向の実装作品の技術メモ #JavaScript - Qiita
　https://qiita.com/youtoy/items/945edb13856417c8c901

Broadcast Channel API

そして、まずは「Broadcast Channel API」を試してみることにしました。

MDN では、以下のページで書かれているものです。

●ブロードキャストチャンネル API - Web API | MDN
　https://developer.mozilla.org/ja/docs/Web/API/Broadcast_Channel_API

p5.js で簡単な実装を試す

この Broadcast Channel API に関し、p5.js　を使った簡易な動作確認をやってみます。その際、それを試す環境として、Web上に用意されている「p5.js Web Editor」を使ってみます。

試した内容

それでは、試した内容について概要を以下に書きます。

動作している様子

実際に、こんな感じで動作確認ができました。

以下では、「mouseMoved() が発生した時に mouseX・mouseY で円を描画しつつ、それらの 2つの座標の値を Broadcast Channel API で送信／ Broadcast Channel API で受信した 2つの座標を使って円を描画」ということをやっています。

ソースコード

上で紹介した内容の、送信側と受信側のソースコードを掲載してみます。

以下は送信側です。
mouseMoved() が発生した時に mouseX・mouseY を channel.postMessage() で送っています。それと、setup() のところで、ブロードキャストチャンネルへの接続のための new BroadcastChannel() を入れています。

必要な実装は、非常にシンプルです。

送信側

let channel;

function setup() {
  createCanvas(400, 400);
  background(220);

  channel = new BroadcastChannel("mouse_channel");
}

function mouseMoved() {
  if (channel) {
    const x = mouseX, y = mouseY
    channel.postMessage({ x,y });
    circle(x, y, 30)
  }
}

以下は受信側です。
setup() のところで、ブロードキャストチャンネルへの接続のための new BroadcastChannel() を入れています。また、その後に channel.onmessage で、データを受信した時のイベントをトリガーに実行される処理を書いています。

必要な実装は、非常にシンプルです。

受信側

let channel;

function setup() {
  createCanvas(400, 400);
  background(90);
  noStroke();
  fill(100, 150, 200);

  const channel = new BroadcastChannel("mouse_channel");

  // データを受信したときの処理
  channel.onmessage = (e) => {
    const { x, y } = e.data;

    background(90);
    text(`x: ${x}`, 10, 20);
    text(`y: ${y}`, 10, 40);

    circle(x, y, 100);
  };
}

おわりに

ブラウザのタブ間でのリアルタイム通信を実現する方法に関して、今回「Broadcast Channel API」を試しました。その際に、オンラインの環境の p5.js Web　Editor を使って p5.js と組み合わせる形で試しました。

今回試したもの以外にも、冒頭に書いた方法が複数あるので、それらも試していければと思います。