Thread by @zhephyn

This tutorial is meant to serve as an introduction to Action Cable. For those unfarmiliar with what Action Cable is, basically all things real-time in rails are handled by action cable. I'll take you from the basics of action cable configuration up to the final version of the app

Below is a gif of what we'll build. A simple app where by we navigate to a room in the browser and we see messages appended to that room in real-time without the need for refreshing.

1. Create a new rails app of your desired name. I've chosen action_cable_chat as the name of my app.
2. Navigate to the folder where you've created your new rails app and cd into it

3. Open your rails app in VS code, navigate to the gemfile and uncomment the line related to the Redis gem. In the terminal, run bundle add to install redis as a gem in your rails app.

Redis is the pub-sub system that action cable depends on for real-time message publishing and delivery. This is the major reason as to why we need redis to be installed.

Now that we've installed Redis as a gem, we need to install Redis on our local machine. This is important because we'll need it to start the redis server, another important part of action cable. Download Redis from the official website at redis.io/downloads/

4. Now we'll make some changes to a couple files. First edit your cable.yml to look like below;

5. Add this line to your application.rb file
config.action_cable.mount_path = "/cable"

6. Add the route for handling the action cable/websocket requests to your routes.rb files by adding the line below,
mount ActionCable.server => "/cable"

7. Then edit your development.rb file to look like below,
Add the lines below to your development.rb file
config.action_cable.url = "ws://localhost:3000/cable"
config.action_cable.allowed_request_origins = ["https://localhost:3000",/http:\/\/localhost:*/]

8. Create a message model with each message having an attribute of content of type text by running the command below,
=>rails generate model Message content:text
Then migrate the database,
=> rails db:migrate

9. Generate a messages controller to accompany the message model by running the command below,
=>rails g controller Messages index
Edit your messages_controller.rb file to look like below,

10. Edit the index.html.erb file to look like below

11. Now add the routes for messages in the routes.rb file

12. Now generate the channel to handle message broadcasting and appending them to the front-end.
Run the command
=> rails generate channel Chat
This creates a couple files of which 2 are of utmost relevance, chat_channel.rb and chat_channel.js.

13. The chat_channel.js file has 3 functions of which the received function handles broadcasted messages to the front-end/ the view, the connected and disconnected functions log messages to the console when a web socket connection is made and broken respectively.

14. The chat_channel.rb is the back-end part of the chat channel, it handles and accepts subscriptions as well sets up streams for the various connected clients. It should look like below;

15. The broadcasting happens in the messages controller with the method,
ActionCable.server.broadcast("chat_Best Room", {message: @message.content})
The messages will be received by all consumers listening in on the "chat_Best Room" stream. And that marks the end of the tutorial