Rails7中Turbo与Action Cable的重复渲染（竞态条件）问题咨询

问题本质 #

Turbo Streams的广播默认不会自动排除触发该广播的客户端——当你通过create.turbo_stream.erb在本地完成待办项追加后，after_create回调里的广播会再次给当前客户端推送相同的追加指令，导致列表出现重复元素。而且你没法直接用广播替换本地Turbo Stream模板，因为dropzone、sortable这类JS依赖元素的特定位置渲染。

三种可行解决方案 #

1. 用Turbo的skip标记过滤本地操作 #

这是Turbo官方提供的轻量方案，通过给本地操作加唯一标识，让广播跳过该标识对应的客户端：

• 在本地Turbo Stream模板中添加自定义action：

<%# app/views/todos/create.turbo_stream.erb %>
<%= turbo_stream.append 'todoList', partial: 'todo', locals: { todo: @todo }, action: :local_todo_append %>

• 在after_create回调的广播里指定skip参数：

# app/models/todo.rb
after_create_commit do
  Turbo::StreamsChannel.broadcast_append_to(
    'todo-stream',
    target: 'todoList',
    partial: 'todo',
    locals: { todo: self },
    skip: :local_todo_append
  )
end

2. 基于用户/会话标识精准排除 #

如果你的应用有用户认证体系，可以通过用户ID过滤广播对象：

• 修改Turbo Streams频道的订阅逻辑，区分当前用户的频道：

# app/channels/turbo/streams_channel.rb
class Turbo::StreamsChannel < ActionCable::Channel::Base
  def subscribed
    # 订阅公共频道，但排除当前用户的会话
    stream_from "todo-stream", coder: ActiveSupport::JSON do |message|
      next if message["user_id"] == current_user.id.to_s
      transmit message
    end
  end
end

• 广播时带上触发用户的ID：

after_create_commit do
  Turbo::StreamsChannel.broadcast_append_to(
    'todo-stream',
    target: 'todoList',
    partial: 'todo',
    locals: { todo: self },
    user_id: current_user.id # 若模型无法直接获取current_user，可通过控制器传递参数
  )
end

3. 前端兜底：检查元素是否已存在 #

针对复杂JS依赖的场景，在广播的Turbo Stream里加入前端判断，避免重复追加已存在的元素：

• 给待办项元素设置唯一ID：

<%# app/views/todos/_todo.html.erb %>
<div id="<%= dom_id(todo) %>" class="todo-item">
  <%= todo.content %>
</div>

• 创建专门的广播模板，加入存在性检查：

# app/models/todo.rb
after_create_commit do
  Turbo::StreamsChannel.broadcast_render_later_to(
    'todo-stream',
    partial: 'todos/broadcast_append',
    locals: { todo: self }
  )
end

<%# app/views/todos/_broadcast_append.html.erb %>
<%= turbo_stream.append 'todoList', partial: 'todo', locals: { todo: todo } unless document.getElementById(dom_id(todo)) %>

方案选择建议 #

• 优先选方案1，最贴合Turbo的设计，实现成本最低；
• 有用户系统的话用方案2，能精准控制广播范围；
• 复杂JS场景下加方案3做兜底，确保不会出现重复渲染。

内容的提问来源于stack exchange，提问作者JoshL