リアルタイム通信を徹底攻略！いろんなBaaSでチャットアプリ構築 – Milkcocoa

AWSやAzureを始めたとしたクラウドサービス全般を触っていく連載「クラウドサービス研究スタジオ」。この連載では、IaaS,PaaS,BaaS,SaaSなど幅広い形態のサービスを実際に使ってレポートしていきます！

そもそもBaaSって？
今回試すこと
Milkcocoaとは
Milkcocoaにアプリケーションを作成
HTMLに呼び出しを追加
JSファイルを作成
試してみる
まとめ

そもそもBaaSって？

こんにちは、エンジニアのちゃんとくです。テクニカルライターとしてdotstudioに参加しています。

一口にクラウドサービスといっても、IaaS、PaaS、BaaS、SaaSなどなど多様な形態がありますよね。今回はBaaSにフォーカスし、その中でもリアルタイム通信に特化したサービス特集をやってみたいと思います！

BaaSとはBackend as a Serviceの略で、その名の通りアプリケーションのバックエンド部分を担ってくれるサービスを指します。Webサーバ、DBなどの用意が不要で、ほとんどフロント側の実装だけでアプリケーションを構築できます。

BaaSの一例

BaaSによってモバイルアプリ向き、IoT向きなど特徴があり、今回は「リアルタイム通信」に特化したBaaSにフォーカスして紹介したいと思います。

全4回想定で下記のような構成で紹介します。

Milkcocoa
PubNub
Firebase
Node.js + Socket.io

4本目はあえてクラウドサービスを使わず、BaaSがないとどんな感じになるか試したいと思います！

今回試すこと

それぞれのBaaSを使ってリアルタイムなチャットアプリケーションを作ってみます。フロント側は下記のような共通のものを利用します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="title" content="タイトル" />
    <meta name="description" content="BaaSでリアルタイムチャット" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <title>タイトル</title>
</head>

<body>
    <div class="header">
        <h1 class="logo">ロゴs</h1>
    </div>

    <div class="container">
        <div class="postarea cf">

            <div class="postarea-text">
                <textarea name="" id="content" cols="30" rows="10" placeholder="Enterで投稿"></textarea>
            </div>

            <button id="post" class="postarea-button">投稿する</button>
        </div>
    </div>

    <div id="messages" class="content">
        <div id="dummy"></div>
    </div>
</body>
</html>

cssファイルはこちらを利用しています。なおMilkcocoa公式のサンプルを参考に作成しました。

Milkcocoaとは

1本目の今回はMilkcocoaを使ってリアルタイムチャットを実装していきます。

Milkcocoaはリアルタイムなデータの保存、更新、取得を担うサービスです。同時接続数の上限は20までで、Webからハードウェアまで多様なデバイス間で通信を実現できます。

開発者が日本人で、日本語のドキュメントや事例が多いのも特徴のひとつです。

Milkcocoaにアプリケーションを作成

まずはMilkcocoaにアプリケーションを作成していきましょう。Milkcocoaにログインし、「アプリの作成」から始めます。

作成したアプリのダッシュボードに移動すると「app_id」が表示されているので、これをコピーします。

作成した画面にすぐ使い方が書いてあるのがいい感じですね。

HTMLに呼び出しを追加

ベースになるHTMLファイルに、MilkcocoaのCDNの呼び出しを追加します。<title></title>タグの上あたりに追加しましょう。

    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="https://cdn.mlkcca.com/v0.6.0/milkcocoa.js"></script>
    <title>MILK CHAT</title>
</head>

</body>閉じタグの上あたりには、JavaScriptを記述するファイルを呼び出しておきましょう。

    <script src="./chat.js" type="text/javascript"></script>
</body>

JSファイルを作成

上記で指定したJSファイルを作成します。

$ touch chat.js

JSファイルは下記のようになります。app_idにはご自身のapp_idを指定してください。

'use strict';

$(() => {
  // (1)インスタンス生成
  const app_id = 'xxxxx';
  const milkcocoa = new MilkCocoa(`${app_id}.mlkcca.com`);
  // (2)データストアを作成
  const ds = milkcocoa.dataStore('message');

  // (3)データストアからメッセージ取得してレンダー
  ds.stream().sort('desc').next((err, datas) => {
    datas.forEach((data) => {
      renderMessage(data);
    });
  });

  // (4)pushイベントを監視
  ds.on('push', e => {
    renderMessage(e);
  });

  let last_message = 'dummy';

  const renderMessage = message => {
    let message_html = '<p class="post-text">' + escapeHTML(message.value.content) + '</p>';
    let date_html = '';
    if (message.value.date)
        date_html = '<p class="post-date">'+escapeHTML( new Date(message.value.date).toLocaleString())+'</p>';
    $("#"+last_message).before(`<div id="${message.id}" class="post">${message_html}${date_html}</div>`);
    last_message = message.id;
  }

  const post = () => {
    // (5)メッセージをpush
    let content = escapeHTML($("#content").val());
    if (content && content !== "") {
        ds.push({
            title: "タイトル",
            content: content,
            date: new Date().getTime()
        }, (e) => {
          $("#content").val("");
        });
    }
  }

  $('#post').click(() => {
    post();
  });

  $('#content').keydown((e) => {
    if (e.which == 13) {
      post();
      return false;
    }
  });
});

//インジェクション対策
const escapeHTML = (val) => {
    return $('<div>').text(val).html();
};

(1)の部分ではapp_idを使ってMilkcocoaのインスタンスを生成しています。TokenやKeyなど面倒な認証が少なくてよいですね。

(3)の部分では、既にポストされているメッセージをMilkcocoaのデータストアから取得してきて表示させています。自分でDBを用意する場合はちょっと大変な部分です。

(4)の部分はデータストアにpushされるメッセージをリアルタイムに監視しています。ds.on()の記述で監視できるのはかなりお手軽な感じです。

試してみる

実際にブラウザで試してみましょう。

それぞれ違う人が違うデバイスでページを見ていると想定してください。左の人がメッセージを入力して「投稿する」を押すと……。

リアルタイムにチャット部分に表示されます。（画面は更新していません）

Milkcocoaのダッシュボードからもpushされたデータを確認できます。

簡単ですね……。

HTML、CSS、JSファイルを静的サイトとしてホスティングすれば、このままリアルタイムなチャットとして利用できます。

まとめ

自分で実装すると考えるとちょっと辛くなってしまうような部分も、BaaSを利用すると一瞬でクリアすることができました。バックエンドの知識がない人でもドキュメントを追っていくだけで簡単に実装することができると思います。

次回以降は同様の機能を他のサービスで試します。それぞれのBaaSの特徴が見えてきてより楽しめると思います。

それではまた！

取材・執筆：dotstudio, inc. ちゃんとく

大学までは文系で法学を学んでいたが「モノを作れる人」に憧れて知識ゼロからWebエンジニアの道へ。転職し現在はIoT中心のエンジニア・テクニカルライターとして活動。Node.jsユーザグループ内の女性コミュニティ「Node Girls」を主催。Twitter: @tokutoku393 / dotstudio, inc.