要解决ActionCable频道只有在页面重新加载后才能连接的问题，可以使用以下代码示例：

1. 在页面加载时，使用JavaScript代码手动连接ActionCable频道：

// 创建一个ActionCable连接对象
var cable = ActionCable.createConsumer();

// 连接到指定频道
var channel = cable.subscriptions.create('ChannelName', {
  // 频道连接成功时的回调函数
  connected: function() {
    console.log('频道已连接');
  },

  // 频道断开连接时的回调函数
  disconnected: function() {
    console.log('频道已断开连接');
  },

  // 接收到频道消息时的回调函数
  received: function(data) {
    console.log('收到消息：', data);
  }
});

// 手动连接ActionCable频道
channel.initialize();

2. 在服务器端，确保在接收到ActionCable频道连接请求时，立即发送一个确认连接的响应：

class ChannelNameChannel < ApplicationCable::Channel
  def subscribed
    # 确认连接
    stream_from "channel_name"
    transmit({ connected: true })
  end

  def unsubscribed
    # 断开连接
    stop_all_streams
  end
end

通过使用上述代码示例，ActionCable频道将在页面加载时立即连接，而不需要重新加载页面。