Need help making an online status tracker with Reverb

So I'm using Laravel 11 + inertia and react, and I'm trying to make a publically accessible online status channel that can display a user's online status with a green dot. I'm making an ebay-like website and I want people viewing listings to see if the user that's posted the listing is online. I know that I need to make a publically accessible channel so that even non-logged in users can listen to it, but what I don't know is how to setup the broadcasting part so that when the user who's status I want to display has actually opened the site, they can broadcast that they are online. Do I implement this broadcasting event inside the main layout and how do I set it up in general? Do I need to make a context provider? I'm kinda clueless about reverb and AI's not been of much help either because most AI models have old docs and info.

edit: Here's more info on the issue because I didn't express myself properly. The issue is two-fold:

1. How can I make a presence channel public for listening so that non logged in users can listen in on who's online?

and 2) How can I join the channel inside my page layout so that the user's online status can be updated whenever they're on any page, but at the same time only listen to the channel when in specific pages (the listing component in this case)

    useEffect(() => {
        const echo = new Echo({
            broadcaster: "reverb",
            key: import.meta.env.VITE_REVERB_APP_KEY,
            wsHost: import.meta.env.VITE_REVERB_HOST,
            wsPort: import.meta.env.VITE_REVERB_PORT,
            forceTLS: false,
            disableStats: true,
        });

        echo.join("presence.online")
            .here((users: any[]) => {
                setIsUserOnline(
                    users.some(
                        (user: { id: number }) => user.id === listing.user_id
                    )
                );
            })
            .joining((user: { id: number }) => {
                if (user.id === listing.user_id) setIsUserOnline(true);
            })
            .leaving((user: { id: number }) => {
                if (user.id === listing.user_id) setIsUserOnline(false);
            });

        return () => {
            echo.leave("presence.online");
        };
    }, [listing.user_id]);

So can I split the join , here,joining and leaving parts of this function in a way that the .join and .leave happen in the pagelayout, but the listening to joining,leaving and here happens in this component?