[SOLVED] How to get Real-time in-app notifications with Novu?

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, 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

Solution

To the Inbox component, adding socketUrl does the job. I can now receive real-time notifications with this

<Inbox
  socketUrl="https://eu.ws.novu.co"
  backendUrl="https://eu.api.novu.co"
  applicationIdentifier="APP_ID"
  subscriberId="SUBSCRIBER_ID"
>