この記事は、「完走賞ゲットのため小ネタ 25記事を投稿しようとチャレンジ v2 Advent Calendar 2023」の 3日目の記事です。
今回の内容
今回の記事の内容は、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 と組み合わせる形で試しました。
今回試したもの以外にも、冒頭に書いた方法が複数あるので、それらも試していければと思います。