— programming, react, ruby, rails, redux — 2 min read
Note: all the code for this post can be found here(frontend) and here (backend/rails)
Let's explore how to integrate Rails ActionCable functionality (WebSockets) with a basic chat application using React and Redux (via Redux Toolkit). I'm only including the most relevant snippets of code, please refer to the code in the repo for the entire context.
Since I'm using rails as an API endpoint, I'll create the app using the --api
flag. This will prevent views from being generated when we call any of the rails generate
commands, hence avoiding unnecessary code. Additionally, we'll use postgresql
as the DB.
1rails new chat-app-backend-rails --api -database=postgresql
Since we're building our frontend as a separate standalone project, potentially deployed on a different server than our API, we need to allow for cross domain calls. For that, we first add rack-cors
on the Gemfile
:
1gem 'rack-cors'
And then configure it on config/initializers/cors.rb
.
1Rails.application.config.middleware.insert_before 0, Rack::Cors do2 allow do3 # In a prod app you'll restrict to specific origin(s).4 # for this will just allow from any.5 origins '*'6
7 resource '*',8 headers: :any,9 methods: %i[get post put patch delete options head]10 end11end
We then bundle install
to install the gem we added.
Our app will simply have User and Messages. Let's create the models for that:
1rails generate model User2rails generate model Message
Our User
will only have username
and status
this is what the migration looks like:
1class CreateUsers < ActiveRecord::Migration[7.0]2 def change3 create_table :users do |t|4 t.string :username5 t.string :status6 t.timestamps7 end8 end9end
And for the Message
:
1class CreateMessages < ActiveRecord::Migration[7.0]2 def change3 create_table :messages do |t|4 t.string :content5 t.timestamps6 end7 end8end
Our models have a 1-to-many
relationship (1 user has many messages). We'll capture that by adding has_many :messages
on the User
and belongs_to
on Message
.
1class User < ApplicationRecord2 has_many :messages, dependent: :destroy3end4
5class Message < ApplicationRecord6 belongs_to :user7end
Lastly, we'll add a migration that adds the reference (user_id
) to messages.
1rails generate migration AddBelongToMessages
With this code:
1class AddBelongToMessages < ActiveRecord::Migration[7.0]2 def change3 add_belongs_to :messages, :user4 end5end
Note: We could have added this when we first created the Message
migration.
Finally, we run the migrate
command:
rails db:migrate
Next, let's add all the routes we'll be using and mount the ActionCable (WebSocket) server:
1resources :messages, only: %i[index]2 resources :users, only: %i[index create] do3 post 'add_message'4 post 'change_status'5 end6 mount ActionCable.server => '/cable'
That's it for the setup. We're now ready to start adding some functionality. Let's start creating the messages
and users
channels. We'll use these to listen for messages posted on the chat and for users joining.
1rails generate channel messages2rails generate channel users
In both generated channels, we'll simply change the subscribed
method to specify where we're streaming from:
1class MessagesChannel < ApplicationCable::Channel2 def subscribed3 stream_from 'message_channel'4 end5
6 def unsubscribed; end7end8
9class UsersChannel < ApplicationCable::Channel10 def subscribed11 stream_from 'user_channel'12 end13
14 def unsubscribed; end15end
Now we can use the ActionCable.server.broadcast()
method to broadcast to all the subscribers on those channels. We want to notify to all subscribers of the user_channel
when a user joins the chat. We also want to notify the message_channel
after sending messages. Let's do both of those things on the UsersController
:
1class UsersController < ApplicationController2 def index3 users = User.all4 render json: users5 end6
7 def create8 user = User.new(user_params)9 ActionCable.server.broadcast('user_channel', user) if user.save10 render json: user11 end12
13 def add_message14 user = User.find(params[:user_id])15 message = params[:message]16 created_message = user.messages.create(content: message)17 ActionCable.server.broadcast('message_channel', created_message) if user.save18 head :ok19 end20
21 def change_status; end22
23 def user_params24 params.require(:user).permit(:username, :status)25 end26end
For completion, we also have our MessagesController
that returns all messages for the users who just joined the chat (that way they can see what was said before them joining).
1class MessagesController < ApplicationController2 def index3 messages = Message.all4 render json: messages5 end6end
With that, we have all the API calls we need to integrate with our frontend:
1rails routes | grep users2
3user_add_message POST /users/:user_id/add_message(.:format)4
5user_change_status POST /users/:user_id/change_status(.:format)6
7users GET /users(.:format)8
9POST /users(.:format) users#create10
11
12
13rails routes | grep messages14
15messages GET /messages(.:format)
For the frontend, I'll be using react with redux and typescript. Let's create the app:
1npx create-react-app chat-app-ui --template redux-typescript
This template will give you an application skeleton that uses redux with toolkit already setup (e.g., a sample reducer, a configured store, etc.).
I'll start by creating a /features/users
folder. In there I'll add all the api
and reducer
functionality. In there I created a usersAPI
with all the backend calls related to users. For example, this is how we're adding a new user to the chat:
1export const addNewUser = async (user: UserType): Promise<any> => {2 const res = await fetch("http://localhost:3090/users", {3 method: "POST",4 headers: {5 "Content-Type": "application/json",6 },7 body: JSON.stringify(user),8 });9
10 return await res.json();11};
And this is how we handle a user sending a message:
1export const sendUserMessage = async (2 data: sendUserMessageDataType3): Promise<any> => {4 const res = await fetch(5 `http://localhost:3090/users/${data.user.id}/add_message`,6 {7 method: "POST",8 headers: {9 "Content-Type": "application/json",10 },11 body: JSON.stringify({12 user_id: data.user.id,13 message: data.message.content,14 }),15 }16 );17
18 return await res.json();19};
We will use these API calls indirectly via Redux thunks.
When working with async calls in the frontend, we usually make the async call and if it succeeds, we update the application state (e.g., Redux state) with the results. With thunks, the process is the same, but all is handled in the reducer itself. We only have to dispatch an action and after is fulfilled (e.g., call succeeded) then we update the state.
This is what a thunk looks like for adding a new user and for sending messages:
1...2export const addUserAsync = createAsyncThunk(3 'users/addUser',4 async (user: UserType) => {5 const response = await addNewUser(user);6 return response;7 }8)9
10export const sendMessageAsync = createAsyncThunk(11 'users/sendMessage',12 async (data: sendUserMessageDataType) => {13 const response = await sendUserMessage(data);14 return response;15 }16)17...
We then configure them on the extraReducers
section of the createSlice()
.
1...2 extraReducers: (builder) => {3 builder4 .addCase(sendMessageAsync.fulfilled, (state, action) => {5 let updatedUser: UserType = state.value.filter(user => user.id === action.payload.user.id)[0];6 updatedUser.messages.push(action.payload.message);7 state.value = state.value.map(user => user.id !== updatedUser.id ? user : updatedUser)8 })9
10 .addCase(addUserAsync.fulfilled, (state, action) => {11 state.value.push(action.payload);12 localStorage.setItem("currentUser", JSON.stringify(action.payload));13 state.userLoggedIn = true;14 })15 },16...
You can review the entire reducer here.
To call Rails's ActionCable
we have to install the actioncable
package.
1npm install --save actioncable
This is how we're using actioncable
in the Messages.tsx
to subscribe to new messages posted:
1import { useAppDispatch, useAppSelector } from "../app/hooks";2import { addMessage, selectMessages } from "../features/messages/messagesSlice";3import { MessageType } from "../types";4import Message from "./Message";5import ActionCable from "actioncable";6import { useEffect } from "react";7
8function Messages() {9 const messages: MessageType[] = useAppSelector(selectMessages);10 const cable = ActionCable.createConsumer("ws://localhost:3090/cable");11 const dispatch = useAppDispatch();12
13 const createSubscription = () => {14 cable.subscriptions.create(15 { channel: "MessagesChannel" },16 { received: (message) => handleReceivedMessage(message) }17 );18 };19
20 const handleReceivedMessage = (message: any) => {21 dispatch(addMessage(message));22 };23
24 useEffect(() => {25 createSubscription();26 }, []);27
28 return (29 <div className="">30 {messages.map((message) => (31 <Message key={message.id} message={message} />32 ))}33 </div>34 );35}36
37export default Messages;
We use the same approach on the Users.tsx to subscribe to new users joining the chat.
With everything configured and styled, this is what the entire chat application looks like:
With that, we have an app using WebSockets with React, Redux, and Rails.