MilkcocoaでPCからスマホ操作を取得する #JavaScript

最初に

簡単にリアルタイムなデータのやり取りを行えるサービス「Milkcocoa」で、PCからスマホ操作を取得するサンプルを作ってみました。

サンプルの説明

以下のページをそれぞれスマホとPCから開いた状態でスマホをタッチするとPC側のページにポップアップで「Hello World!!」と表示されます。

スマホ側

スマホ側は、タッチ動作を検知してメッセージをデータストアに送信します。
※ソース中の【app_id】にはMilkcocoaで作ったapp_id、【データストア名】には任意のデータストア名を入れます。

sp.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>スマホ側</title>

  <!-- milkcocoa.jsの読み込み -->
  <script src="https://cdn.mlkcca.com/v2.0.0/milkcocoa.js"></script>
  <script>
    // milkcocoaオブジェクトを作成
    var milkcocoa = new MilkCocoa("【app_id】.mlkcca.com");
    // dataStoreオブジェクトを作成
    var datastore = milkcocoa.dataStore("【データストア名】");
  </script>

  <!-- 動作処理 -->
  <script>
    // タッチ動作を検知したら実行
    document.addEventListener("touchend", function(e) {
      alert("タッチしました")
      // データストアにデータを送信
      datastore.send({"message":"Hello World!!"}, function(err, sent){
        alert("送信完了");
      }, function(err) {
        alert("送信失敗");
      });
    });
  </script>
</head>
<body>
  <h1>スマホ側</h1>
</body>
</html>

PC側

PC側は、データストアにメッセージが受信されたことを検知してそのメッセージをポップアップで表示します。
※【app_id】、【データストア名】にはスマホ側で指定した文字列と同じものを入れます。

pc.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>PC側</title>

  <!-- milkcocoa.jsの読み込み -->
  <script src="https://cdn.mlkcca.com/v2.0.0/milkcocoa.js"></script>
  <script>
    // milkcocoaオブジェクトを作成
    var milkcocoa = new MilkCocoa("【app_id】.mlkcca.com");
    // dataStoreオブジェクトを作成
    var datastore = milkcocoa.dataStore("【データストア名】");
  </script>

  <!-- 動作処理 -->
  <script>
    // データストアへのデータ受信を監視、受信したら実行
    datastore.on("send", function(sent){
      // 受信したメッセージを表示
      alert(sent.value.message);
    });
  </script>
</head>
<body>
  <h1>PC側</h1>
</body>
</html>