Intro
Earlier this week I wanted to use Action Cable for its nice two way connections. I ended up crying trying to understand the documentation as there is no good examples for implementing it anywhere.
Even worse, there are absolutely no tutorials for using it with React.
I wrote this guide to try and fill that void.
Prerequisites/Recommendations
This Guide assumes you:
- already have a functioning app with React on top of Rails.
- have a User table that:
- stores logged in user_id inside
session[:user_id]
- stores logged in user_id inside
If you dont have any of that, consider starting with my react rails template
For a finished project that implements this tutorial, look at my react rails chat app, which is built off of that template.
Postgresql
Action Cable requires you to use postgresql.
Making a new app with postgresql
If you dont have an rails app yet, follow this guide fully
Switching an existing rails app to postgresql
If you already have an app, but it isn't based on postgres, follow these steps to switch to it
in your /Gemfile switch out sqlite3 for postgres:
- # sqlite3 as database for Active Record
- gem 'sqlite3', '~> 1.4'
+ # Use postgresql as the database for Active Record
+ gem 'pg', '~> 1.1'
replace your /config/database.yml with a postgres one, replacing APPNAME with whatever you are calling your app
default: &default
adapter: postgresql
encoding: unicode
pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
timeout: 5000
development:
<<: *default
database: APPNAME_development
test:
<<: *default
database: APPNAME_test
production:
<<: *default
database: APPNAME_production
username: APPNAME
password: <% ENV["APPNAME_DATABASE_PASSWORD"] %>
Then, follow this guide excluding step 3 to finish.
Adding action cable
Using action cable directly on top of postgresql is not recommended for performance reasons.
Instead, its advised to use a separate server that runs between postgres and action cable, caching stuff to help improve performance.
It seems like everyone uses redis for this purpose:
Redis
Install redis-server:
sudo apt install redis-server
Add redis to your /Gemfile
# Use Redis adapter to run Action Cable in production
gem 'redis', '~> 4.0'
From now on when starting your server you have to start the redis server along with rails and npm
redis-server
rails s
npm start
Setting Up Action cable
First enable it by uncommenting the require for action cable Inside /config/application.rb . (this is typically on line 14)
require "action_cable/engine"
Add an action cable route to your /config/routes.rb
Rails.application.routes.draw do
# ActionCable Magic
mount ActionCable.server => '/cable'
...
# The rest of your routes
end
Create /config/cable.yml, this is what puts redis between your actioncable and postgres
development:
adapter: redis
test:
adapter: test
production:
adapter: redis
url: <%= ENV.fetch("REDIS_URL") { "redis://localhost:6379/1" } %>
channel_prefix: phase_4_project_guidelines_production
Create /app/channels/application_cable/channel.rb
module ApplicationCable
class Channel < ActionCable::Channel::Base
end
end
Create /app/channels/application_cable/connection.rb
module ApplicationCable
class Connection < ActionCable::Connection::Base
identified_by :current_user
def connect
self.current_user = find_verified_user
end
private
def find_verified_user
# ['_session_id'] is optional, only use it if you are using has_secure_password in your user model
user = User.find(cookies.encrypted['_session_id']['user_id'])
return user unless user.nil?
reject_unauthorized_connection
end
end
end
Adding a channel and some broadcasts
Channel
This is channel that your frontend will end up connecting to. They handle subscribing to and unsubscribing from the handshake data stream thingy.
Create /app/channels/things_channel.rb where thing is one of your models.
You will later use the thing model in a broadcast function, so make sure you have access to it.
things_channel.rb
class ThingsChannel < ApplicationCable::Channel
def subscribed
stop_all_streams
thing = Thing.find(params[:thing_id])
stream_for thing
end
# You can add a received function here,
# but I dont know what it does
def unsubscribed
stop_all_streams
end
end
In my case, I am going to make a channel for updating data related to a room.
rooms_channel.rb
class RoomsChannel < ApplicationCable::Channel
def subscribed
stop_all_streams
room = Room.find(params[:room_id])
stream_for room
end
# You can add a received function here,
# but I dont know what it does, I didn't need it.
def unsubscribed
stop_all_streams
end
end
Broadcasting data to the channel
Broadcasts take a Model and a hash, then send it to all users subscribed to that Model's channel. You can put broadcasts basically anywhere in your code.
ThingsChannel.broadcast_to(
thing, # an instance of your model, ex Thing.find(id)
hash # any data
)
In my case, I want to broadcast data to the relevant Room's channel when a new message created or deleted in it.
/app/controllers/messages_controller.rb:
# POST /messages
def create
room = Room.find(params[:room_id])
message = Message.new(text_content: params[:text_content])
message.user = @current_user
message.room = room
message.save!
# after successfully creating the message, update the room that it was in
broadcast room
render json: message, status: :created
end
# DELETE /messages/1
def destroy
message = Message.find(params[:id])
room = message.room
message.destroy
# after successfully yeeting the message, update the room that it was in
broadcast room
end
private
def broadcast(room)
# ActiveModelSerializers::SerializableResource.new(object).as_json
# returns the same thing sent by render json: object
RoomsChannel.broadcast_to(room, ActiveModelSerializers::SerializableResource.new(room).as_json)
end
This is a pretty lazy implementation, as I just always re-serialize the entire room object and send just that.
This has the benefit of needing less thought on how you broadcast data in the backend and on how you process the data you get on the frontend.
A more smart implementation would be something like this
# POST /messages
def create
...
# after successfully creating the message, tell the room to add it
RoomsChannel.broadcast_to(room, { new_message: message })
...
end
# DELETE /messages/1
def destroy
...
# after successfully yeeting the message, tell the room to remove it
RoomsChannel.broadcast_to(room, { remove_message: params[:id] })
...
end
This would have the benefit of being more resource friendly on both the frontend and backend. Its just a bit more work to implement.
I am going to be giving examples for the lazy broadcast method from now on.
React side:
Installing Action Cable Provider
Install JackHowa's fork of react-actioncable-provider, unless you are reading this sometime in the future like 2024, in that case take a look at the network graph to make sure you are using the most well maintained branch:
cd client
npm install --save @thrash-industries/react-actioncable-provider
Getting the Cable:
Inside your /client/src/index.js add some stuff to initialize a cableApp and pass cable down into your App.
import React from 'react';
...
import ActionCable from "actioncable";
const cableApp={}
cableApp.cable=ActionCable.createConsumer("/cable")
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App cable={cableApp.cable} />
</React.StrictMode>
);
Passing the cable down
Pass the Cable down through your app similar to how you would do with state, repeating down to the component you need the stuff in:
...
import Room from "./pages/Room";
export default function App({ cable }) {
...
return <div id="app" className="col centered">
...
<Route path="/room/:room_id" element={<Room cable={cable}/>}/>
...
</div>
}
Using the cable
Using the cable you passed down, you create a new connection like this, passing in callback functions for when you successfully connect, disconnect, and receive data
cable.subscriptions.create({ channel: "ThingsChannel", thing_id: thing_id },
{
connected: () => console.log("thing connected!"),
disconnected: () => console.log("thing disconnected!"),
received: (updatedRoom) => setRoomObj(updatedRoom)
})
Here is an example for a lazy implementation of that:
...
export default function Room({ cable }) {
const { room_id } = useParams()
// Add some state for your the latest data from the Channel
// optionally with defaults so your program doesn't die before its gotten data
const [roomObj, setRoomObj] = useState({messages:[]})
useEffect(() => {
// manually fetch to get the initial state
fetch(`/rooms/${room_id}`).then(r=>r.json().then(d=>setRoomObj(d)))
// subscribe to updates for room
cable.subscriptions.create({ channel: "RoomsChannel", room_id: room_id },
{
// optionally do some stuff with connects and disconnects
connected: () => console.log("room connected!"),
disconnected: () => console.log("room disconnected!"),
// update your state whenever new data is received
received: (updatedRoom) => setRoomObj(updatedRoom)
}
)}, [cable, room_id])
return <div id="room" className="col">
{/* Use your live data somehow */}
</div>
}
Conclusion
While this certainly isn't exhaustive, I hope its enough to get you started.
Feel free to ask questions in the comments.
Helpful links:
If you are deployed through nginx, this answer is helpful for allowing actioncable through
If you are deployed to a url, add this to your /config/environments/ development.rb or production.rb
config.action_cable.allowed_request_origins = ['https://inhumanecards.com']
Top comments (5)
If you cant launch redis, the port may be busy.
it defaults to port
6379so try running
npx kill-port 6379There's no need to change your database to postgresql for actioncable to work. You can use postgres as the backend for actioncable but I think most people use redis (as you have). Your application database and actioncable backend are completely separate settings.
Hi
Hi 👋🏼
Truly Aces 💫