Mark Garcia
NNovu
•Created by Mark Garcia on 5/14/2025 in #💬│support
Headless using Novu/JS
'use client'
import Image from "next/image";
import { Novu } from "@novu/js";
import { useEffect, useMemo } from "react";
export default function Home() {
const novu = useMemo(() => {
return new Novu({
applicationIdentifier: '6nupmbyERXRf',
subscriberId: '759291',
})
}, []);
useEffect(() => {
novu.on("notifications.notification_received", (data) => {
console.log("new notification =>", data);
});
novu.on("notifications.unread_count_changed", (data) => { console.log("new unread notifications count =>", data); }); }, [novu]) return ( <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]"> EMPTY HTML </div> ); }
novu.on("notifications.unread_count_changed", (data) => { console.log("new unread notifications count =>", data); }); }, [novu]) return ( <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]"> EMPTY HTML </div> ); }
27 replies
NNovu
•Created by Mark Garcia on 5/14/2025 in #💬│support
Headless using Novu/JS
I've created a blank nextjs project and even that didn't work
27 replies
NNovu
•Created by Mark Garcia on 5/14/2025 in #💬│support
Headless using Novu/JS
Do you have any reports of anything blocking your websocket requests or interferring with it? I'll try to create a new project and try this there.
27 replies
NNovu
•Created by Mark Garcia on 5/14/2025 in #💬│support
Headless using Novu/JS
We want to eventually create a component that allows for multiple notification provider so we would like to place each provider in its own custom hook. But I also did the SUGGESTED implementation and I got the same result.
27 replies
NNovu
•Created by Mark Garcia on 5/14/2025 in #💬│support
Headless using Novu/JS
Above is the sample curl I send out to trigger new notification but 'notifications.notification_received' event is not picking it up and it does NOT fire.
27 replies
NNovu
•Created by Mark Garcia on 5/14/2025 in #💬│support
Headless using Novu/JS
This is the generated websocket domain: wss://ws.novu.co/socket.io/?token=
27 replies
NNovu
•Created by Mark Garcia on 5/14/2025 in #💬│support
Headless using Novu/JS
useNovuEvents();
27 replies
NNovu
•Created by Mark Garcia on 5/14/2025 in #💬│support
Headless using Novu/JS
Then calling this in our GlobalNotice provider
27 replies
NNovu
•Created by Mark Garcia on 5/14/2025 in #💬│support
Headless using Novu/JS
import {useEffect, useMemo} from 'react';
import {useNotification} from '@hooks/useNotification';
import {Novu} from '@novu/js';
import {useAuthentication} from './useAuthentication';
export const useNovuEvents = () => {
const {getUserIdFromStoredToken} = useAuthentication();
const {getNotifications} = useNotification();
const applicationId = process.env.NEXT_PUBLIC_NOVU_APPLICATION_ID as string;
const memberId = getUserIdFromStoredToken() as string;
const novu = useMemo(() => {
return new Novu({
applicationIdentifier: applicationId,
subscriberId: memberId,
});
}, [applicationId, memberId]);
useEffect(() => {
// Set up event listener
novu.on('notifications.notification_received', data => {
console.log('new notification =>', data);
getNotifications(1);
});
}, [novu, getNotifications]);
};
27 replies
NNovu
•Created by Mark Garcia on 5/14/2025 in #💬│support
Headless using Novu/JS
Thanks @Pawan Jain but it still does NOT trigger the new_notification event. I've created custom hook for this implementation
27 replies
NNovu
•Created by Mark Garcia on 5/14/2025 in #💬│support
Headless using Novu/JS
Hi @Pawan Jain just following up on this.
27 replies
NNovu
•Created by Mark Garcia on 5/14/2025 in #💬│support
Headless using Novu/JS
export const GlobalNoticeProvider = ({
children,
}: GlobalNoticeProviderProps): JSX.Element => {
const applicationId = process.env.NEXT_PUBLIC_NOVU_APPLICATION_ID as string;
const memberId = getUserIdFromStoredToken() as string;
const novu = useMemo(() => {
return new Novu({
applicationIdentifier: applicationId,
subscriberId: memberId,
});
}, [applicationId, memberId]);
novu.on('notifications.notification_received', data => {
console.log('new notification =>', data);
getNotifications(1);
});
const getNovuNotifications = useCallback(async () => {
const {data} = await novu.notifications.list({limit: 30});
setList(data?.notifications);
console.log('NOVU-list', data?.notifications);
}, [novu]);
return ( <GlobalNoticeContext.Provider value={value}> <> {openNotice && ( <NoticeDialog notice={openNotice} onClose={handleOnClose} /> )} {children} </> </GlobalNoticeContext.Provider> ); }
return ( <GlobalNoticeContext.Provider value={value}> <> {openNotice && ( <NoticeDialog notice={openNotice} onClose={handleOnClose} /> )} {children} </> </GlobalNoticeContext.Provider> ); }
27 replies
NNovu
•Created by Mark Garcia on 5/14/2025 in #💬│support
Headless using Novu/JS
parts redacted but this is how it's implemented in a Provider component
27 replies
NNovu
•Created by Mark Garcia on 5/14/2025 in #💬│support
Headless using Novu/JS
This is the default websocket url: wss://ws.novu.co/socket.io
27 replies
NNovu
•Created by Mark Garcia on 5/14/2025 in #💬│support
Headless using Novu/JS
I know the subsciber has existing notifications when I call the novu api.
27 replies
NNovu
•Created by Mark Garcia on 5/14/2025 in #💬│support
Headless using Novu/JS
const getNovuNotifications = useCallback(async () => {
const {data} = await novu.notifications.list({limit: 30});
setList(data?.notifications);
console.log('NOVU-list', data?.notifications);
}, [novu]);
27 replies