Next.js结合Rails ActionCable实现通知功能收不到消息如何解决

安全阿岳

2026-10-2

问题根因&修复方案

1. 核心问题：回调函数拼写错误

你代码中定义的接收消息回调名为recieved，但ActionCable官方规范的回调名是**received**（i和e的顺序错误，你多写了一个e），这是导致连接正常但收不到消息触发日志的直接原因。

2. 完整优化代码

当前Hook实现还存在重复创建连接、无资源清理逻辑等潜在问题，调整后的可用版本如下：

import { API_URL } from '@config/config'
import { useAuthentication } from '@hooks/useAuthentication'
import { useEffect, useRef } from 'react'

export const useNotification = () => {
  const id = useAuthentication()?.user.data?.id
  // 存储consumer实例避免重复创建
  const consumerRef = useRef(null)

  useEffect(() => {
    // 无有效用户ID时不创建无效连接
    if (!id) return

    const initTerminal = async () => {
      // 已经存在实例则跳过创建逻辑
      if (consumerRef.current) return

      const { createConsumer } = await import('@rails/actioncable')
      const consumer = createConsumer(`${API_URL}/cable`)
      consumer.subscriptions.create(
        {
          channel: 'NotificationChannel',
          user_id: id,
        },
        {
          connected() {
            console.log('Notification channel connected\nUser id:', id)
          },
          // 修正拼写错误的回调名
          received(data) {
            console.log('NEW NOTIFICATION: ', data)
          },
        }
      )
      consumerRef.current = consumer
    }

    initTerminal()

    // 组件卸载/用户ID变更时主动断开连接释放资源
    return () => {
      if (consumerRef.current) {
        consumerRef.current.disconnect()
        consumerRef.current = null
      }
    }
  // 仅用户ID变化时重新初始化连接
  }, [id])
}