Nextjs + rails Actioncable usage

Viewed 469

I'm working on a notification feature in my project using Nextjs and Rails Actioncable. Since Nextjs uses SSR I have to use dynamic import (https://nextjs.org/docs/advanced-features/dynamic-import) to import @rails/actioncable

Then I create a custom hook to create consumer like this

import { API_URL } from '@config/config'
import { useAuthentication } from '@hooks/useAuthentication'

export const useNotification = () => {
  const id = useAuthentication()?.user.data?.id
  const initTerminal = async () => {
    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)
        },
        recieved(data) {
          console.log('NEW NOTIFICATION: ', data)
        },
      }
    )
    return consumer
  }

  return initTerminal()
}

which does connect to websocket and can log 'Notification channel connected' just fine, but new messages that are received are not being logged. What do I need to do to retrieve the data being sent from NotificationChannel?

1 Answers

I hope you found the issue, because it's a simple typo received instead of recieved

Related