メッセージアプリは単体アプリとしてはもちろん、サービスの一機能としてもよく使われています。そんなメッセージアプリをMonaca × JavaScript SDKを使って作ってみましょう。
完成品について
JavaScript SDKなのでWebベースでも動作させられます(アプリケーションキー、クライアントキーの取り扱いはご注意ください)。
自分の発言は右側に、他のユーザの発言は左側に表示されます。ユーザ名も出るようになっています。
通知について
チャットはリアルタイム性が大事ですが、現在のmBaaSではWebSocketのような機能は提供されていません。そこで今回はPusherを通知部分に用いて実装します。
アーキテクチャについて
まずアプリはWebSocketでPusherと接続します。これは通知を受け取るだけで、メッセージの送信はしません。メッセージの送信はmBaaSに対してのみ行います。mBaaSではデータを登録した時にイベントを起こすといった機能はありません。そこでスクリプト機能を使います。
スクリプト機能でデータストアへのメッセージ書き込みと、Pusherへの送信を行います。Pusherとの接続はWebSocketではなく、REST APIになります。mBaaSからPusherへはREST APIで、Pusherからアプリへの通知はWebSocketになります。
具体的には次のようになります。
チャットの機能
チャットは複数のチャンネルを持っているのが基本です。今回は自由にチャンネル名を決められるようになっています。
そのチャンネルに入ったら、既存のメッセージを読み込みます。これはmBaaSのデータストアにあるデータを取得します。
そしてメッセージを送信する際にはmBaaSのスクリプトを実行し、メッセージをPusherから通知として受け取ります。これは自分も他のユーザが書いたメッセージも同じです。
ソースコード
今回のソースコードはNCMBMania/mBaaS_Pusher_Chat: NCMBとPusherを組み合わせたチャットです。にアップロードしてあります。これからソースコードについて解説していきますが、より詳しく知りたいという際には利用してください。
解説
解説は以下のように分けて行います。