DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

timnans
timnans

Posted on

Simple Rails 6 Chat application with Action Cable

We will create a simple Rails 6 chat application that utilizes web sockets to permit real-time communication. Action Cable meshes websockets with into Rails applications.To begin, we first create a new rails application.

rails new chatter
Enter fullscreen mode Exit fullscreen mode

Once the application has been created, we generate a scaffold for our model. As this is a simple implementation of a chat application, our Chat model would only have one field, message

rails g scaffold Chat  message:string
rails db:migrate
Enter fullscreen mode Exit fullscreen mode

Once the scaffold is created, we then set the root path of our application

chatter/config/routes
 root 'chats#index' 
Enter fullscreen mode Exit fullscreen mode

We then update the form for our chat to submit via javascript. Navigate to app/views/chats/_form.html.erb and update the form to

form_with(model: chat, remote: true)
Enter fullscreen mode Exit fullscreen mode

This enables the form to be submitted via javascript. We will also update new.html.erb. We will add a div element that would hold newly created messages through action cable.

<% @chats.each do |chat| %>
<p><%= chat.message %></p>
<% end %>
<div id="new_message"%></div>
Enter fullscreen mode Exit fullscreen mode

We will also update the controller to enable the create method to respond to javascript. In chats_controller,update as follows;
chats_controller, update as follows;

@chat = Chat.new(chat_params) 
    respond_to do |format| 

      if @chat.save 
        # format.html { redirect_to @chat, notice: 'Chat was successfully created.' } 

        # format.json { render :show, status: :created, location: @chat } 
        format.js
Enter fullscreen mode Exit fullscreen mode

Also update the new method to contain the following

def new 

    @chats =Chat.all 

    @chat = Chat.new 

  end
Enter fullscreen mode Exit fullscreen mode

Finally, we will also create a create.js.erb file to our views/chats/ folder.

Enter Action Cable

As previously stated, Action Cable enables real-time communication via web sockets. To get started, we first generate a channel that we will stream from. Create a new channel

rails g channel room
Enter fullscreen mode Exit fullscreen mode

This would generate several files. We first look at room_channel.rb. We update the subscribed method to stream from room_channel

 def subscribed
  stream from "room_channel"
 end
Enter fullscreen mode Exit fullscreen mode

We then look at room_channel.js. Three functions are defined here. For this application, we are solely interested in the received function. Here, we state what operations should be carried out when channel receives data. We want the new message that was submitted to be displayed on the screen. So we create new elements and pass the message into it and render it out as HTML.

  var node = document.createElement("P"); 

    var textnode = document.createTextNode(data.content.message); 

    node.appendChild(textnode); 

    document.getElementById("new_message").appendChild(node);
 document.getElementById('chat_message').value= ''
Enter fullscreen mode Exit fullscreen mode

We look at the controller for chats again and update the create method. On the successful creation of a new chat message, we want to broadcast this chat message to our room_channel. We update the create method to reflect these changes:

def create 

    @chat = Chat.new(chat_params) 
    respond_to do |format| 
      if @chat.save 
        ActionCable.server.broadcast 'room_channel', content: @chat 
        format.html { redirect_to @chat, notice: 'Chat was successfully created.' } 
        format.json { render :show, status: :created, location: @chat } 
        format.js 
      else 
        format.html { render :new } 
        format.json { render json: @chat.errors, status: :unprocessable_entity } 
      end 
    end 
  end 
Enter fullscreen mode Exit fullscreen mode

We can finally test our application to see our chat work in real-time! That’s it!

GIF of Chat app

GitHub logo timnans / chatter

A simple rails 6 chat application

README

This README would normally document whatever steps are necessary to get the application up and running.

Things you may want to cover:

  • Ruby version

  • System dependencies

  • Configuration

  • Database creation

  • Database initialization

  • How to run the test suite

  • Services (job queues, cache servers, search engines, etc.)

  • Deployment instructions

  • ...

Top comments (4)

Collapse
 
timnans profile image
timnans

Whoops! I've updated the repo to include the create.js.erb file. Thank you

Collapse
 
cmitz profile image
Casper Smits

By the way, you also got a typo in the room_channel.rb:

 def subscribed
  - stream from "room_channel"
  + stream_from "room_channel"
 end
Collapse
 
fedeagripa profile image
fedeagripa

Amazing! you also can add some magic to your chat with brand new ActionText from rails 6 core, I will be c&p an old post I have soon if you have any doubt :)

Collapse
 
luciagirasoles profile image
Mayra Navarro

Hi, I really like how you explain it but, I can't find the create.js.erb file in that directory on github

Tired of sifting through your feed?

Find the content you want to see.

Change your feed algorithm by adjusting your experience level and give weights to the tags you follow.