⚡
BroadcastChannel を試しに使う話
経緯・要件
以前作成したWebアプリに シャドバエボルブ一人回しツール というものがある。
渡した画像を利用して販売前などに模擬的に動きを確認することを意図したものだ。
このアプリには欠点があり、画面共有をした際に手札の中身など非公開領域の情報も見えてしまうことだ。
設計時に考慮していなかったから当然なのだが、画面共有用のウインドウを用意して操作側と連動して表示させたい情報のみ表示できるといいなと漠然と思っていた。
手段の比較
調べたものと知っているものの中で別ウインドウと連動させることを実現できそうな技術でBroadcastChannelを除いたものは下記
- WebSocket
- わざわざこの用途ためだけにサーバーを建てたくないので不採用
- LocalStorage
- 最終的にデータ型を保存することになりそうで、Stringのみの変更を変換しながら管理するのが気に入らず不採用
これらの理由から BroadcastChannel を採用した
実装例
コンポーネントマウント時に BroadcastChannel を作成して、定義した postMessage でBroadcastChannel を通じてメッセージを送信する。
この postMessage をinput onChange で渡せばいい感じに処理できる。
動作例
展望
これの発展でゲーム状態を示す Class を渡して共通表示用のwindowと操作用のwindowを連動させる機能が実現できると思われる。
次回はこの機能を作成したい。
参考
Discussion