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: 5000development:  <<: *default  database: APPNAME_developmenttest:  <<: *default  database: APPNAME_testproduction:  <<: *default  database: APPNAME_production  username: APPNAME  password: <% ENV["APPNAME_DATABASE_PASSWORD"] %>

sudo apt install redis-server

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

redis-serverrails snpm start

require "action_cable/engine"

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

development:  adapter: redistest:  adapter: testproduction:  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  endend

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  endend

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  endend

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  endend

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

# POST /messagesdef 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: :createdend# DELETE /messages/1def destroy  message = Message.find(params[:id])  room = message.room  message.destroy  # after successfully yeeting the message, update the room that it was in  broadcast roomendprivatedef 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 /messagesdef create  ...  # after successfully creating the message, tell the room to add it  RoomsChannel.broadcast_to(room, { new_message: message })  ...end# DELETE /messages/1def destroy  ...  # after successfully yeeting the message, tell the room to remove it  RoomsChannel.broadcast_to(room, { remove_message: params[:id] })  ...end

cd clientnpm 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>}