A quick demo was done at Le Wagon Melbourne batch#295. Starting from scratch using lewagon/rails-templates, created by the Le Wagon coding bootcamp team.

Onboarding:

  bundle install
  yarn install
  rails db:create db:migrate db:seed

Using the app:

• rails s
• Go to http://localhost:3000/
• Open http://localhost:3000/ again on another window or a private browser window
• Login on one side as: email: [email protected], password: 123456
• Login on the other as: email: [email protected], password: 123456
• Clicking the buttons broadcasts a message to the relevant users.

Starting from the official Le Wagon templates (lewagon/rails-templates).

Following the commit history on this repo gives a pretty good visual representation of the steps. But I'll go over some details and reasoning in here.

• Check the diff on cable.yml for the needed changes.
  • Async is the default adapter for ActionCable, but I prefer using Redis, which is an easy setup (check the Background Jobs lecture on Kitt if you're missing it) and it's as well the same adapter we're using in production anyway.
  • Also, notice that the production URL for redis is updated to use the default Redis Cloud addon on Heroku.
• Install ActionCable using yarn: yarn add @rails/actioncable.
  • Don't mind the diffs on package.json and yarn.lock those are going to be updated by the yarn command.
  • The template for this demo uses Rails 5.2.3, which still defaults to the sprockets JS asset pipeline. But I recommend using the modern ActionCable 6.0 version via webpack even on Rails 5.

• Just follow the diff.
  • The default Rails way for authenticating the user via ActionCable uses encrypted cookies, but warden (which devise uses) has a different approach. These lines should give you seamless access to the current_user helper on your channels.

• Run rails g channel <MY_CHANNEL_NAME>
• Update the #subscribed method with a stream option.
  • In the current example, we're streaming FOR a given user. You can replace this with any object. Alternatively, you can stream FROM a given string. For the difference between stream_for and stream_from, check this asnwer. Ideally, you want to use stream_for since you want to rely on domain objects and not on strings.

• Create a consumer app/javascript/channels/consumer.js following the example
  • You want this on a separate file so it can be used by multiple channels.
• Create the client-side channel app/javascript/channels/my_channel.js. Read the change log on the file for more info.
  • You might want to have your received callback like this for later testing:

    received: (data) => {
      alert(data)
    }

    That's what's going to be executed when a new broadcast is received by the client.
• Call your channel subscription on your application.js. You can use this as an example.
  • Very rarely you'll want this call to be made in every page as it's done in here. Think about what you're creating and tailor it to your needs. If it's a chat room, it should only be called when the chat component is initialized. Etc...

At this point the setup is done. If you're using the same example as the DEMO (check the latest 2 commits) you're subscribing to the currently logged in user everytime (meaning every user will be subscribed to their own channel). A subscribed browser session should then be able to receive broadcasts from their subscribed channels, given they are streaming from the same object.

Broadcasting is done by calling (you can do this from rails c):

# Assuming @user is assigned to an user instance
MyChannel.broadcast_to(@user, "Here's a message!")

# You can, and most likely will, also send hashes or arrays
MyChannel.broadcast_to(@user, { type: "alert", message: "Here's a message!" }) # Curly braces for clarity. Avoid them.

This will trigger the received callback on your client-side file.

This is a quick demo designed to showcase ActionCable to Le Wagon students and hopefully inspire you to use it in your projects. It's more practical than abstract.

If you have any questions or suggestions for improvements feel free to open an issue or contact me on Le Wagon slack @caioertai or Caio Andrade

https://guides.rubyonrails.org/action_cable_overview.html