Posted at

milkcocoaβ版を使ったブラウザ間通信+YouTubeプレイヤーとリモコンを作る

More than 3 years have passed since last update.


5分でわかるチュートリアルを行ってみる

ここで引っかかるかたはいないと思いますが、

自分はローカルのphpビルトインサーバ使ってlocalhost:1234とかでアクセスしてたら通信できない。

ポートがそのままmilkcocoaへの通信にも使われているのでできていなかったようで。。

無事出来ました。


何度か通信して管理画面をみると

自分のアプリ管理画面→データストアにろぐが残ります。

内容は、


  • データストア名

  • ID(ブラウザごと)

  • message内容

jsonで読込、書き出しが可能です。

管理画面ではその他にも利用できるようですがとりあえずドキュメントに進む。


Document抜粋


MilkCocoa(hosturl)

データストアへのホスト指定。

このオブジェクトが通信等を管理。ここからスタート!


dataStore(path)

pathで指定したデータストアオブジェクトを返す。


addAccount(email,password,options,callback)

訪問者をアカウント管理する場合のアカウント作成で使用する。


その他アカウント関係

login(email, password, callback)

logout(callback)

getCurrentUser(callback)


DataStore主なメソッド


push(object, callback)

データストアにデータをプッシュする。


set(id, data)

データストアのデータを更新/追加する。


remove(id)

データストアからデータを削除する。


send(id,data)

データストアにデータを保存せずに送信する。


on(event, callback)

データストアにイベントを登録する。eventにpush,sendなどを登録することで他クライアント含めた指定イベントを監視する。


child(path)

データストアの階層をたどるためのメソッド。


query()

データストアへの取得条件を指定してデータの取得を行うオブジェクト。


ブラウザ間を連動し片方をリモコン、片方をディスプレイとして動作するモノを作ってみた

とにかく簡単に実装しました。

操作の種類分だけDataStoreを作成し、それをリモコンがPushしてスクリーンが監視しているだけです。

またスクリーンの操作もjqueryのtriggerでclickイベントを発火させているだけなので

あっという間に出来ました。

こんな簡単な実装でもちゃんとリアルタイムに動作してくれます。

nobu222/milkcocoa.sample


リモコン画面

Milkcocoa Remocon App.png


スクリーン画面

Milkcocoa Remocon App (1).png