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

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

mBaaSとPusherを使ってチャットアプリを作る(1)「機能概要」

f:id:mbaasdevrel:20180223181559p:plain

メッセージアプリは単体アプリとしてはもちろん、サービスの一機能としてもよく使われています。そんなメッセージアプリをMonaca × JavaScript SDKを使って作ってみましょう。

完成品について

JavaScript SDKなのでWebベースでも動作させられます(アプリケーションキー、クライアントキーの取り扱いはご注意ください)。

自分の発言は右側に、他のユーザの発言は左側に表示されます。ユーザ名も出るようになっています。

通知について

チャットはリアルタイム性が大事ですが、現在のmBaaSではWebSocketのような機能は提供されていません。そこで今回はPusherを通知部分に用いて実装します。

f:id:mbaasdevrel:20180223181559p:plain

アーキテクチャについて

まずアプリはWebSocketでPusherと接続します。これは通知を受け取るだけで、メッセージの送信はしません。メッセージの送信はmBaaSに対してのみ行います。mBaaSではデータを登録した時にイベントを起こすといった機能はありません。そこでスクリプト機能を使います。

スクリプト機能でデータストアへのメッセージ書き込みと、Pusherへの送信を行います。Pusherとの接続はWebSocketではなく、REST APIになります。mBaaSからPusherへはREST APIで、Pusherからアプリへの通知はWebSocketになります。

f:id:mbaasdevrel:20180223181622p:plain

具体的には次のようになります。

チャットの機能

チャットは複数のチャンネルを持っているのが基本です。今回は自由にチャンネル名を決められるようになっています。

f:id:mbaasdevrel:20180223181836p:plain

そのチャンネルに入ったら、既存のメッセージを読み込みます。これはmBaaSのデータストアにあるデータを取得します。

f:id:mbaasdevrel:20180223181846p:plain

そしてメッセージを送信する際にはmBaaSのスクリプトを実行し、メッセージをPusherから通知として受け取ります。これは自分も他のユーザが書いたメッセージも同じです。

ソースコード

今回のソースコードはNCMBMania/mBaaS_Pusher_Chat: NCMBとPusherを組み合わせたチャットです。にアップロードしてあります。これからソースコードについて解説していきますが、より詳しく知りたいという際には利用してください。

解説

解説は以下のように分けて行います。

中津川 篤司

中津川 篤司

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