Turbo Streams（WebSocket）で要素を置き換える

Turbo Streams（WebSocket）を使って id で指定した HTML 要素を置き換えます。
別クライアントの BAR も自動で置き換わることを確認したいと思います。

 

環境
Ruby 3.4.2
Rails 8.0.2

手順
アプリを生成します。

rails new okikae
cd okikae

確認用の画面とコントローラを生成します。

bin/rails g controller home index

turbo_stream_from でストリーム :foo を受信します。
id が :bar の要素を置き換える想定です。
link_to 要素のクリックで home コントローラの replace_bar アクションを呼びます。

app/views/home/index.html.erb

<%= turbo_stream_from :foo %>

<textarea>この文字列は影響を受けない。</textarea>

<div id="bar">BAR</div>

<%=
  link_to "BARを置き換える。",
  home_replace_bar_path,
  data: { "turbo-method": :post }
%>

replace_bar アクションでストリーム :foo を使って要素 :bar を置き換えます。
今回はテンプレートファイルではなく引数 html に置き換える内容を設定しました。

app/controllers/home_controller.rb

def replace_bar
  Turbo::StreamsChannel.broadcast_replace_to(
    :foo,
    target: :bar,
    html: "<div id=\"bar\">置き換えました。</div>"
  )
end

root ルーティングに home#index を設定します。
bar を置き換えるルーティングを追加します。

config/routes.rb

Rails.application.routes.draw do
  get "home/index"
  post "home/replace_bar"
  root "home#index"
end

アプリサーバを起動します。

bin/rails server

「BARを置き換える。」リンクをクリックすると別のウィンドウの要素も置き換わりました。

以上です。

▼この記事がいいね！と思ったらブックマークお願いします