Need a time tracking tool for your projects?Check out ProTimes

Action Cable on specific page within Ruby on Rails

Using page specific action cable functionality within ruby on rails comes in very handy sometimes. It allows you to target given functionality to specific pages and controllers. Furthermore, it reduces the number of open web sockets, which again reduces your server load.

Basic action cable setup

First of all, you will need a running action cable configuration within your rails application. Since Rails 5.0.0 action cable will be a default component when generating a new application. If you need to install and configure it on your own just follow this action cable configuration description. It shows you how to setup your channel subscription adapter. Hint: You should use Redis within your development environment too. In my opinion, keeping the production and development environments as close as possible is the best way to prevent any unforeseeable consequences.

Within the folder assets/javascripts add a cable.js file with following content:

Create channel stubs

Next, we are going to create our first channel. Rails provides a handy generator for this. Just execute rails g channel NotificationChannel on your console and Rails will generate the following files for you:

  • assets/javascripts/channels/channels.js (if it does not exist already)
  • assets/javascripts/channels/notification_channel.coffee
  • app/channels/notification_channel.rb

As prerequisites, we need to mention some basic server-side components, which will contain your default channel setup code e.g. user authentication. Hint: When using Devise you can implement action cable user identification via session cookies.

Since we do not want to setup and execute the channel configuration on each page of our application it is important that channels.js is not included within your main application.js. Just check that the directive require_tree is not present within your application.js (use require_directory instead). After that, no javascript code for channel setup will be precompiled to your main javascript file. To include channel.js on specific pages we need to add it to the asset precompile pipeline. To do so edit your config/initializers/assets.rb and add Rails.application.config.assets.precompile += %w(channels/channels.js).

Subscribe to a channel

To create a channel on the client side you just have to subscribe to the NotificationChannel. The code was already generated by Rails and you only have to update the code when receiving data. Also, you can see, that in our code we will pass an additional parameter to the channel setup named param1. This enables you to further configure your channel on the server side.

Within your NotificationChannel class you can get the configuration parameter via the params hash. After that, you can start the channel streaming by providing a specific name. This channel name will be used later on, to push messages to your channel and back to the client side.

Enable page specific action cable code

Next, update your application layout to make it possible to include the channels.js on specific pages. To do this include = yield :channels at the bottom of your layout file. After that edit your specific view file and provide the content for the channels placeholders. Here you will include your channels.js which includes your notification_channel.coffee and thus creates your NotificationChannel.

Post a message to the channel

The notification channel will be established whenever you visit your specific page. The stream is ready and you can go on to post a message to the channel. Posting a message to the channel is quite easy. Use the ActionCable.server.broadcast method, specify the channel you want to post to and add the message as a hash.

That’s all folks.