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

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

mBaaSとPusherを使ってチャットアプリを作る(4)「メッセージを送信する」

前回まででスクリプトを作るところまで終わりましたので、今回は送信処理を含めてアプリを完成させます。

メッセージの送信

チャットメッセージを送信するのはsendメソッドになります。念のためチャット画面のHTML(chat.html)を下記に示します。

<ons-page id="chat">
  <ons-toolbar>
    <div class="left"><ons-back-button>Back</ons-back-button></div>
    <div class="center"></div>
  </ons-toolbar>
  <input type="hidden" id="channelId" />
  <div class="chat-area">
    <ons-list id="chats"></ons-list>
  </div>
  <div class="send-area">
    <ons-input id="message" placeholder="メッセージ"></ons-input>
    <ons-button onclick="send()" modifier="quiet">送信</ons-button>
  </div>
</ons-page>

f:id:mbaasdevrel:20180223182854p:plain

sendメソッドはニフクラ mobile backendのスクリプトを実行します。送信する情報は以下の3つです。

  • userName
    チャットの送信者
  • channle
    チャットのチャンネル
  • message
    チャット本文

これらのメッセージを data メソッドの中に適用します。そしてアップロードしたスクリプトを指定します。POSTメソッドとしてアップロードしたのでPOSTとしていますが、もしGETで行う場合には data ではなく query メソッドでデータを指定します。

// メッセージ送信処理
const send = () => {
  const message = $('#message').val();
  const userName = localStorage.getItem('userName');
  const channel  = $('#channelId').val();
  ncmb.Script
      .data({
        userName,
        message,
        channel
      })
      .exec("POST", "push.js")
      .then(function(res){
        $('#message').val('');
      })
      .catch(function(err){
      });
};

問題なければスクリプトが実行され、その結果としてデータストアへの保存とPusherへの通知作成処理が行われます。

f:id:mbaasdevrel:20180223182910p:plain

別なチャットルームに切り替える

チャット画面を表示した時には、そのチャットIDで購読されている状態です。別なチャットルームに切り替える際には購読していたチャットルームの購読を停止する必要があります(複数チャットルーム対応するのであれば構いません)。

これは document の hide イベントを使います。pusher.unsubscribeを使うことで購読が停止します。これで元のチャットルームで新しい発言があっても通知されません。

// チャット画面から戻った時の処理
$(document).on('hide', (event) => {
  if (event.target.id === 'chat') {
    pusher.unsubscribe($('#channelId').val());
  }
});

まとめ

ニフクラ mobile backendでは今のところWebSocketなどをサポートしていませんが、Pusherのような外部サービスを使うことで解決できます。また、データ更新時のフック処理についてはスクリプトを使うことで解決できます。

Pusherだけではデータの保存に対応できませんが、mBaaSと組み合わせることでデータ保存と復元が簡単にできます。チャットに限らずリアルタイム通信を必要とした際にはmBaaSと組み合わせてみてください。

中津川 篤司

中津川 篤司

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