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?