Skip to content
By Stephen Huang

ActionCable for Rails and Angular JS 1.x

Action Cable is an awesome feature that uses Web Sockets to realise a real time application in Rails, and includes both the back-end and the front-end. In this article, we will use only the server side of Action Cable in Rails and client-side in AngularJS 1.x. This is not a step-by-step tutorial, but it is intended to help you to understand the purpose of each step.

Server Side - Configuration

The first thing we need to do is enable Action Cable in our back-end app. The simplest way is to mount action cable in the route:

# Serve websocket cable requests in-process
mount ActionCable.server => '/cable'

This will open the server for ws://<your-url>/cable.

Server Side - Channel

In our Rails api-only app, we need to create a channel using the channel generator below. The option --no-assets skips the client-side code, which we don't need in our Rails app:

> rails g channel Stat <action> --no-assets
create  app/channels/stat_channel.rb

The stat_channel.rb file looks like:

class StatChannel < ApplicationCable::Channel
  def subscribed
    # stream_from "some_channel"

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed

In the StatChannel class, two default methods are created: subscribed, which is called when a client subscribes to this channel; and unsubscribed, which is called when the subscription is stopped.

The other public method in this class is action. This is similar to the controller's action, and the channel will call different actions depending on the subscriber request.

There is also a default action method receive. This is called when the subscriber doesn't specify the action name.

Client Side - Subscriptions

In our Angular app, we need to subscribe to our channel. There are many action cable libraries provided, but our Angular 1.x app is using ES6 and babel, so I used the actioncable.js that is supported by Rails. You can install it using either npm or yarn:

# if you use npm:
> npm install actioncable --save

# if you use yarn:
> yarn add actioncable

ActionCable is a require-able module, so you can just require or import it and use it directly. So, in the file where it is needed, you can import it with the following:

import actionCable from 'actioncable'

The first thing is to define a cable by providing the web socket url(ws):

this.cable = actionCable. createConsumer('ws://localhost:3000/cable')

And then we use this cable to establish the subscription for the Channel: = this.cable.subscriptions.create('StatChannel', {
    connected: function () {
    disconnected: function () {

    received: function (data) {

The first parameter is Channel name to subscribe, it related to the class name of Channel in our back-end app. The second parameter defines two callback functions connected and disconnected, which will be called when the subscription is connected or dropped respectively.

received is a callback function that will be called when server side broadcasts a message, it is the main function that contains our logic.

If required, you can also create some custom functions here to provide additional functionality.

Server Side - Broadcasting

When the subscription has been created and action cable is connected, we are ready to begin sending data. From server-side to client-side, this is called broadcasting. We broadcast our data to a specific stream, and the client-side that registered the steam will receive the data in received function. We can broadcast the data from anywhere in our Rails app, Controller, Active Job, by using:

ActionCable.server.broadcast "calls", "message"

The first parameter is the stream name, which means it will broadcast to that stream. The second parameter is the data you want to send to the client; it can be string, or a json format. It will automatically encode the json by ActiveSupport::JSON, or you can use any coder by providing coder: option.

When the server broadcasts the data, the received function will be called on the client-side. The data is referenced as a parameter of that function, and this is where you start processing the data.

Client Side - Send data

You can also send data from client to server. The perform or send function of channel can be used to send the data. Normally we use preform method, and specify which action we would like send. The data needs to be in json format. send is used to send to the default action, but you can also add the action key to the data to specify the action.

## usage for perform method'action_name', { message: message })

## usage for send method{ message: message }){action: 'action_name', message: message })

On the server-side, the action method will be called and data can be used.

Popular Articles by Our Team

Our expert team of designers and developers love what the do and enjoy sharing their knowledge with the world.

We Hire Only the Best

reinteractive is Australia’s largest dedicated Ruby on Rails development company. We don’t cut corners and we know what we are doing.

We are an organisation made up of amazing individuals and we take pride in our team. We are 100% remote work enabling us to choose the best talent no matter which part of the country they live in. reinteractive is dedicated to making it a great place for any developer to work.

Free Community Workshops

We created the Ruby on Rails InstallFest and Ruby on Rails Development Hub to help introduce new people to software development and to help existing developers hone their skills. These workshops provide invaluable mentorship to train developers, addressing key skills shortages in the industry. Software development is a great career choice for all ages and these events help you get started and skilled up.

  • Webinars


    Webinars are our online portal for tips, tricks and lessons learned in everything we do. Make the most of this free resource to help you become a better developer.

    Learn more about webinars

  • Installfest


    The Ruby on Rails Installfest includes a full setup of your development environment and step-by-step instructions on how to build your first app hosted on Heroku. Over 1,800 attendees to date and counting.

    Learn more about Installfest

  • Development Hub

    Development Hub

    The Ruby on Rails Development Hub is a monthly event where you will get the chance to spend time with our team and others in the community to improve and hone your Ruby on Rails skills.

    Learn more about Development Hub

Get the “reinteractive Review” Monthly Email