Rails 7中turbo_stream_from广播正常但视图不更新问题

问题背景 #

基于Rails 7.0.4实现turbo_stream_from功能，日志显示广播、WebSocket传输均正常，但页面视图始终不更新。Redis已正确安装运行，且多次重启应用、控制台及Redis，仍未解决问题。

相关代码与日志 #

视图与模型代码

• show.html.erb

<%= turbo_stream_from "documents" %>

• document.rb

class Document < ApplicationRecord
  after_update_commit -> { broadcast_update_to "documents", partial: "documents/summary", locals: { document: self }, target: "document_#{self.id}" }
end

• documents/_summary.html.erb

<p class="mb-3 text-sm text-slate-500"><%= pluralize(time_to_read(document.summary), "minute") %> &bull; <%= word_count(document.summary) %> words</p>
<%= markdown document.summary %>

控制台执行日志

irb(main):004:0> document.touch
  TRANSACTION (0.6ms)  BEGIN
  Document Update (1.9ms)  UPDATE "documents" SET "updated_at" = $1 WHERE "documents"."id" = $2  [["updated_at", "2023-01-07 18:24:21.823597"], ["id", "05feddd8-2fb7-4432-9eda-7db07616d613"]]
  TRANSACTION (0.3ms)  COMMIT
  Rendered documents/_summary.html.erb (Duration: 0.6ms | Allocations: 96)
[ActionCable] Broadcasting to documents: "<turbo-stream action=\"append\" target=\"document_05feddd8-2fb7-4432-9eda-7db07616d613\"><template><p class=\"mb-3 text-sm text-slate-500\">1 minute &bull; 38 words</p>\n<p>-The study of a 2,000-year-old city wall made of concrete reveals the sustainability of the Roman&#39;s use of quicklime i...
=> true

服务器日志

12:24:55 web.1    | Started GET "/cable" [WebSocket] for ::1 at 2023-01-07 12:24:55 -0600
12:24:55 web.1    | Successfully upgraded to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: Upgrade, HTTP_UPGRADE: websocket)
12:24:55 web.1    | Turbo::StreamsChannel is transmitting the subscription confirmation
12:24:55 web.1    | Turbo::StreamsChannel is streaming from documents
12:25:17 web.1    | Turbo::StreamsChannel transmitting "<turbo-stream action=\"append\" target=\"document_05feddd8-2fb7-4432-9eda-7db07616d613\"><template><p class=\"mb-3 text-sm text-slate-500\">1 minute &bull; 38 words</p>\n<p>-The study of a 2,000-year-old city wall made of concrete reveals the sustainability of the Roman&#39;s use of quicklime in... (via streamed from documents)

页面渲染后的Turbo标签

<turbo-cable-stream-source channel="Turbo::StreamsChannel" signed-stream-name="ImRvY3VtZW50cyI=--a3f0177252c55b1545ca8ef5c030cc9ed23496182d09168cd9ef3441d9510d22"></turbo-cable-stream-source>

排查与修复步骤 #

1. 确认目标DOM元素存在
   日志显示广播的Stream动作是append，目标为document_05feddd8-2fb7-4432-9eda-7db07616d613，但页面中必须存在这个ID的元素才能生效。检查show.html.erb，确保渲染摘要时外层有对应容器：

   <!-- 在show.html.erb中添加目标容器 -->
   <div id="document_<%= @document.id %>">
     <%= render "documents/summary", document: @document %>
   </div>
   <%= turbo_stream_from "documents" %>
   

2. 修正Turbo Stream动作匹配
   你调用的是broadcast_update_to，但日志输出的动作却是append，这明显不符合预期。建议替换为更明确的broadcast_replace_to方法，确保动作是替换而非追加：

   # 修改document.rb中的回调
   after_update_commit -> { 
     broadcast_replace_to "documents", 
       partial: "documents/summary", 
       locals: { document: self }, 
       target: "document_#{self.id}" 
   }
   

3. 验证Turbo.js加载状态
   在浏览器控制台输入Turbo，若返回undefined说明Turbo未正确加载。确保application.js中已导入Turbo：

   import "@hotwired/turbo-rails"
   

4. 检查浏览器控制台报错
   打开浏览器开发者工具的「控制台」标签，查看是否有JavaScript异常，比如Turbo处理Stream时的解析错误或DOM操作失败。

5. 清除浏览器缓存
   旧的静态资源缓存可能导致Turbo功能异常，强制刷新页面（Ctrl+F5）或清除缓存后重新测试。

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