Prisma•4mo ago

How can show advertisement in queue in sync with all users?

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 I haven't use prisma or postgres, cause I don't know can I use it or not ? so I tried with pusher but not worked, if its works with prisma, I can implement that https://stackoverflow.com/questions/78376205/how-can-displaying-real-time-advertisements-to-users-in-next-js-14-with-pusher-a

Stack Overflow

How can displaying real-time advertisements to users in Next.js 14 ...

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-tim...

2 Replies

Nurul•4mo ago

What is the current behaviour that you are observing? Are you not getting advertisments in real time? Do you need to refresh the page to get new advvertisments?

astronaut•4mo ago

currently I implemented client side code where data is fetch at once then I show them in interval of 2 minutes for each advertisement but its not real time, right ? every user will see 1st advertisement when they open, casue that time it invokes the api at client side, so its not real time I will share that code with you

import { SignedIn, SignedOut, useUser } from '@clerk/nextjs';
import axios from 'axios';
import Image from 'next/image';
import Link from 'next/link';
import React, { useEffect, useState } from 'react';
import { toast } from 'react-toastify';

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

const AdBox = () => {

  const [ads, setAds] = useState<AdType[]>([]);
//   const [totalPages, setTotalPages] = useState(0);
  const [currentAdIndex, setCurrentAdIndex] = useState(0);

  useEffect(() => {
      fetchAds();
  }, []);

  const fetchAds = async () => {
      try {
          const response = await axios.get(`/api/advertisement/getAllAds2`);
          setAds(response.data.advertisement);
      } catch (error) {
          console.error("Failed to fetch ads:", error);
      }
  };

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentAdIndex(prevIndex => (prevIndex + 1) % ads.length);
    }, 20000); 

    return () => clearInterval(interval);
  }, [ads.length]);

  return (   
    <div className="hidden md:flex max-w-xl w-1/5 mx-2 bg-beige shadow-md border-t border-black bg-gray-50 flex flex-col justify-center items-center ">
    <p>Free Advertisement</p>
      {ads.length > 0 && (
        <div className="w-full h-full relative" key={ads[currentAdIndex]?._id}>
          <a href={ads[currentAdIndex]?.link} target="_blank" rel="noopener noreferrer" className="absolute inset-0">
            <Image src={ads[currentAdIndex]?.image} alt="Advertisement Image" layout="fill" objectFit="cover" />
            <div className="absolute bottom-0 right-0 bg-red-500 text-sm py-1 px-2 hover:bg-red-600 focus:outline-none focus:bg-red-600">
              <Link href="/sign-in" className="text-white text-sm font-semibold animate-pulse">
                Post Ads for FREE
              </Link>
            </div>
          </a>
        </div>
      )}
    </div>
  );
};

export default AdBox;

import { SignedIn, SignedOut, useUser } from '@clerk/nextjs';
import axios from 'axios';
import Image from 'next/image';
import Link from 'next/link';
import React, { useEffect, useState } from 'react';
import { toast } from 'react-toastify';

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

const AdBox = () => {

  const [ads, setAds] = useState<AdType[]>([]);
//   const [totalPages, setTotalPages] = useState(0);
  const [currentAdIndex, setCurrentAdIndex] = useState(0);

  useEffect(() => {
      fetchAds();
  }, []);

  const fetchAds = async () => {
      try {
          const response = await axios.get(`/api/advertisement/getAllAds2`);
          setAds(response.data.advertisement);
      } catch (error) {
          console.error("Failed to fetch ads:", error);
      }
  };

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentAdIndex(prevIndex => (prevIndex + 1) % ads.length);
    }, 20000); 

    return () => clearInterval(interval);
  }, [ads.length]);

  return (   
    <div className="hidden md:flex max-w-xl w-1/5 mx-2 bg-beige shadow-md border-t border-black bg-gray-50 flex flex-col justify-center items-center ">
    <p>Free Advertisement</p>
      {ads.length > 0 && (
        <div className="w-full h-full relative" key={ads[currentAdIndex]?._id}>
          <a href={ads[currentAdIndex]?.link} target="_blank" rel="noopener noreferrer" className="absolute inset-0">
            <Image src={ads[currentAdIndex]?.image} alt="Advertisement Image" layout="fill" objectFit="cover" />
            <div className="absolute bottom-0 right-0 bg-red-500 text-sm py-1 px-2 hover:bg-red-600 focus:outline-none focus:bg-red-600">
              <Link href="/sign-in" className="text-white text-sm font-semibold animate-pulse">
                Post Ads for FREE
              </Link>
            </div>
          </a>
        </div>
      )}
    </div>
  );
};

export default AdBox;

with useEffect I can show ads but its not real time, I mean not sync 1 advertisement with all users

Gaming

Programming

How can show advertisement in queue in sync with all users?