Rails 5中如何撤销/删除已广播的ActionCable实时通知？

要实现删除Notification时撤销已广播的通知，我们可以通过添加销毁后的回调，广播一个"移除通知"的指令给前端，让前端对应删除页面上的通知元素。下面是具体的实现步骤：

1. 更新Notification模型的回调 #

首先在你的notification.rb中添加销毁后的回调，触发移除广播的Job：

# app/models/notification.rb
after_commit :broadcast_notification, on: :create
after_commit :broadcast_notification_removal, on: :destroy

private

def broadcast_notification
  # 注意：这里的user_id要替换成你实际的通知接收者ID字段，比如recipient.id
  NotificationBroadcastJob.perform_later(self, user_id)
end

def broadcast_notification_removal
  # 同样替换成接收者的ID字段
  NotificationRemovalBroadcastJob.perform_later(self.id, user_id)
end

2. 创建移除通知的广播Job #

新建一个专门处理移除广播的Job，用来给对应用户的频道发送移除指令：

# app/jobs/notification_removal_broadcast_job.rb
class NotificationRemovalBroadcastJob < ApplicationJob
  queue_as :default

  def perform(notification_id, user_id)
    # 广播带类型标识的消息，方便前端区分是创建还是移除
    ActionCable.server.broadcast "notifications:#{user_id}", 
      type: 'removal', 
      notification_id: notification_id
  end
end

3. 前端处理移除指令 #

在你的ActionCable消费者JS文件中，修改received方法，识别移除类型的消息，并删除页面上对应的通知元素：

// app/assets/javascripts/channels/notifications.js
App.notifications = App.cable.subscriptions.create("NotificationsChannel", {
  connected() {
    // 这里保留你原有的连接逻辑
  },

  received(data) {
    if (data.type === 'removal') {
      // 根据广播过来的ID找到页面上的通知元素并移除
      const notificationEl = document.getElementById(`notification-${data.notification_id}`);
      if (notificationEl) notificationEl.remove();
    } else {
      // 这里保留你原有的创建通知的渲染逻辑
      const newNotification = document.createElement('div');
      newNotification.id = `notification-${data.data.id}`;
      // 替换成你实际的通知内容渲染方式
      newNotification.innerHTML = `<p>${data.data.content}</p>`;
      document.getElementById('notifications-list').appendChild(newNotification);
    }
  }
});

关键说明 #

• 确保广播的user_id是通知的接收者ID，比如如果你的通知模型关联了recipient用户，就用self.recipient.id代替示例中的user_id。
• 前端渲染通知时，一定要给每个通知元素设置包含notification-id的ID（比如notification-123），这样才能精准找到要删除的元素。
• 这种方式是通过前端移除来实现"撤销"，因为ActionCable的广播是一次性的，无法直接撤回已发送的消息，所以通过发送移除指令让前端处理是最直接的方案。

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