Action Cable and the Chatting System

I have wondered numerous times how we are able to have real time conversation on apps like Facebook messenger or WhatsApp to name a few examples. From a coach, I learned about Action Cable, a Rails tool that allows real time messaging by integrating web sockets into a Rails app.

To understand how to build it, I used a resource that I will include at the end. First, go to the chats controller and go to “def create”. There, we must add an action cable code there, as seen in figure 1.

Fig. 1: Action Cable in create.

The next step is we need to go to the room_channel.rb file and include inside “def subscribed” “stream_from ‘room_channel’”. This is needed so that we can have real-time messaging and not need to refresh when a message is sent out.

Fig. 2: Stream from room channel.

Third, we go to the room channel JavaScript file and add the code shown in figure 3. This file is found inside the javascript folder. The purpose of this is to display the message without refreshing, just like in figure 2. The code in figure 2 is the back-end portion; this is the front-end.

Fig. 3: JavaScript code.

Overall, this is the basics needed to create a real-time Rails chat app. For more information, see the link in the references section.

References

1. https://dev.to/timnans/simple-rails-6-chat-application-with-action-cable-1b6m