前回まででスクリプトを作るところまで終わりましたので、今回は送信処理を含めてアプリを完成させます。
メッセージの送信
チャットメッセージを送信するのは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>
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への通知作成処理が行われます。
別なチャットルームに切り替える
チャット画面を表示した時には、そのチャット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と組み合わせてみてください。
