There are times when one as a Ruby on Rails developer wants to implement a real-time feature, like a chat application, and after digging a bit you find a framework's feature named , sounds new and scary, right? Fear not, I'll try to explain it as simple as possible so that at the end of this article you'll feel comfortable with the subject. ActionCable At the core, ActionCable uses the . The WebSocket protocol enables full-duplex connections between the client and the server to broadcast changes that occur in the server to the client as soon as it happens. WebSocket connection protocol Because we are really busy and our only interest is how to implement the real-time features to our Ruby on Rails application I'll continue with the steps required to set up ActionCable. The following steps assume that you are . familiar with Ruby on Rails and you are using a version of it greater than 5.2 1. In your Gemfile, gem and . add the redis run bundle install 2. In your routes, . You can do this with , you guessed it, '/cable' is the default path. mount the route where WebSocket requests are going to be delivered mount ActionCable.server, at: '/cable' 3. at the head of your main layout template. Insert <%= action_cable_meta_tag %> 4. , as an example, below is a code snippet of a file generated after running on the terminal. Create a channel that will stream from a given WebSocket identifier rails g channel messages stream_from # app/channels/messages_channel.rb < ApplicationCable::Channel class MessagesChannel def subscribed 'messages' end end 5. , you can do this from any other part of your application, it usually happens in a job or a controller. The last argument to the method is a hash that will be . Broadcast to the channel broadcast serialized as JSON and received at the side of the client message.save
      ActionCable.server.broadcast( , message.body, message.author
      ) # app/controllers/messages_controller.rb < ApplicationController class MessagesController def create # ... if 'messages' body: author: #... end # ... end end 6. Ruby on Rails uses to store and maintain synced the messages sent over the channel streams, if you have you can start the server at some port and specify the port to listen in your ActionCable configuration file. Redis Redis installed locally # config/cable.yml production: adapter: redis url: redis://localhost:6478/1 # ... 7. When we generated the channel, a file named was created under the channels folder inside of the directory holding the javascript files (it is different between Rails 5 and Rails 6), this file is . messages_channel.js the client-side of the WebSocket connection and is there where the data will be received App.messages = App.cable.subscriptions.create( ,
  { : { .getElementById( ).innerHTML += + data[ ] + + data[ ] + ;
    },
  },
); consumer ;

consumer.subscriptions.create( ,
  {
    received(data) { .getElementById( ).innerHTML += },
  },
); // Rails 5 // app/assets/javascripts/channels/messages.js 'MessagesChannel' received ( ) function data document 'messages' '<div><strong>' 'author' '</strong>: ' 'body' '</div>' // Rails 6 // app/javascript/channels/messages_channel.js import from './consumer' 'MessagesChannel' document 'messages' `<div><strong> </strong>: </div>` ${data.author} ${data.body} And that's it! It can get complicated quickly, but these are the basics. In summary, this is what you have to do, first , then (the Ruby one), after that anywhere else in your application (a controller or a job), and finally using JavaScript DOM manipulation. generate the channel specify from where to stream in your channel file broadcast to the channel at the specified stream receive the data at the side of the client and display it with many projects in the pocket that put into practice what I write about, if you want to reach out to me here you have and , just in case here is profile too. I'm a Full-stack Ruby on Rails developer my email my LinkedIn profile my GitHub Happy coding!

Different

When You Should use Redux with APIs

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Live Updates in Ruby on Rails with ActionCable Feature

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Rails Migrations Are Not Scary [Beginners Guide]

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

Rails Migrations Are Not Scary [Beginners Guide]

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps