WebEngine

だらだらと綴る技術系メモ

トップ > javaScript > Milkcocoaを使って簡易チャットを制作

Milkcocoaを使って簡易チャットを制作

javaScript Milkcocoa

前提

Milkcocoaってなに？

Uhuru社から提供されているBaaS（Backend as a Service）です。

Baasというのは、「自分でサーバを用意して、データベースを入れて〜」というような一連の環境構築をする必要がなく、さらに、ある程度のサーバサイドの機能（データ管理、プッシュ通知など）を用意してくれているので、フロントエンドの開発だけに集中できるサービスです。

立ち位置としては、SaaSとPaaSの中間くらいです。

メールアドレスとパスワードの登録だけで始められるので手軽です。クレジットカードの登録なんか要りません。
また日本発のサービスなのでドキュメントが日本語。英語が苦手な僕にとってはありがたかったです。

簡易チャット作成

今回はjavascriptで適当にチャットアプリをつくってみます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Milkcocoa</title>
    <script src="https://cdn.mlkcca.com/v0.6.0/milkcocoa.js"></script>
    <script src="main.js"></script>
</head>
<body>
    <textarea id="messageArea" style="width:300px;height:150px;background:#555;color:#fff;font-size:17px;"></textarea><br>
    <button onclick="pushData()" style="width:150px;height:30px;">データを追加</button>
    <button onclick="pullData()" style="width:150px;height:30px;">データを取得</button>
    <ul id="pullDataArea">
    </ul>
</body>
</html>

main.js

var milkcocoa = new MilkCocoa('app_id');
var chatDataStore = milkcocoa.dataStore("chat");
var textArea, ul;

/**
 * ロード時処理
 * 5件のデータを読み込む
 */
window.onload = function() {
    textArea = document.getElementById("messageArea");
    ul = document.getElementById('pullDataArea');
    getText();
}

/**
 * pushされたとき、新しいデータを引っ張ってくる（pushされる状態を監視）
 */
chatDataStore.on("push", function(data) {
    pullData();
});

/**
 * データ追加ボタンを押された時の処理
 */
function pushData() {
    var text = textArea.value;
    sendText(text);
}

/**
 * データをデータストアに追加し、テキストエリアは空にする
 * @param text データストアに追加するテキスト
 */
function sendText(text) {
    chatDataStore.push({message: text}, function(data) {});
    textArea.value = "";
}

/**
 * データ取得ボタンを押された時の処理
 * テキスト送信時の更新
 */
function pullData() {
    removePullData();
    getText();
}

/**
 * 新しい順に5つデータを取得
 */
function getText() {
    chatDataStore.stream().size(5).sort('desc').next(function(err, data) {
        addPullData(data);
    });
}

/**
 * 取得したデータを画面上に表示する
 * @param data 取得したデータ
 */
function addPullData(data) {
    for (var i = data.length - 1; i >= 0; i--) {
        var li = document.createElement('li');
        ul.appendChild(li);
        li.innerHTML = data[i].value.message;
    }
}

/**
 * 表示しているデータを画面上から削除
 */
function removePullData() {
    for (var i = ul.childNodes.length - 1; i >= 0; i--) {
        ul.removeChild(ul.childNodes[i]);
    }
}


MilkcocoaのWebサイトでログインして、ダッシュボードから新しいアプリを作成すると、アプリケーションのIDが生成されると思います。アプリケーション名はなんでも良いです。僕は「TutorialApplication」としました。

var milkcocoa = new MilkCocoa('app_id');

main.jsの1行目のapp_idの部分に、そのアプリケーションIDを置き換えてください。
ダッシュボードのアプリケーションの概要から確認することができます。
f:id:web-engine:20170820132211p:plain

IDは間違えてGitHubなんかに上げたりしないようにしましょう。

実行

ブラウザを2つ立ち上げてファイルを実行。

f:id:web-engine:20170820145037p:plain

ローカル上ですが、ちゃんとリアルタイムでチャットができていることがわかると思います。
デザインを修正して、テキストエリアに文字数制限など設ければ、それなりのものになるのではないでしょうか。

ちなみに、「データを取得」ボタンはこのアプリにおいてまったく必要ないですが、メモとして残しておくことにしています。

BaaSの可能性

このように、短いコードでリアルタイム通信を実現できたわけですが、もっとすごいこともできるらしいです。
MilkcocoaではIoTを見据えてサービスをやっているみたいで、スマホなどのデバイスとの親和性も強いです。公式サイトではRaspberry Piなどを使ったサンプル も紹介されています。

参考