Turbo Broadcasts

[piowit]

Turbo Broadcasts

Links:
https://www.rubydoc.info/gems/turbo-rails/Turbo/Broadcastable
https://www.hotrails.dev/turbo-rails/turbo-streams

Task 1: Adding broadcasts to columns

1. Update app/views/boards/show.html.erb

Goal: Connect the user to a WebSocket channel to receive real-time updates.
Action: Add a turbo stream tag at the top of the file.

New line:

   <%= turbo_stream_from dom_id(@board) %>

Explanation:
This line of code sets up a Turbo Stream subscription to a WebSocket channel identified by the name created by dom_id(@board). Whenever something is broadcasted to this channel, the updates will be automatically reflected in the user's view.

2. Update app/models/board_column.rb

Goal: Enable the BoardColumn model to broadcast changes to the respective WebSocket channel.
Actions:

• Include the ActionView::RecordIdentifier library to use the dom_id helper.
• Add a broadcast callback to the model.

Updated file:

class BoardColumn < ApplicationRecord
include ActionView::RecordIdentifier

# ... leave old code

broadcasts_to ->(board_column) { "board_#{board_column.board_id}" },
          target: ->(board_column) { "columns_board_#{board_column.board.id}" },
          inserts_by: :append

Explanation:
The broadcasts_to method sets up the broadcasting for the BoardColumn model. It specifies that changes to BoardColumn records will be broadcasted to a channel named after the associated board_id ({ "board_#{board_column.board_id}" }). The target specifies where in the DOM the updates will be inserted (it will look for html id), and inserts_by: :append means new columns will be appended to the list.

Task 2: Triggering columns broadcasts on card changes

1. Update app/models/card.rb

Goal: Ensure that updates to cards trigger broadcasts for the associated columns, keeping the UI in sync.
Action: Add a callback to touch and update associated columns when cards are modified.

Updated file:

class Card < ApplicationRecord
   include ActionView::RecordIdentifier

   # ... leave old code

   after_commit :touch_affected_board_columns

   private

   def touch_affected_board_columns
      if previous_changes[:board_column_id].present?
         board.board_columns.find_by(id: previous_changes[:board_column_id]&.first)&.touch
         board.board_columns.find_by(id: previous_changes[:board_column_id]&.last)&.touch
      else
         board_column.touch
      end
   end
end

Explanation:
The after_commit callback is used to trigger the touch_affected_board_columns method after any changes to a Card record are committed to the database. This method checks if the board_column_id has changed, and if so, it touches the old and new columns to update their timestamps. This, in turn, triggers the broadcast, ensuring that any changes to cards are reflected in the columns in real-time.