Learn Action Cable and React by building a real-time messaging application

// Backend
Ruby 2.6.6
Rails 6.1.3
ActionCable 6.1.3
Postgres
Redis
Rack-Cors
// Frontend
React (Anything could work but I enjoy the organizational aspect of components and hooks)
ActionCable
// Deploy Services
GitHub
Heroku
- Redistogo
Netlify
Rails new <project_name_api> --database=postgresql
// Users
rails generate model User name:string
rails generate controller User
// Rooms
rails generate model Room title:string
rails generate controller Room
// Messages
rails generate model Message content:string
rails generate controller Message
// Channels
rails generate channel Room
// Associations
rails generate migration AddUserToMessages user:references
rails generate migration AddRoomToMessages room:references
rails db:migrate
Messages will have a foreign key of the room_id and user_id. With this foreign key we can reference the room a message was sent to as well as the user that sent the message. We can further take advantage of this association in serializers to access attributes related to the association, but more on this later.
gem 'rack-cors' // Add this gem to the Gemfile
bundle install // Run this command in the console to install
I use http://localhost:3000 because this is will be the frontend url. Also not it is the http protocol not to be confused with the secure https that is usually seen in URLs.
rails db:seed
cd .. // Go back to the root project directory
npx create-react-app client
chatapp
--chatapp_api
// Rails backend stuff
--client
// React frontend stuff
App.js will have a div to hold messages, the H1 is a placeholder. The input and the button.
post 'create', to: 'message#create'
let connection = {}
function updateMessages(data) {
setMessages([...messages, data])
}
const displayMessages = messages.map((message, index) => {return (<div key={index} className="message">
<div className="text"> {message.message} </div>
<div className="author"> {message.user} </div>
</div>
)
})

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store