Rails 5实时通知功能失效排查及实现技术求助

我来帮你一步步排查这个Action Cable实时通知的问题，咱们从基础连通性到代码细节逐个梳理：

一、先做基础连通性检查 #

这些是最容易忽略但关键的前置验证：

• 确认Action Cable服务启动：启动Rails服务器后，看终端日志是否有类似 WebSocket server starting on ws://localhost:3000/cable 的输出。如果没有，检查config/cable.yml，开发环境默认应该是adapter: async，确保配置没被修改。
• 浏览器验证WebSocket连接：打开Chrome DevTools的「Network」标签，筛选WS类型，看是否有ws://localhost:3000/cable的连接。状态显示101 Switching Protocols就是连接成功；如果失败，看控制台的错误提示（比如认证失败、跨域问题，不过本地localhost一般不会有跨域）。
• 查看Rails服务器日志：页面加载时，日志里应该出现Started GET "/cable"、Successfully upgraded to WebSocket的记录，还有你在connection.rb里加的[ActionCable, 用户名]标签。如果没有这些，说明连接根本没建立，先排查认证逻辑。

二、代码细节排查与修复 #

结合你给出的代码，这里有几个潜在问题：

1. React端订阅逻辑优化 #

你的header.jsx里有几个可以调整的点：

• 确保用户状态已加载：componentDidMount里直接用this.state.currentUser.id，如果组件挂载时用户数据还没请求完成，会导致user_id为undefined。先加个判断：

  componentDidMount() {
    HttpService.get('/api/v1/notifications', this.getNotificationsSuccess);
    // 先确认用户状态存在再创建订阅
    if (!this.state.currentUser) return;
    
    this.cable.subscriptions.create({ channel: "NotificationsChannel" }, {
      // 用箭头函数避免that的绑定问题
      connected: () => {
        setTimeout(() => this.perform('follow', { user_id: this.state.currentUser.id }), 1000);
      },
      received: (response) => this.addNotification(response)
    });
  }
  

• 替换废弃的字符串Ref：字符串ref已经被React废弃，改成回调ref更可靠：

  // render里的通知组件
  <NotificationComponent ref={ref => this.notificationComp = ref} />
  
  // addNotification方法
  addNotification = (response) => {
    if(this.notificationComp){
      console.log('收到新通知:', response); // 先打日志确认数据
      this.notificationComp.addNotification(response.data.notification);
    }
  }
  

2. Rails端Channel与Job的日志调试 #

给关键代码加日志，能快速定位问题：

• NotificationsChannel 加日志：

  class NotificationsChannel < ApplicationCable::Channel
    def follow(data)
      user_id = data['user_id'].to_i
      logger.info "开始监听用户#{user_id}的通知流"
      stop_all_streams
      stream_from "notifications:#{user_id}"
    end
    def unfollow
      logger.info "停止监听通知流"
      stop_all_streams
    end
  end
  

• NotificationsBroadcastJob 加日志：

  class NotificationsBroadcastJob < ApplicationJob
    def perform(notification, user_id)
      logger.info "准备给用户#{user_id}广播通知ID:#{notification.id}"
      serialized_data = NotificationSerializer.new(notification).serializable_hash
      ActionCable.server.broadcast "notifications:#{user_id}", data: serialized_data
    end
  end
  

• 模型的广播逻辑加日志：

  after_commit :broadcast_notification
  private
  def broadcast_notification
    logger.info "本次通知将推送给#{users.count}个用户"
    users.each do |user|
      NotificationsBroadcastJob.perform_later(self, user.id)
    end
  end
  

3. 认证逻辑验证 #

connection.rb的认证是连接的关键，加日志确认：

module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :current_user
    def connect
      self.current_user = find_verified_user
      logger.add_tags 'ActionCable', current_user.full_name
    end
    protected
    def find_verified_user
      user_id = cookies.signed['user.id']
      logger.info "尝试通过Cookie中的user_id:#{user_id}认证"
      verified_user = User.find_by(id: user_id)
      if verified_user
        logger.info "认证成功，用户:#{verified_user.full_name}"
        verified_user
      else
        logger.warn "认证失败，拒绝WebSocket连接"
        reject_unauthorized_connection
      end
    end
  end
end

测试时要确保用户已登录，cookies.signed['user.id']有有效值。

三、快速测试方法 #

• 手动触发广播：打开Rails控制台，手动执行广播命令，看前端是否收到：

  # 替换成你的测试用户ID和存在的通知ID
  notification = Notification.last
  NotificationsBroadcastJob.perform_now(notification, 1)
  

• 前端控制台验证：在addNotification里加console.log(response)，看浏览器控制台是否有收到广播的数据。

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