Rails 7.0.5中ActionCable控制器广播失效但控制台可正常运行

我使用Rails 7.0.5测试ActionCable功能，通过控制器动作发送广播消息。在Rails控制台执行ActionCable.server.broadcast "chat_channel", {title: 'Hello From Rails'}时广播正常，但将这段代码放入控制器动作后，广播内容在index页面仅显示2-3秒就消失了。

相关代码 #

Channel JS文件 #

received(data) {
    // Called when there's incoming data on the websocket for this channel
    document.getElementById("my").innerHTML = data.title;
}

Index页面 #

<div id="my">
</div>

控制器文件 #

class HelloController < ApplicationController
  def index
      ActionCable.server.broadcast("chat_channel", { title: "Hello From Rails" })
  end
end

订阅文件 #

class ChatChannel < ApplicationCable::Channel
  def subscribed
     stream_from "chat_channel"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end
end

原因与解决方法 #

问题核心是控制器的index动作在执行广播后，会默认触发页面刷新，导致页面重新渲染，WebSocket设置的内容被清空。

解决方式1：阻止页面默认刷新 #

修改控制器动作，添加head :ok返回空响应，避免触发页面渲染/刷新：

class HelloController < ApplicationController
  def index
    ActionCable.server.broadcast("chat_channel", { title: "Hello From Rails" })
    head :ok # 关键：不返回页面模板，阻止刷新
  end
end

解决方式2：通过AJAX调用控制器动作 #

如果需要保留页面正常渲染逻辑，不要直接访问控制器路由，而是用AJAX触发广播：

1. 在页面添加触发按钮：

<button id="broadcast-btn">发送广播</button>

2. 添加JS代码发送异步请求：

document.getElementById('broadcast-btn').addEventListener('click', function() {
  fetch('/hello/index', { method: 'GET' });
});

这种方式下页面不会刷新，WebSocket设置的内容会持续显示。

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