ガジェット通信 GetNews

見たことのないものを見に行こう

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

DATE:
  • ガジェット通信 GetNewsを≫

そもそも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を使ってリアルタイムなチャットアプリケーションを作ってみます。フロント側は下記のような共通のものを利用します。

タイトル

ロゴs

投稿する

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

Milkcocoaとは

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

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

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

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

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

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

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

HTMLに呼び出しを追加

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

MILK CHAT

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

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 = ‘

‘ + escapeHTML(message.value.content) + ”;
let date_html = ”;
if (message.value.date)
date_html = ‘

‘+escapeHTML( new Date(message.value.date).toLocaleString())+”;
$(“#”+last_message).before(`${message_html}${date_html}`);
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 $(”).text(val).html();
};

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

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

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

試してみる

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

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

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

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

簡単ですね……。

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

まとめ

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

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

それではまた!

●著者プロフィール

dotstudio ちゃんとく
大学までは文系で法学を学んでいたが「モノを作れる人」に憧れて知識ゼロからエンジニアに転身。本業ではPHPでWebサーバサイド開発を担う傍ら、テクニカルライターとしてdotstudioに参加している。Node.jsユーザグループ内の女性コミュニティ「Node Girls」を主催。趣味の電子工作では日本最大のIoTコミュニティ「IoTLT」で体当たり電子工作を発表中。
Twitter: @tokutoku393 / dotstudio, inc.

カテゴリー : デジタル・IT タグ :
CodeIQ MAGAZINEの記事一覧をみる ▶
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。