Turbo Streams与自定义Action Cable Channel连接问题求助

尝试在ERB视图中配置Turbo Streams与自定义Action Cable Channel连接，但无法建立连接。已确认Redis运行正常，通过Stimulus控制器使用相同流标识符可成功连接，推测问题出在视图部分，且控制器中@image实例变量设置正确。

相关代码 #

初始视图代码 #

<%= turbo_stream_from "image_viewer_#{@image.id}", channel: "ImageViewerChannel", data: {image_id: @image.id} %>
<%= turbo_frame_tag "connected_users" do %>
  <%= render 'connected_users', count: 0 %>
<% end %>

自定义Channel代码 #

class ImageViewerChannel <  ApplicationCable::Channel
  extend Turbo::Streams::Broadcasts, Turbo::Streams::StreamName
  include Turbo::Streams::StreamName::ClassMethods

  @@connected_users_count = 0

  def subscribed
    @@connected_users_count += 1
    @image_id = params[:image_id]
    stream_from "image_viewer_#{@image_id}"
    broadcast_connected_users_count
  end

  # 省略其他代码

  private

  def broadcast_connected_users_count
    ActionCable.server.broadcast(
      "image_viewer_#{@image_id}",
      Turbo::StreamsChannel.broadcast_replace_to(
        "connected_users",
        target: "connected_users",
        partial: "images/connected_users",
        locals: { count: @@connected_users_count }
      )
    )
  end
end

调试信息 #

简化后的视图代码（show.html.erb） #

<%= turbo_stream_from "image_viewer_#{@image.id}", channel: "ImageViewerChannel", data: {image_id: @image.id} %>
<%= tag.div id: :connected_users do %>
  <%= render "images/connected_users", count: 0 %>
<% end %>

控制器代码 #

def show
  @image = Image.find(params[:id])
end

生成的完整HTML输出 #

<main class="container mx-auto mt-28 px-5 flex">
  <turbo-cable-stream-source channel="ImageViewerChannel" data-image-id="15" signed-stream-name="ImltYWdlX3ZpZXdlcl8xNSI=--b6210244563c1b1182cf3b15f63f8425aae5eb267eb38660507bae79fb80e1ca"></turbo-cable-stream-source>
  <div id="connected_users">
    <p> Medcial Image Viewer - Connected Users: 0 </p>
  </div>
</main>

应用日志 #

Started GET "/images/15" for 127.0.0.1 at 2024-03-01 16:31:51 +0500
Processing by ImagesController#show as HTML
  Parameters: {"id"=>"15"}
  Image Load (0.1ms)  SELECT "images".* FROM "images" WHERE "images"."id" = ? LIMIT ?  [["id", 15], ["LIMIT", 1]]
  ↳ app/controllers/images_controller.rb:28:in `set_image'
  CACHE Image Load (0.0ms)  SELECT "images".* FROM "images" WHERE "images"."id" = ? LIMIT ?  [["id", 15], ["LIMIT", 1]]
  ↳ app/controllers/images_controller.rb:22:in `show'
  Rendering layout layouts/application.html.erb
  Rendering images/show.html.erb within layouts/application
  Rendered images/_connected_users.erb (Duration: 0.0ms | Allocations: 14)
  Rendered images/show.html.erb within layouts/application (Duration: 0.3ms | Allocations: 244)
  Rendered layout layouts/application.html.erb (Duration: 6.3ms | Allocations: 6107)
Completed 200 OK in 8ms (Views: 6.6ms | ActiveRecord: 0.1ms | Allocations: 7407)

Redis运行状态 #

brew services                                                                                           main * ] 4:30 pm
Name          Status     User        File
postgresql@14 error  256 xyz ~/Library/LaunchAgents/homebrew.mxcl.postgresql@14.plist
redis         started   xyz  ~/Library/LaunchAgents/homebrew.mxcl.redis.plist

1. 修正广播逻辑的嵌套错误 #

Turbo::StreamsChannel.broadcast_replace_to本身已经封装了ActionCable.server.broadcast的调用，不需要再次嵌套，否则会导致广播内容格式错误，Turbo无法解析。修改broadcast_connected_users_count方法：

def broadcast_connected_users_count
  Turbo::StreamsChannel.broadcast_replace_to(
    "image_viewer_#{@image_id}",
    target: "connected_users",
    partial: "images/connected_users",
    locals: { count: @@connected_users_count }
  )
end

注意第一个参数必须是流名称（image_viewer_#{@image_id}），而非目标DOM元素ID。

2. 验证Channel的参数获取 #

在subscribed方法中添加日志，确认是否能正确获取到image_id和签名流名称：

def subscribed
  Rails.logger.info "Subscribed params: #{params.inspect}"
  @@connected_users_count += 1
  @image_id = params[:image_id]
  stream_from "image_viewer_#{@image_id}"
  broadcast_connected_users_count
end

查看应用日志，确认params[:image_id]是否存在且值正确。

3. 检查Action Cable基础配置 #

• 确保config/cable.yml中Redis适配器配置正确：

  development:
    adapter: redis
    url: redis://localhost:6379/1
  

• 确认布局文件application.html.erb的<head>中包含Action Cable元标签：

  <%= action_cable_meta_tag %>
  

• 查看应用日志是否有WebSocket连接日志，比如：

  Started GET "/cable" for 127.0.0.1 at ...
  Successfully upgraded to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: upgrade, HTTP_UPGRADE: websocket)
  

  没有此类日志说明WebSocket连接未建立，需排查前端资源加载或服务器配置。

4. 替换类变量的使用方式 #

@@connected_users_count作为类变量，在多进程/多线程环境下会出现计数错误，改用Redis存储计数：

def subscribed
  count = Redis.current.incr("image_viewer_#{@image_id}_users_count")
  @image_id = params[:image_id]
  stream_from "image_viewer_#{@image_id}"
  broadcast_connected_users_count(count)
end

def unsubscribed
  count = Redis.current.decr("image_viewer_#{@image_id}_users_count")
  broadcast_connected_users_count(count)
end

private

def broadcast_connected_users_count(count)
  Turbo::StreamsChannel.broadcast_replace_to(
    "image_viewer_#{@image_id}",
    target: "connected_users",
    partial: "images/connected_users",
    locals: { count: count }
  )
end

5. 确认流名称一致性 #

在视图中打印流名称，与Channel中stream_from的名称对比，确保完全一致：

<%# 临时添加用于调试 %>
<p>Stream Name: image_viewer_<%= @image.id %></p>

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