StimulusReflex

Actual demonstrations will show up in this space, soon. In the meantime, verify that your installation was successful:

Last Refresh: <%%= Time.now %>

Clicked <%%= session[:count] || 0 %> times

CableReady

CableReady lets you control one or many clients from the server in real-time.

Everything in CableReady revolves around its 38+ operations, which are commands that can update content, raise events, write cookies and even play audio. A group of one or more operations is called a broadcast. Broadcasts follow a simple JSON format.

We're going to go through the main ways developers use CableReady with some live demonstrations and code samples. We recommend that you open the controller class and ERB template for this page to follow along.

Subscribe to a channel to receive broadcasts

WebSockets is the primary way most Rails developers use CableReady, via the cable_ready method.

Use the cable_ready_stream_from helper to create a secure Action Cable subscription:

cable_ready_stream_from :example_page <%%= cable_ready_stream_from :example_page %>

Every user looking at a page subscribed to the :example_page channel will receive the same broadcasts.

You can call cable_ready pretty much anywhere in your application. Try it in your rails console now:

include CableReady::Broadcaster cable_ready[:example_page].text_content("#cable_ready_stream_from_output", text: "Hello from the console!").broadcast

Any message you send will appear in the #cable_ready_stream_from_output DIV below — even if you open multiple tabs.

While it's easy to create your own custom Action Cable channels, cable_ready_stream_from will be the first tool you reach for, because it doesn't require any additional code.

Specify Active Record models or compound qualifiers to go full-ninja: 🥷

cable_ready_stream_from current_user
cable_ready_stream_from @post, :comments

These examples barely scrape the surface of what's possible. Be sure to check out the Stream Identifiers chapter.

Updatable: magically update the DOM when server-side data changes

The updates_for helper allow you to designate sections of your page that will update automatically with new content when an Active Record model changes. 🤯

It's difficult to demonstrate this feature without creating a temporary model and a migration; a road to hell, paved with good intentions. However, you likely have these models (or similar) in your application. Uncomment, tweak if necessary and follow along!

First, call enable_updates in your model. You can use it on associations, too.

class User < ApplicationRecord enable_updates has_many :posts, enable_updates: true end class Post < ApplicationRecord belongs_to :user end

By default, updates will be broadcast when any CRUD action is performed on the model. You can customize this behavior by passing options such as on: [:create, :update] or if: -> { id.even? }.

Next, use the updates_for helper to create one or more containers that will receive content updates.

<%= cable_ready_updates_for current_user do %> <%= current_user.name %> <% end %>

Update the current user in Rails console, and your page instantly reflects the new name. 🪄

Specify the class constant to get updates when records are created or deleted:

<%= cable_ready_updates_for User do %> <ul> <% @users.each do |user| %> <li><%= user.name %></li> <% end %> </ul> <% end %>

Update when new posts are created by the current user:

<%= cable_ready_updates_for current_user, :posts do %> <ul> <% @posts.each do |post| %> <li><%= post.title %></li> <% end %> </ul> <% end %>

One major advantage of the Updatable approach is that each visitor sees personalized content. This is difficult with a WebSockets broadcast, where every subscriber receives the same data.

Instead, Updatable notifies all subscribers that an update is available, prompting each client to make a fetch request and refresh sections of the page.

There's more to Updatable than what's covered here... but, not much more. It really is that simple.

If you're finished with this example page and resource controller, you can destroy them:

rails destroy stimulus_reflex example

As always, please drop by the StimulusReflex Discord server if you have any questions or need support of any kind. We're incredibly proud of the community that has formed around these libraries, and we discuss everything from JavaScript/Ruby/CSS to View Component/Phlex to databases and CRDTs. We'd love to hear what you're building with StimulusReflex and CableReady.

You can find the documentation for StimulusReflex here and CableReady here.