Building a Real Time Scoreboard with Ruby on Rails and CableReady18 Aug 2021
The release of Hotwire in late 2020 brought attention to a growing interest within the Rails community in building modern, reactive Rails applications without needing the complexity of an API + SPA.
Although Hotwire’s Turbo library garnered a lot of attention, the Rails community has been working for years to improve the toolset we have to build modern, full-stack Rails applications. Turbo isn’t the first attempt at giving Rails developers the tools they need.
Create great real-time user experiences by triggering client-side DOM changes, events and notifications over ActionCable web sockets
Source: CableReady Welcome
When we’re finished, our scoreboard will look like this:
This article assumes that you’re comfortable working with Rails but you won’t need any prior knowledge of CableReady or ActionCable to follow along. If you’ve never used Rails before, this article isn’t the best place to start.
Let’s dive in!
First, let’s create our Rails application, pull in CableReady and Stimulus, and scaffold up a Game model that we’ll use to power our scoreboard.
Although Redis is not technically required in development for CableReady, we’ll use it and hiredis to match the installation guidance from CableReady.
Update your Gemfile with these gems:
bundle install from your terminal.
Finally, we need to update our ActionCable configuration in config/cable.yml to use Redis in development:
With the application setup complete, we’ll build the basic layout for our scoreboard next.
Setup the scoreboard view
First, update the games show view:
Here we’re inlining a couple of styles to make the scoreboard a little more legible and rendering a
game_detail partial that doesn’t exist yet. Add that next, from your terminal:
And fill it in with:
Some more inline styles (we’ll remove these later!) with some standard erb to render each team’s name and score.
At this point, we can go to localhost:3000/games and create a game, and then go to the game show page to view it.
We don’t have real-time updates in place yet, we’ll start building that with CableReady next.
Create channel and controller
Our first step to delivering real-time updates is to add a channel to broadcast updates on. When a user visits a game’s show page, they’ll be subscribed via a WebSocket connection to an ActionCable channel.
Without a channel subscription, the CableReady broadcasts we’ll be sending soon won’t be received.
To create a channel we can use the built-in generator:
This will create a few files for us. For the purposes of this article, we’re interested in the
game_channel.rb file created in
Open that file and update the subscribed method:
subscribed method is called each time a new Consumer connects to the channel.
When no game is found, the subscription request will be rejected.
With the channel built, next we need to allow consumers to subscribe to the channel so they can receive broadcasted updates.
The channel generator we ran automatically creates a file at
To do that, we’ll create a new Stimulus controller, from the terminal:
And fill it in with:
This Stimulus controller is very close to
game_channel.js created by the channel generator, with a little Stimulus and CableReady power added.
Each time the Stimulus controller connects to the DOM, we create a new consumer subscription to the
GameChannel, passing an
id parameter. When the Stimulus controller disconnects from the DOM, the subscription is removed.
When a broadcast is received by the consumer, we use CableReady to
perform the requested operations.
Before the Stimulus controller will work, we need to update
consumer.js (part of the
ActionCable package) and attach consumer to the Stimulus Application object.
controllers/index.js with these two lines of code to accomplish that:
Read more about why this is the right way to combine ActionCable and Stimulus here.
With our Stimulus controller built, we can update the
game_detail partial to connect the controller to the DOM.
Here we accomplished a lot with one change to the parent div:
- We attached the Stimulus controller to the parent div
- Set the id value that the Stimulus controller uses to send the id param in the channel subscription request
- Set the id of the div to the dom_id of the rendered game instance. We’ll use this id in the CableReady broadcast we’ll generate in our model, up next.
With all of this in place, visit a game show page and check the Rails server logs. If everything is setup correctly, you should see log entries that look like this after the show page renders:
Broadcast game updates from the model
With the channel built and consumers subscribing to updates, our last step to real-time scoreboard updates is sending a broadcast each time a game is updated.
The simplest way to do this is to broadcast a CableReady operation in an
after_update callback in the
To make this possible, we first need to include the CableReady
Broadcaster in our models and delegate calls to
render to the
ApplicationController, as described in the (excellent) CableReady documentation.
app/models/application_record.rb as follows:
And then update
Here we’ve added an
after_update callback to trigger a CableReady
broadcast. The broadcast is sent on the
GameChannel, queuing up a
morph operation targeting the current game instance, and rendering the existing
With this callback in place, our scoreboard should now update in real-time.
You can test this yourself by heading to a game show page and then opening your Rails console and running something like
You should see the score update in the browser window immediately after submitting the update command in the Rails console.
While this works pretty well, our scoreboard really only needs to receive updates when the score changes, and it would be helpful to provide a little feedback to the user when the score changes.
Let’s finish up this article by updating our implementation to broadcast only on score changes, and to animate newly updated scores.
To start, we’ve got some clunky inline styling that makes our erb code pretty hard to follow. Let’s move those styles out of the HTML and into a stylesheet. From your terminal:
And add the below to
To animate the scores, we’re just using a simple CSS swing animation, copy/pasted directly from the always handy Animista.
Finally import that new stylesheet into the webpack bundle:
We want to be able to update scores individually. To enable that, we’ll move the score portion of the scoreboard into a dedicated partial that we can then render in a broadcast.
From your terminal:
And fill that in with:
Then update the
game_detail partial to remove the inline styles and to use our new
Finally, we’ll update the callback in the
Here we’ve updated our callback to check for changes to the two attributes we care about (
away_team_score). When either attribute is changed, a broadcast is triggered from
update_score to replace the target div’s contents with the content of the
We use the
outer_html CableReady operation in this case to completely replace the DOM content and ensure that our animation triggers when the new score content enters the DOM.
And with that in place, we can now see our isolated, animated real-time updates:
CableReady (and StimulusReflex, which we’ll explore in a future article) are mature, powerful tools that allow Rails developers to create modern, reactive applications while keeping development time and code complexity low. CableReady also plays well with most of Turbo, and can fit seamlessly into a Hotwire-powered application.
Start your journey deeper into CableReady and reactive Rails applications with these resources:
- Read the CableReady documentation
- Read the StimulusReflex documentation
- Read the Hotwire documentation
- Talk to the helpful folks on the StimulusReflex discord
As always, thanks for reading!