Hi everybody. Today I would like to bring everyone an introduction as well as a small demo of ActionCable in Rails. Specifically, I will write Rails API to return Notification to the client (written in ReactJS) in Real-time format. Let’s rockkk.

What is ActionCable?

As far as I know, ActionCable provides an integrated Websocket solution, a two-way communication method for clients and servers that allows programmers to implement Real-time (real-time) features as well as provide features. Support for the JS framework and Rail framework. Going a little deeper, I will briefly talk about how it works offline. An Action Cable server can manage multiple connection instances (I read the RailsGuides documentation so I don’t know how to translate this properly), each connection instance will belong to a WebSocket connection. A single user will be able to have multiple WebSockets connected to the application if the user opens multiple tabs in the browser or uses multiple devices at the same time. The client of a WebSocket connection will be called a consumer.

Each of these consumers can subscribe to multiple cable channels. At this point, many of you will be wondering how to subscribe? Or what is cable channel?

I want to explain that the subscription means that the user will subscribe to a particular channel, the channel here will be the place to reflect the changes to the consumer. For example, when users subscribe to NotificationChannel, when we create and push a new notification into the channel, those users who have subscribed to NotificationChannel will not need to call the API get notifications to get back the list of notifications with the newly created one, but It will automatically notify the client that there are new updates and reloading as well. Real-time is here.

As I said above, a consumer can subscribe to multiple channels and receive new changes that are reflected on those channels, like you can join a lot of chat boxes in Chatwork, gossiping in this box and still receive get new messages in other chat boxes. I think this is a bit too long, the theory is sure people can learn more in other articles or other websites to be able to better understand from my perspective. And now we will enter the demo.

Let’s rock with the demo

I have made a small demo, try to see how ActionCable will be used to send Real-time noti from Rails server to React JS client.

I. Setup the Rails server

1) Initialize new project

I will rails new a new project. Accompanied by creating a db as well as generating models for Notification, these are probably basic so I will not cover here anymore. It also requires gem rack-cors to allow clients to call APIs on the Rails server without being blocked by the CORS policy.

• Add gem rack-cors to Gemfile then run bundle install.
• Add the following code to app / config / application.rb.

2) Setup Action Cable

1. Setup routes

2. Generate NotificationChannel

Next, we will create a Notification channel so that the client can subscribe and receive changes. We need to run the following command to generate the channel.

rails g channel notification

At the app / channels / link we can find the file notification_channel.rb

Here, the subscribed function will define what channel the information will be streamed from. Or when unsubscribed, there will be no action. This I have not studied in depth so I hope people will only teach more in the comment section.

3. Let’s create controllers

In this demo, I will create 2 main controllers, NotificationController, to create new notifications from the server and Api :: NotificationController so that the client can call to get list notifications.

NotificationController.rb

As you can see here after creating a new notification, I call more

ActionCable.server.broadcast “notificationchannel”, {data: @notification }

to be able to send newly created notifications to notification_channel . The channel we created above.

Api :: NotificationController

Now that all the parts of the Rails Server have been completed, now we will go to the Client setup section to test if the client can receive new Notification in real time.

II. Setup the ReactJS client to work with ActionCable

1) Create a new ReactJS app

create-react-app demo-app

2) Install the “react-actioncable-provider” package with the following command

npm install -S react-actioncable-provider

3) In the index.js file we will implement the following.

And BOOM , test it out.

End

Thank you everyone for watching the article. Because I have just learned about this part, there are still many shortcomings or errors so I hope everyone can contribute to the correction of the article by commenting below.