読者です 読者をやめる 読者になる 読者になる

Tbpgr Blog

Ruby プログラマ tbpgr(てぃーびー) のブログ

Milkcocoaの疎通確認

f:id:tbpg:20160222224047j:plain

Milkcocoaの疎通確認をします。 ※激しく既出の内容です。個人メモとしての記事なので新たな何かを求めている方は 特にみるべきところはありません。

前提

  • npmはインストール済み
  • npmのversionは5.1.1とする

手順

Milkcocoa アプリ作成手順

下記ページを参考に登録をする。

mlkcca.com

ユーザー登録

登録メールのリンク先に訪問すると以下の画面が表示され、ユーザー登録が完了します。

f:id:tbpg:20160222224055p:plain

アプリケーション登録

新しいアプリを作るボタンでアプリを作成します。

f:id:tbpg:20160222224100p:plain

疎通確認

アプリケーション登録後、 app_id をコピーし、以降の your_id の部分に設定します。

送信側

※古代のJSであることをスルーしていただけると幸いです

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Milkcocoa Sample</title>
  <script src="https://cdn.mlkcca.com/v2.0.0/milkcocoa.js"></script>
  <script type="text/javascript">
function milkcocoaTest() {
  var milkcocoa = new MilkCocoa('your_id.mlkcca.com');
  var ds = milkcocoa.dataStore('users');
  ds.send({name : 'tanaka', age : 23});
}
  </script>
</head>
<body>
  <form>
    <input type="button" value="test" onclick="milkcocoaTest();">
  </form>
</body>
</html>

モニター側

コンソールの出力を確認

<script src="https://cdn.mlkcca.com/v2.0.0/milkcocoa.js"></script>
<script type="text/javascript">
var milkcocoa = new MilkCocoa('your_id.mlkcca.com');
var ds = milkcocoa.dataStore('users');
ds.on('send', function(sended) {
  console.log('sendされました!'+sended.value.name+'('+sended.value.age+')');
});
</script>

動作確認

  • 送信側

f:id:tbpg:20160222224108p:plain

  • モニター側

f:id:tbpg:20160222224115p:plain

外部資料