learn-co-curriculum / actioncable-starter-app

Resources

• react-actioncable-provider how to blog, start here

• creating-a-drawing-with-friends-web-app-w-action-cable-and-rails-5

• Heroku and ActionCable

• Shameless Plug - sockets with phoenix and react hooks

• Gist where I break down how something like the react-actioncable-provider library is made

"Hidden Names"

App: http://hidden-names.herokuapp.com/

• Frontend Code
• Backend Code

Lecture Notes

Backend

• handshake route mount ActionCable.server => '/cable'

• create channel rails g channel feed

class FeedChannel < ApplicationCable::Channel
  def subscribed
    stream_from "my_feed"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end
end

• broadcast ActionCable.server.broadcast('my_feed', tweet)

Frontend

• wrap the app in the provider

import { ActionCableProvider } from 'react-actioncable-provider';


<ActionCableProvider url={'ws://localhost:3001/cable'}>
  <App />
</ActionCableProvider>

• in the component

	<ActionCableConsumer
    channel={{ channel: 'FeedChannel' }}
    onReceived={tweet => {
      console.log('tweet');
      this.addTweet(tweet);
    }}
  />