Skip to content

Getting Started with Rails 7 Episode 22: Broadcast Comment Changes to the Article with Turbo

By

This is the 22nd video in the Getting Started with Rails 7 series. In this video Mike uses Turbo Streams from the Hotwire front-end framework (included by default in new Rails applications) to broadcast changes (create, update, destroy) to the collection of comments for an article in real-time.

In order for the Turbo broadcast to work, the following criteria must be
in place:

  • Add broadcasts_to in addition to belongs_to in the comment model
  • Articles show needs a dom_id for the article (added)
  • The comments collection needs to be in a DOM element with the ID of
    "comments"
  • Each comment needs an element with its dom_id

This video covers:

  • 00:00:10 Introduction
  • 00:04:10 Write failing browser tests for article
  • 00:07:50 Add broadcasts_to :article in the Comment model
  • 00:08:41 Modify the views to include the turbo_stream_from tag
  • 00:10:18 Troubleshoot test failure
  • 00:13:42 Add article dom_id for article to show action
  • 00:15:29 Add div with id="comments" around the comments collection rendering. Tests now passing.
  • 00:16:35 Demonstrate the Turbo Stream behavior using two browsers
  • 00:19:53 Review, commit and push the code

The code for this series is open source and available on GitHub. View the commit for this video here.

Leave a Reply