How to get Real-time in-app notifications with Novu?
I am trying to receive real-time notifications without the need to refresh using Novu. Following the guide here at novu docs(https://docs.novu.co/platform/quickstart/nextjs), i created the layout.tsx like
import { NotificationInbox } from "@/components/inbox";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<nav>
<NotificationInbox />
</nav>
{children}
</body>
</html>
);
}
and NotificationInbox.tsx like this
'use client';
import React from 'react';
import { Inbox } from '@novu/nextjs';
export function NotificationInbox() {
return (
<Inbox
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
subscriberId="YOUR_SUBSCRIBER_ID"
/>
);
}
When i trigger my workflow from the dashboard, i have to refresh my nextjs app to see the latest notification.
How can i do this every time a notification is sent from novu? Without the need for refreshing manually to some periodic refresh of n minutes
5 Replies
Hey 👋🏻
Are you using novu cloud?
hi, yes
i have a simple workflow defined on the dashboard, which has only one step i.e. in-app notification.
i can trigger the workflow from the dashboard and i am getting the notification in my inbox component as well, the only problem is that i have to refresh to see the new notification. i was hoping to find a way to listen to the trigger event so that i can see the notification in real time
omg can't believe how simple it was, i found it, i had to add the socketUrl to inbox component as well
Are you using EU region?
@sarmad
Were you using EU region?
yes