ActionCable with React

actioncable.md

ActionCable

Lecture Videos and Code

• Lecture Video
• Lecture Code
• Frontend Codenames Code | Backend Codenames Code

Resources

• "Real-Time Rails: Implementing WebSockets in Rails 5 with Action Cable" by Sophie Debenedetto (Great for pushing to Heroku)
• "Using Action Cable With React" by Dakota Lilie
• "Creating a 'Drawing With Friends' Web App w/ Action Cable and Rails 5" by Dean Watts

Rishi's Notes

• To broadcast to all subscribers, you can run ActionCable.server.broadcast('feed_name', object) in your controller action
• The npm library to make this work in react is react-actioncable-provider
• Wrap your app in <ActionCableProvider url={'ws://<rails_url>/cable'}></ActionCableProvider>
• Add <ActionCable channel={ { channel: 'FeedChannel' } } onReceived={ callback } />
• Remember, once your UI is updating on messages from the socket, you no longer need to add those elements manually. Let the ActionCable component update the state, and make sure rails publishes to the socket when that change happens on the backend
• If you want to open different streams/sockets from the same rails app, you can stream_for [object], and you'll have to use broadcast_to in the controller. This means when you open the channel in react, your ActionCable component takes an extra prop, [object]_id