FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

mBaaSとPusherを使ってチャットアプリを作る(3)「スクリプトを作る」

f:id:mbaasdevrel:20180223182608p:plain

前回まででUIができましたので、今回はスクリプトの処理を作っていきます。このスクリプトで行うのは次の二つの処理です。

  • データストアへの書き込み
  • Pusherへの通知

では解説していきます。

スクリプトの基本形

スクリプトはNode.jsで書きます。ファイル名は push.js としています。処理がうまくいったら res.send({}) 、失敗したら res.status(401).send({}) を返すようにします。もちろん本来であれば失敗した際のメッセージは細かい方が良いでしょう。

module.exports = (req, res) => {
    // 処理がうまくいったら res.send({})
    // 失敗したらres.status(401).send({})
};

全体の流れ

まず全体の流れを紹介します。

  1. データストアへの書き込み
  2. Pusherへの通知

となります。

module.exports = (req, res) => {  
    const applicationKey = 'YOUR_APPLICATION_KEY';
    const clientKey = 'YOUR_CLIENT_KEY';
    // データストアへの書き込み
    saveDataStore(
        applicationKey,
        clientKey,
        req.body
    ).then(() => {
        // Pusherへの通知
        return sendPusher(
            'YOUR_PUSHER_AUTH_KEY',
            'YOUR_PUSHER_SECRET_KEY',
            'YOUR_PUSHER_APP_ID',
            req.body
        )
    })
    .then((response) => {
        // 処理成功
        res.json({});
    })
    // 処理失敗
    .catch((err) => res.status(401).json(err));
};

以下の二つはニフクラ mobile backendから取得して書き換えます。

  • YOUR_APPLICATION_KEY
  • YOUR_CLIENT_KEY

以下の三つはPusherから取得して書き換えます。

  • YOUR_PUSHER_APP_ID
  • YOUR_PUSHER_AUTH_KEY
  • YOUR_PUSHER_SECRET_KEY

データストアへの書き込み

データストアへ書き込む際には以下の情報がアプリから送られてきます。これをすべてChatクラスに書き込みます。今回はAclは設定していません。

  • userName
  • channel
  • message
const saveDataStore = (applicationKey, clientKey, body) => {
    const ncmb = new NCMB(applicationKey, clientKey);
    const Chat = ncmb.DataStore('Chat');
    const chat = new Chat;
    return chat
        .set('channel', body.channel)
        .set('userName', body.userName)
        .set('message', body.message)
        .save()
}

Pusherへの通知

Pusherへの通知で問題になるのはシグネチャです。本来Pusherはnpmライブラリを提供しているのでそれを使えば良いのですが、mBaaSのスクリプトに対応ライブラリとして入っていません。そこで自分で実装する必要があります。

参考になったのは pusher_body_md5_example.rb です。コードがLuaで書かれていますので、JavaScriptになおします。

処理としては、メッセージのMD5ハッシュを作成し、さらにクエリストリングやメソッドをまとめて署名用文字列を作ります。そしてSHA256でハッシュを作りますが、これはBase64ではなくHexとなっています。JavaScriptのタイムスタンプはミリセカンドで返ってきますので1000で割る必要もあります。

const authTimestamp = Date.now() / 1000;
const authVersion = '1.0';
const medhod = 'POST';
const path = `/apps/${appId}/events`;
const message = {
    data: JSON.stringify({
        userName: body.userName,
        message: body.message
    }),
    name: "message",
    channel: body.channel
};
const bodyMd5 = crypto
    .createHash('md5')
    .update(JSON.stringify(message))
    .digest('hex');
const queryString = [`auth_key=${authKey}`,
    `auth_timestamp=${authTimestamp}`,
    `auth_version=${authVersion}`,
    `body_md5=${bodyMd5}`].join('&');
const authSigning = [
    medhod,
    path,
    queryString
].join("\n");
const signature = crypto
    .createHmac("SHA256", secretKey)
    .update(authSigning)
    .digest("hex");

署名文字列さえ正しく作れれば後は難しくありません。

return request
    .post(`https://api.pusherapp.com${path}?${queryString}&auth_signature=${signature}`)
    .set('Content-Type', 'application/json')
    .send(JSON.stringify(message))

これでPusherに対してREST API経由で通知が送れます。その結果はPusherを経由してWebSocketを使ってアプリへ通知されます。

必要なライブラリの読み込み

今回のスクリプトでは以下の外部ライブラリを使っています。

  • ncmb
    ニフクラ mobile backend用
  • superagent
    HTTPクライアント
  • crypto
    MD5/SHA256のハッシュ化用

cryptoはncmbでも使っているので読み込めます。

const crypto  = require("crypto");
const request = require('superagent');
const NCMB    = require('ncmb');

これでスクリプトは完成です。完成版はこちらにあるので参考にしてください。管理画面のスクリプトにてコードをアップロードしてみましょう。幾つかのデータを送りますのでPOSTメソッドにした方が良いでしょう。

f:id:mbaasdevrel:20180223182608p:plain

次回

次回は実際にメッセージを送信する部分を作ります。

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。