MilkcocoaでBaaSを体験!~バックエンドの仕組みと使い方~

第4回 圧倒的にリアルタイム通信が楽しくなる! Milkcocoaをサーバーサイドで使ってみよう! ~Milkcocoa Node.js SDKの紹介~

この記事を読むのに必要な時間:およそ 3.5 分

サンプルの解説

sample.jsの中身を読んでいきましょう。

sample.js

var MilkCocoa = require("./index.js");

var milkcocoa = new MilkCocoa("https://io-ti2dak0ql.mlkcca.com");
var ds = milkcocoa.dataStore("nodejs");
ds.on("push", function(r) {
    console.log(r);
});
ds.push({ text : "あああいうえお"});
  • 1行目:SDK(index.js)の読み込みをしています。
  • 3行目:milkcocoaとのコネクションを確立します(通常はapp IDを作成して使います⁠⁠。
  • 4行目:nodejsという名前のデータストアにアクセスします。dsという変数でデータストアオブジェクトを作成し,データを読み書きする準備をします。
  • 5~7行目:on関数で,イベントの監視をします。この場合dsに対してpushイベントを受け取った場合に受け取ったデータをconsole.log()で表示します。
  • 8行目:dsに対してpushメソッドを実行します。

8行目のpushメソッドを実行した時点でpushイベントが発生するので,5~7行目のon関数pushイベントを監視している部分が発火してコンソールに表示されます。

プログラムの流れがわかったところで,リアルタイム通信をしている様子を確認しましょう。これを確認しないとMilkcocoaを使う意味合いが半減しますね(笑⁠⁠。

リアルタイム通信が出来ている様子を見るために,別タブなどでもう1つNode.jsプロセスを立ち上げてみましょう。

仮に,画面下がAプロセス,画面上がBプロセスとします。

図9 リアルタイム通信の様子(サムネイルでは表示が崩れます。ご了承ください。)

図9 リアルタイム通信の様子

Aプロセスを立ち上げた状態でBプロセスを立ち上げると,Aプロセス側のon(push)も発火してAとBのコンソールに同時に表示されるのがわかると思います。

これで別々の環境でもリアルタイムに通信が行われているのが体験出来ると思います。

socket.io-clientについての補足

socket.io-clientは本稿執筆現在(2015年3月16日時点)はv1.3.5が最新となってますが,1.1系以上だと日本語文字列が文字化けしてしまう現象が確認されていますので注意してください。1.0系の最新の1.0.6を使うことをお勧めします。

以下のキャプチャ画面を見るとわかるようにあああいうえおという文字列がBBBDFHJとなっています。

図10 通常時(1.0系利用時)

図10 通常時(1.0系利用時)

図11 文字化け時(1.1系以上を利用時)

図11 文字化け時(1.1系以上を利用時)

まとめ

いかがでしたでしょうか? 今回はMilkcocoa Node.js SDKの紹介と,サーバサイドでのMilkcocoaの利用シーンの紹介,実際にMilkcocoa Node.js SDKの基本的な使い方を紹介しました。Milkcocoa Node.js SDKがとても簡単に利用できて,様々な場面で利用出来るという可能性を感じて頂けたのではないでしょうか?

次回はMilkcocoa Node.js SDKを使って実際に簡単なアプリケーションを作成し,作成方法を紹介してみようと思います。

興味を持たれた方はぜひSDKを使って何かモノを作ってみてください。それでは。

著者プロフィール

菅原のびすけ(すがわらのびすけ)

株式会社LIG エンジニア。1989年生まれ。岩手県立大学在籍時にITベンチャー企業の役員を務める。

同大学院を卒業後,株式会社LIGにWebエンジニアとして入社し,Web制作に携わる。

最近は特にIoT領域,インタラクティブな企画実装などに従事している。

マッシュアップアワードを始めとしたハッカソン等で入賞歴あり。

家賃0円クリエイターズシェアハウス第1期生。ジーズアカデミー第1期メンター。

LIGinc,HTML5Experts.jp,さくらのナレッジ,gihyo.jpなどでも執筆・寄稿をしている。

Milkcocoaエバンジェリスト,特技はわんこそば,趣味は雪合戦。

Twitter:@n0bisuke

LIGincプロフィール:http://liginc.co.jp/member/member_detail?user=nobisuke