即時に更新されるチャットアプリ
- Action Cableを用いた、リアルタイムチャットアプリを作成する
まとめてコードずらりします⬇︎
ターミナル
%cdprojects%rails_6.0.0_newmini_talk_app-dmysql%cdmini_talk_app%railsdb:createターミナル
%railsgcontrollermessagesnew%railsgmodelmessagetext:text%railsdb:migrateapp/config/routes.rb
Rails.application.routes.drawdoroot'messages#new'resources:messages,only:[:create]endapp/controllers/messages_controller.rb
classMessagesController<ApplicationControllerdefnew@messages=Message.all@message=Message.newenddefcreate@message=Message.new(text:params[:message][:text])endendapp/views/messages/new.html.erb
<h3>mini_talk_app</h3><%=form_withmodel:@messagedo|f|%><%=f.text_field:text%><%=f.submit'送信'%><%end%><divid='messages'><%@messages.reverse_eachdo|message|%><p><%=message.text%></p><%end%></div>この時点で下記のようになっているはず
Action Cableの実装(先ほどの続き)
ターミナル
%railsgchannelmessageapp/channel/message_channel.rb
classMessageChannel<ApplicationCable::Channeldefsubscribedstream_from"message_channel"enddefunsubscribed#Anycleanupneededwhenchannelisunsubscribedendendapp/controller/messages_controller.rb
classMessagesController<ApplicationControllerdefnew@messages=Message.all@message=Message.newenddefcreate@message=Message.new(text:params[:message][:text])if@message.saveActionCable.server.broadcast'message_channel',content:@messageendendendapp/javascript/channels/message_channel.js
importconsumerfrom"./consumer"consumer.subscriptions.create("MessageChannel",{connected(){// Called when the subscription is ready for use on the server},disconnected(){// Called when the subscription has been terminated by the server},received(data){consthtml=`<p>${data.content.text}</p>`;constmessages=document.getElementById('messages');constnewMessage=document.getElementById('message_text');messages.insertAdjacentHTML('afterbegin',html);newMessage.value='';}});