Discover Our Blog

Ruby on Rails Action Cable Tutorial for Developing Real Time Web Application

Ruby on Rails Action Cable Tutorial for Developing Real Time Web Application


Action Cable is a powerful feature introduced in Rails 5. Using action cable one can develop real-time web applications. Action cable uses Web Sockets to create full duplex communication between application’s server and client.


Using action cable feature we can create any real-time functionality like live chatting, which updates chats, show new messages, notifications, etc without reloading of the page. Action cable basically keeps ruby on rails server data and client data updated using web sockets which make the application more feasible to use.


Action cable is not supported by RAILS VERSION > 5.




This ruby gem requires jQuery. If jQuery is not present in the project then simply add “jquery_rails” gem to gemfile.rb and redis-server in the system.




Add following in Gemfile.rb file :


gem 'redis', '~> 4.0'


Also add following in application.js file :

//= require rails-ujs

//= require jquery

//= require turbolinks

//= require_tree

Thats all about installation process.


Let’s see an EXAMPLE :

For creating Notification model, controller and views using scaffold command just run :


rails g scaffold Notification name:string


Then create a Channel , we call this channel “WebNotifications”.

rails generate channel WebNotifications


And we add some CoffeeScript files to show notifications to all users in javascripts/ = App.cable.subscriptions.create "WebNotificationsChannel",

received: (data) ->

$('#notification div').append '<li>' + data['notification'] + '</li>'

$('#notifications-count,.notifications-count').text data['count'] 


And finally we need to add the below code to the channels web_notifications_channel.rb.


class WebNotificationsChannel < ApplicationCable::Channel

def subscribed

stream_from "web_notifications_channel"


def unsubscribed



Changes in notifications_controller.rb file To call the action cable: 
def create

@notfication =

respond_to do |format|


format.html { redirect_to @notfication, notice: 'Notfication was successfully created.' }

format.json { render :show, status: :created, location: @notfication }


format.html { render :new }

format.json { render json: @notfication.errors, status: :unprocessable_entity }



ActionCable.server.broadcast 'web_notifications_channel', notification:, count: Notification.all.count


Changes in app/views/layouts/application.html.erb file : I have added simple notification navigation in the application layouts.

<ul class="nav navbar-nav navbar-right">

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Notification (<b class="notifications-count">2</b>)</a>

<ul class="dropdown-menu notify-drop">

<div class="notify-drop-title">

<div class="row">

<div class="col-md-6 col-sm-6 col-xs-6">Notifications (<b id="notifications-count">2</b>)</div>

<div class="col-md-6 col-sm-6 col-xs-6 text-right"><a href="" class="rIcon allRead" data-tooltip="tooltip" data-placement="bottom" title="tümü okundu."><i class="fa fa-dot-circle-o"></i></a></div>



<!-- end notify title -->

<!-- notify content -->

<div class="drop-content" id="notification">

<% Notfication.all.each do |notification| %>


<div class="col-md-3 col-sm-3 col-xs-3">

<%= %>



<% end %>





We need to do simple configuration setup in the cable.yml file.

redis: &redis

adapter: redis

url: redis://localhost:6379/1

production: *redis

development: *redis

test: *redis

To start the application first we need to start the redis-server the command to start the redis-server is:


The Redis-server will be started then you can serve your application.
Following are the snapshots of output scenarios:


Creating new Notifications:


Introduction to Action Cable in Rails 5


The result will be shown like that By using the action cable it will update the Notification to all live users.


Ruby on Rails Action cable tutorial



In Ruby on Rails web development, using Action Cable RoR developers can show the live notifications to all users. These notifications can be of any type like Messaging, Sending push notification etc.


Leave a comment: