今日は一発！！(30日目)

今日はチャットアプリケーションの実装に一日取り組みました！

JavaScriptでフォームからメッセージ送信したと同時にメッセージ表示画面が自動でスクロールしてくれるイベントを実装しました！

メッセージ送信機能実装のステップ

①新しいブランチを作成する


②jsファイルを作成する


③フォームが送信されたら、イベントが発火するようにする


④2のイベントが発火したときにAjax*を使用して、messagecontrollerのcreateアクションが動くようにする


⑤messagecontrollerでメッセージを保存し、respond_to*を使用してHTMLとJSONの場合で処理を分ける


⑥jbuilderを使用して、作成したメッセージをJSON形式で返す


⑦返ってきたJSONをdoneメソッドで受取り、HTMLを作成する


⑧6で作成したHTMLをメッセージ画面の一番下に追加する


⑨HTMLを追加した分、メッセージ画面を下にスクロールする


⑩非同期に失敗した場合の処理も準備する

この実装でのポイントはAjaxとrespond_toの使用ですね。

☆Ajax☆

Ajaxとは「Asynchronous Javascript+XML」の略称。 JavaScript の組み込みクラスである XMLHttpRequest を利用した非同期通信を実現する。

☆respond_to☆

非同期でJSから送られてきた信号を、①HTMLに返すか②jbuilderを通してJSのイベントに返すか分岐を決める仕事をするのがrespond_toの役割。

ざっくり説明するとこんな感じですが、言葉だけだとわかりづらいと思うので絵に描いてみましたw

f:id:qwe-ima-poi:20180930102616j:plain