MilkcocoaをHeroku NodeJSで動かすメモです。

Milkcocoaとは

Milkcocoaを利用すると、自前でサーバを準備せずに弊社が提供するクライアントSDKを介してデータの保存、更新、取得またPub/Sub通信を行うことが出来ます。通信はTLS暗号化され、保存されたデータは自動的にレプリケーションされます。クライアントからの通信はErlangサーバにて処理され、多くのトランザクションに対応することが出来ます。

とあるように、リアルタイム通信と、特にデータまわりをしっかりサポートしてくれるサービスです。最近、MQTTクライアントをサポートしたということもあり、注目しています。

もちろん、HerokuでCloudMQTTを立ち上げ、PostgresSQLなどでデータ保存も整えても出来なくはないですが時間はかかります。

プロトタイプを作ってみたかったり、小さなサービスを作ってみたい、そういった素早くアプローチしたいときに、選択肢の一つとして覚えておくと楽しそうということで、早速やってみます。

Milkcocoaチュートリアル記事

実装の雰囲気は、本家のサンプル集や

Case Studies & App Showcase | Milkcocoa

こちらの記事が分かりやすいです。

インタラクティブコンテンツを作ろう！milkcocoaで5分のチャットアプリ制作 | 株式会社LIG

Milkcocoa Node.js SDKについての参考記事

ということで、フロント側の実装というより、Node.jsサーバー内でどうするかということが今回の本題です。

Milkcocoa Node.js SDKを使います。

しかし、当然といえば当然なのですが、本家のJavascriptドキュメントでは、フロントで動くJavascriptとバックエンドで動くNode.jsとしてのJavascriptの区別がつきづらい。

そのため、以下の記事で実践されていたものを、参考にしました。

第4回　圧倒的にリアルタイム通信が楽しくなる！　Milkcocoaをサーバーサイドで使ってみよう！　～Milkcocoa Node.js SDKの紹介～：MilkcocoaでBaaSを体験！～バックエンドの仕組みと使い方～｜gihyo.jp … 技術評論社

やりたいこと

小さいながら双方向の確認するのが今回のやりたいことです。expressで実装したHerokuサーバーで/pushというURLを叩くとMilkcocoaへデータストアに新しいデータを追加します。同時にonでデータストアのpushイベントを監視しておいてデータ追加時のイベントの動きも把握します。

実装してみる

Herokuの下準備

Getting Started with Node.js on Heroku | Heroku Dev Center

を使って下準備をする。

npmインストール

ひと通りインストールします。

npm install --save body-parser request milkcocoa socket.io

今後の開発もあるので、主だったものを入れておきます。

MilkCocoa側でアプリIDを把握しておく

MilkCocoa側で今回使いたいアプリIDを把握しておきます。

実際のコード

サーバーのメインはindex.jsとしています。

今回のサンプルはアプリIDをtestidとします。
- testid.mlkcca.comの部分は先ほど把握しておいた今回使いたいアプリIDに合わせましょう
Milkcocoaの呼び出しはパスの関係性を通すため以下のようにしています。
- var MilkCocoa = require(“./node_modules/milkcocoa/index.js”);
/pushを叩くとMilkcocoaへデータストアに新しいデータを追加します
- JavaScript API Reference | Milkcocoa push()
onでデータストアのpushイベントを監視します
* JavaScript API Reference | Milkcocoa

実際のコードです。


var express = require('express');

// milkcocoa /////////////////////////////////
var MilkCocoa = require("./node_modules/milkcocoa/index.js");
// testid.mlkcca.comの部分は先ほど把握しておいた今回使いたいアプリIDに合わせましょう
var milkcocoa = new MilkCocoa("testid.mlkcca.com");
// dataStore作成
var sampleDataStore = milkcocoa.dataStore("sample");
// onでデータストアのpushイベントを監視します
sampleDataStore.on("push", function(datum) {
  console.log(datum);
});
//////////////////////////////////////////////

var app = express();

app.set('port', (process.env.PORT || 5000));
app.use(express.static(__dirname + '/public'));

app.get('/', function(request, response) {
  response.send('Hello World!');
});

// /pushを叩くとMilkcocoaへデータストアに新しいデータを追加します
app.get('/push', function(request, response) {
  response.send('ds.push');

  sampleDataStore.push({ text : "送信テスト"});
});

app.listen(app.get('port'), function() {
  console.log('Node app is running on port', app.get('port'));
});

動かしてみる

実際に動かしてみましょう。

node index.js

で起動して、

を実行すると、

// /pushを叩くとMilkcocoaへデータストアに新しいデータを追加します
app.get('/push', function(request, response) {
  response.send('ds.push');
  ds.push({ text : "送信テスト"});
});

が発動しMilkcocoa側に送信されるので、

// onでデータストアのpushイベントを監視します
sampleDataStore.on("push", function(datum) {
  console.log(datum);
});

で通知がキャッチされます。

サーバー側のコンソールで

とデータが表示されます。

データストアにもデータが貯めています

// dataStore作成
var sampleDataStore = milkcocoa.dataStore("sample");

で書かれているようにデータストア名sampleで今回はデータを貯めています。

Milkcocoaの管理画面で該当アプリのデータストアを見てみましょう。

メニューからデータストアをクリックして、

該当のデータストア名を選び、

「リスト表示（更新）」を押すと記録されているデータが表示されます。

おわりに

ビジュアル側やデバイス側などのプロトタイプを作る上で、データ記録やリアルタイムといった難しめのバックエンドをまるっとお任せできるのはとても安心します。

そして、ある程度出来上がってきたところで、AWSや他のクラウドで本格的にスケールできるようにするにしても、はじめから良い仕組みを使っておくと、その後の流れも良い方向に作りやすいと考えています。

それでは、よき Milkcocoa & NodeJS & Heroku Lifeを！