Novu•9mo ago

New notifications not being received by the socket connection

I am using the listenNotificationReceive method from the @novu/headless package with react to listen for new notifications from my app. However, the method is not being called when I trigger notifications from my dashboard. To view new notifications, I'd have to manually call the fetch notifications method. Is there a way to fix this? Code snippets below

const NotificationProvider = ({ children }: { children: React.ReactNode }) => {
    const [notifications, setNotifications] = useState<IMessage[]>([])
    const { cacheConfig } = useAppStore()
    const [loading, setLoading] = useState(false)
    const headlessServiceRef = useRef<HeadlessService | null>(null)
    const [pageNum, setPageNum] = useState(0)
    const [fetchNotifsError, setFetchNotifsError] = useState(false)
    const fetchNotifications = useCallback(() => {
        const headlessService = headlessServiceRef.current
        if (headlessService) {
            headlessService.fetchNotifications({
                listener: ({ isError, isLoading, status }) => {
                    if (isError) {
                        setFetchNotifsError(true)
                    }
                    setLoading(isLoading)
                },
                onSuccess: response => {
                    setFetchNotifsError(false)
                    setHasMore(response.hasMore)
                    setLoading(false)
                    setNotifications(response.data)
                },
                onError(error) {
                    setLoading(false)
                },
                page: pageNum,
            })
        }
    }, [pageNum, cacheConfig?.host])
    useEffect(() => {
        const headlessService = new HeadlessService({
            applicationIdentifier: process.env.REACT_APP_NOVU_APPLICATION_ID || "",
            subscriberId: cacheConfig?.host,
        })

        headlessService.initializeSession({
            listener: res => {},
            onSuccess: session => {
                headlessServiceRef.current = headlessService
                fetchNotifications()
                fetchUnread()
            },
            onError: error => {
                console.log("headless error:", error)
                setFetchNotifsError(true)
            },
        })
    }, [fetchNotifications, cacheConfig?.host])

    
    useEffect(() => {
        const headlessService = headlessServiceRef.current
        if (headlessService) {
            headlessService.listenNotificationReceive({
                listener(message) {
// !THIS LISTENER FN IS NOT BEING CALLED DESPITE NOTIFICATIONS BEING TRIGGERRED SUCCESSFULLY FROM THE DASHBOARD
                    console.log(message)

                    // Do something with message
                    }
                },
            })
        }
    }, [cacheConfig?.host])
    
    return (
        <NotificationContext.Provider
            value={{
                notifications,
                pageNum,
                fetchNotifications,
                hasMore,
                loading,
                unread,
                fetchNotifsError,
            }}
        >
            {children}
        </NotificationContext.Provider>
    )
}
const useNotification = () => useContext(NotificationContext)
export { useNotification, NotificationProvider }

const NotificationProvider = ({ children }: { children: React.ReactNode }) => {
    const [notifications, setNotifications] = useState<IMessage[]>([])
    const { cacheConfig } = useAppStore()
    const [loading, setLoading] = useState(false)
    const headlessServiceRef = useRef<HeadlessService | null>(null)
    const [pageNum, setPageNum] = useState(0)
    const [fetchNotifsError, setFetchNotifsError] = useState(false)
    const fetchNotifications = useCallback(() => {
        const headlessService = headlessServiceRef.current
        if (headlessService) {
            headlessService.fetchNotifications({
                listener: ({ isError, isLoading, status }) => {
                    if (isError) {
                        setFetchNotifsError(true)
                    }
                    setLoading(isLoading)
                },
                onSuccess: response => {
                    setFetchNotifsError(false)
                    setHasMore(response.hasMore)
                    setLoading(false)
                    setNotifications(response.data)
                },
                onError(error) {
                    setLoading(false)
                },
                page: pageNum,
            })
        }
    }, [pageNum, cacheConfig?.host])
    useEffect(() => {
        const headlessService = new HeadlessService({
            applicationIdentifier: process.env.REACT_APP_NOVU_APPLICATION_ID || "",
            subscriberId: cacheConfig?.host,
        })

        headlessService.initializeSession({
            listener: res => {},
            onSuccess: session => {
                headlessServiceRef.current = headlessService
                fetchNotifications()
                fetchUnread()
            },
            onError: error => {
                console.log("headless error:", error)
                setFetchNotifsError(true)
            },
        })
    }, [fetchNotifications, cacheConfig?.host])

    
    useEffect(() => {
        const headlessService = headlessServiceRef.current
        if (headlessService) {
            headlessService.listenNotificationReceive({
                listener(message) {
// !THIS LISTENER FN IS NOT BEING CALLED DESPITE NOTIFICATIONS BEING TRIGGERRED SUCCESSFULLY FROM THE DASHBOARD
                    console.log(message)

                    // Do something with message
                    }
                },
            })
        }
    }, [cacheConfig?.host])
    
    return (
        <NotificationContext.Provider
            value={{
                notifications,
                pageNum,
                fetchNotifications,
                hasMore,
                loading,
                unread,
                fetchNotifsError,
            }}
        >
            {children}
        </NotificationContext.Provider>
    )
}
const useNotification = () => useContext(NotificationContext)
export { useNotification, NotificationProvider }

2 Replies

PidginEnemy•9mo ago

why you don't use a react package from novu ? https://docs.novu.co/notification-center/client/react/get-started it's already have all functionality and you can customize ui components inside

Novu

React Get Started - Novu

Learn how to add novu powered In-App notification center to your React app

Pawan Jain•8mo ago

@Femto Ace Check out thes methods to listen new in-app notificatons:- https://docs.novu.co/notification-center/client/headless/api-reference#listenunseencountchange https://docs.novu.co/notification-center/client/headless/api-reference#listenunreadcountchange Closing this post due to inactivity. Feel free to create a new post if you have any question or you are still facing issue

Gaming

Programming

New notifications not being received by the socket connection