chat-space自動更新機能実装・・・(本当に必要なの?)

はい、こんばんは。

40期の皆様はカリキュラムがほぼ終わりに近づいてきたと思われますが、学習進捗の方はいかがでしょうか?

ああ〜まだ非同期通信が終わっていない〜とか、インクリメンタルサーチ ・・・という方もいらっしゃるかと思います。

大丈夫です!自分の理解第一で進めて行くことが今後にも役に立ってくるでしょう。(きっと)

ということで理解の追いついていない私は『プロを目指す人のためのRuby入門』という本を購入しました。

徐々に、取り組んでいきたいと思います。またアウトプットさせていただきます!!このブログを読めばRubyのプロ(!)に近づけるかもしれません・・・

ということで振り返り。

本日は自動更新機能の実装に取り組んでおりました。

自動更新とは、非同期通信で、かつ5秒ごとに一回送信したメッセージをこいう信してくれるという優れた機能なのです・・・(chat-spaceに必要なのかは謎)

考え方としては、非同期通信と同じで、JavaScriptAjax通信を用いて作成します。

本カリキュラムでは、setIntervalという指定もありました。

早速見ていきましょう。

まずmessages_controllerへ飛び、indexアクションに対して記述をしましょう。

お得意の、HTMLへ飛ばすか、jsonに飛ばすかのやつです。

respond_to do |format|

 format.html

 format.json {@new_messages= ここでparamsからメッセージを取り出す処理を書きましょう。}

end

続いてindex.json.jbuilderへ。

ここではどのデータをjsonで飛ばすかを書きます。

json.array! @new_messages do |message|

json.user_name message.user.name

json.time message.created_at.strftime(“%Y年/%m月/%d日 %H時:%M分”)

json.content message.content json.image message.image.url

json.id message.id

end

※この時、記述はcreate.json.jbuilderと合わせること!!一致していなければ永遠に自動更新してくれない。例えば、json.user.nameとjson.user_nameという風になっていると大問題だ。

app/assets/javascript/comments.jsへ

f:id:g1034725:20181130005023p:plain

上記のような式を書いて行くわけだ。

こうして見ると非同期通信の式とあまり変化が無いように思われる。

hogeやfugafuga, boboとなっている部分はどこに追加してほしいか、という観点で見てもらいたい。

私のコード自体はあくまで一例。Qiitaの記事を見てもらえるともっと良いものが残っていると思われます。

さて、長く苦しかったchat-space開発も残すところデプロイのみ、明日から頑張ります!!

ちなみに、現在開発中のアプリのフロント実装が終わりましたので、ここに公開させていただきます!!

f:id:g1034725:20181130010026p:plain

maaanga!!というネーミングセンスがないアプリとなっています。

これに非同期通信、いいね機能、その他諸々の機能を実装したいと思っています!!

またまた進捗報告いたします。

それでは。

コメント

タイトルとURLをコピーしました