I am trying to create a real-time advertisement queue for users in my Next.js 14 application, where each user sees one advertisement at a time, similar to Google Ads. I am using Pusher for real-time data delivery, but I am facing issues when integrating it with MongoDB.

What I expected: I expected the advertisement to be displayed in real-time to the user, with the next advertisement in the queue being displayed once the current one is dismissed.

I also tried with useEffect to fetch data at one time and then make queue but its not real time

below is the code for pusher and adbox component

Client Component:

import React, { useEffect, useState } from 'react';
import Pusher from 'pusher-js';
import Image from 'next/image';

type AdType = {
    _id: string;
    link: string;
    image: string;
}

const AdBox = () => {
  const [currentAd, setCurrentAd] = useState<AdType | null>(null);

  useEffect(() => {

     fetch('/api/advertisement/getAllAds').then(response => {
       console.log('Ad rotation triggered:', response);
     }).catch(error => {
    console.error('Error triggering ad rotation:', error);
     });

    const pusher = new Pusher(process.env.NEXT_PUBLIC_PUSHER_KEY!, {
      cluster: process.env.NEXT_PUBLIC_PUSHER_CLUSTER!,
      forceTLS: true
    });

    const channel = pusher.subscribe('ad-channel');
    channel.bind('ad-update', function(data:any) {
      setCurrentAd(data.ad);
    });
    
    return () => {
      pusher.unsubscribe('ad-channel');
      channel.unbind_all();
    };
        
  }, []);
  
  return (
    <div>
      {currentAd && (
        <div>
          <Image src={currentAd.image} alt="Advertisement" width={300} height={300} layout="responsive" />
          <a href={currentAd.link} target="_blank" rel="noopener noreferrer">Visit Ad</a>
        </div>
      )}
    </div>
  );
};

export default AdBox;