Action Cable已成功订阅频道但无法接收广播数据，仅页面刷新前瞬间可接收

看起来你遇到的问题核心是广播时机和页面导航的冲突，结合你的代码和日志分析，我来拆解一下原因和解决办法：

问题根源 #

你在控制器的edit动作里执行了广播，但edit动作默认会触发页面导航（跳转到编辑表单页面）。这时候会发生两件事：

1. 原页面的WebSocket连接正被Turbo销毁，处于“即将关闭”的状态，所以只能在页面跳转前的瞬间收到广播
2. 新的编辑页面还没完成turbo:load事件，订阅还没建立，自然收不到这次广播

日志里显示的“刷新前瞬间收到数据”，其实就是原页面连接销毁前的最后一次接收。

具体解决办法 #

1. 把广播移到合适的动作里

edit动作是用来展示编辑表单的，不是执行编辑操作的时机。建议把广播逻辑移到update动作（真正保存编辑内容的动作）：

def update
  @double = Double.find(params[:id])
  if @double.update(double_params)
    # 保存成功后广播通知其他用户
    ActionCable.server.broadcast "doubles_channel_#{params[:id]}", "#{current_user.username} has updated the team"
    redirect_to @double, notice: 'Team updated successfully'
  else
    render :edit
  end
end

如果你的需求是用户进入编辑页面时通知其他用户，那不要在控制器的edit动作里广播，而是用前端触发：

2. 前端触发广播（进入编辑页时通知）

首先修改你的频道类，添加一个处理前端请求的方法：

class DoubleChannel < ApplicationCable::Channel
  def subscribed
    stream_from "doubles_channel_#{params[:id]}"
  end

  # 接收前端发来的"开始编辑"通知，再广播给所有订阅者
  def notify_editing
    ActionCable.server.broadcast "doubles_channel_#{params[:id]}", "#{current_user.username} is currently editing the team"
  end
end

然后修改JS代码，在订阅成功后主动通知服务器：

export function initializeDoubleChannel(doubleId) {
  const cable = createConsumer();
  const channel = cable.subscriptions.create({channel: `DoubleChannel`, id: `${parseInt(doubleId)}`}, {
    connected: function() {
      console.log("Connected to DoubleChannel");
      // 订阅成功后，通知服务器当前用户进入编辑状态
      this.notifyEditing();
    },
    disconnected: function() {
      console.log("Disconnected from DoubleChannel");
      document.getElementById("channel-status").innerText = "Disconnected from Double Channel";
    },
    received: function(data) {
      console.log("Received data:", data);
      document.getElementById("channel-status").innerText = data;
    },
    // 新增方法：调用频道的notify_editing方法
    notifyEditing: function() {
      this.perform('notify_editing');
    }
  });

  // 处理Turbo页面缓存，避免旧连接残留
  document.addEventListener("turbo:before-cache", () => {
    cable.subscriptions.remove(channel);
  });

  return channel;
}

3. 额外验证：频道名称一致性

虽然日志显示订阅的频道是doubles_channel_2，但还是要确认：

• 控制器里params[:id]和JS里parseInt(doubleId)的结果完全一致（比如都是数字，没有字符串/数字类型差异）
• 页面上的.double-id元素确实输出了正确的ID值

总结 #

核心就是避免在触发页面导航的控制器动作里广播，要么把广播移到不跳转的动作（如update），要么用前端在页面加载完成后主动触发广播，这样订阅的客户端都处于活跃状态，就能正常接收消息了。

备注：内容来源于stack exchange，提问作者Pierre Jebara