How to Setup ActionCable with a Rails API Backend
When I started to work on a project with my colleague, it didn’t take us too long to decide on what we wanted to create. We instantly thought of making a chat application, and thought that it wouldn’t be too difficult to figure out. Sure, we only had two days, but maybe that would be the fire we needed to really produce something amazing! The only problem was that everywhere we looked only listed examples of ActionCable being used with a full Ruby on Rails stack, and we were only using it for a Rails API Backend.
Step 1: Setup your Database, Serializers & Whitelist Your API (CORS)
In order for your Frontend to communicate with your Backend with JavaScript you will need to have your database setup, and have your data serialized. The reason this is important is because this will allow your Frontend to communicate with your Rails API over Websockets. Without it, this will NOT work.
Under config > initializers > cors.rb whitelist which websites you wish to allow access to your API:
And then whitelist it under config > environments > development.rb with the following:
Step 2: Mount ActionCable & Create a Websocket
Once you’ve verified that your data is reachable on a localhost, it’s time to create an accessible Websocket. Navigate to config > routes.rb and mount ActionCable:
Once this is setup, then move to your Frontend, and create a function to open a new Websocket which communicates with the mounted ActionCable:
Step 3: Create a Channel
Under app > channels, create a channel for the information you’re trying to stream and manipulate. In this case, we’re trying to stream chat messages between users (anonymous and logged in) on a channel (Users has_many Messages on a Channel). This is where communications from the Frontend are received, and handled:
In the above, the subscribed method calls on the self.all_messages method within the ChatMessagesChannel. What this does is subscribes a user (anonymous or logged in) to subscribe to the current ‘broadcast’ once the webpage is open. This broadcast is how information is being transmitted live to whoever else may be currently subscribed to the same channel (ie: users in a chatroom).
Step 4: Communicate With the Backend over the WebSocket
Now it’s time to put all the pieces together! Go back to the Frontend, and create a function that will subscribe an anonymous or logged in user to any, and all messages that will be received real time once the page is loaded:
We call on the openConnection function we made earlier, and add an onopen event listener on chatWebSocket. This event immediately subscribes to the Chat Messages channel. Let’s break this down even further:
In the subscribeMsg object you see “command”:”subscribe” — does it look familiar? It’s calling on the method that we created earlier in the Chat Messages Channel. However, how does it know this is the correct channel? Let’s look at the next part: “identifier”:”{\”channel\”:\”ChatMessagesChannel\”}” — as you can see from the value of the identifier, it’s specifically looking for a channel called ChatMessagesChannel.
That’s it!
Now all that’s left is to build out your app further, and implement a way to parse your message data and render it real time. However, now anyone on your page is able to receive ANY new messages that’s being sent and then broadcasted from the Chat Messages Channel.
If you’re interested in actually being able to deploy your ActionCable Rails API Backend to Heroku, please visit my colleague’s blog who goes in depth regarding the setup here.
