Using Action Cable with React and Rails.

- # sqlite3 as database for Active Record - gem 'sqlite3', '~> 1.4' + # Use postgresql as the database for Active Record + gem 'pg', '~> 1.1' 

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"] %> 

sudo apt install redis-server 

# Use Redis adapter to run Action Cable in production gem 'redis', '~> 4.0' 

redis-server rails s npm start 

require "action_cable/engine" 

Rails.application.routes.draw do # ActionCable Magic mount ActionCable.server => '/cable' ... # The rest of your routes end 

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 

module ApplicationCable class Channel < ActionCable::Channel::Base end end 

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 

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 

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 

ThingsChannel.broadcast_to( thing, # an instance of your model, ex Thing.find(id) hash # any data ) 

# 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 

# 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 

cd client npm install --save @thrash-industries/react-actioncable-provider 

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> ); 

... 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> } 

cable.subscriptions.create({ channel: "ThingsChannel", thing_id: thing_id }, { connected: () => console.log("thing connected!"), disconnected: () => console.log("thing disconnected!"), received: (updatedRoom) => setRoomObj(updatedRoom) }) 

... 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> } 

config.action_cable.allowed_request_origins = ['https://inhumanecards.com']