Facebook Twitter Google Maps RSS
Home Webアプリ Chromecast 複数のクライアントとやり取りする
formats

Chromecast 複数のクライアントとやり取りする

こんにちは。陽気なシステム屋のうっちーです。

これまで作成してきたアプリは、1対1、かつ、SenderからReceiver(すなわち、Chromecast)へ一方的にメッセージ、指示を送るだけでした。

Chromecastは複数のSenderからメッセージを受け取り、また、メッセージを受け取ったことをSender側へ通知することができます。

今回は、CastHelloTextサンプルを改造して複数クライアントへ対応させていきましょう。

 

まずはReceiverから。以前window.messageBus.onMessage のイベントリスナーで event.data を参照すれば、Senderから送られてきた文字列を受け取ることができるとご説明しました。

この時、event.senderId を参照すると、送信元を識別できる識別子を取得できます。

また、window.messageBus.send 関数にsenderIdと文字列を渡すと、指定されたSenderへ通知を行うことができます。

 

window.messageBus.onMessage のイベントハンドラを以下のように書き換えてみましょう。

 

            window.messageBus.onMessage = function (event) {

                var obj = new Object();
                obj.senderId = event.senderId;
                obj.data = event.data;
                obj.event = 'joined';

                arr[event.senderId] = obj;
                displayText(JSON.stringify(obj));

                for (key1 in arr) {
                    for (key in arr) {
                        window.messageBus.send(key1, JSON.stringify(arr[key]));
                    }
                }
            }
 

 

次にSender側ですが、window.messageBus.send 関数が送ってきたメッセージを受け取るコードを書かなければなりません。
session.addMessageListener(namespace, receiverMessage); されている、receiverMessage 関数を以下のように書き換えましょう。

 

    function receiverMessage(namespace, message) {
<em></em>
          <em>//appendMessage("receiverMessage: " + namespace + ", " + message);</em>
        var message = JSON.parse(message);
        appendMessage("senderId: " + message.senderId);
        appendMessage("data: " + message.data);
        appendMessage("event: " + message.event);
    };
 

 

あとは、デバッグしやすいようにHTMLを少し編集します。 それでは実行してみましょう。
まずは、1台目の端末より空メッセージを送信してセッションを確立します。


2台目の端末からも同様に空メッセージを送信してセッションを確立します。
1台目の端末へ戻り、メッセージ文字列を入力して送信します。


Chromecastへメッセージが送信され、また、Chromecastからメッセージを受信しています。

2台目の端末へ移り、異なる文字列を送信します。



Chromecastから1台目が送信した情報も合わせて受信しました。
1台目側の画面も確認してみましょう。

同様に、1台目が送信した情報と2台目が送信した情報の両方を受信しています。

ここまでわかれば、対戦式のゲームなんかも実装できそうですね。
と言いますか、この改造内容自体が githubで公開されている、TicTacToeサンプルから抜き出したものです。

TicTacToeサンプルを実行すると、以下のようになります。

ここまで、Chromecastでどのようなアプリを作ることができるか検証してきました。
あとはアイデア次第です。世界を変えるアプリを作りましょう!

Tags:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*