Unsubscribe from a realtime channel

How exactly does a client unsub from a realtime channel (Postgres CDC)?
From the docs, there is

removeChannel()

removeChannel()

which unsubs and 'removes' the channel from client.
What does the remove part mean, if multiple clients are connected to the channel, and one client does a

removeChannel()

removeChannel()

with that channels' name, does it also end the channel for the other clients?

And there is also a

supabase.channel().unsubscribe()

supabase.channel().unsubscribe()

which 'unsubscribes from server events and instructs server to terminate'...

// snippet from CommentItem component
// LISTEN FOR WHEN THE COMMENT IS UPDATED OR DELETED
    useEffect(() => {
        const { id: commentID } = commentData;
        const channelName = `public:comments:id=eq.${commentID}`;
        supabase
            .channel(channelName)
            .on(
                "postgres_changes",
                {
                    event: "UPDATE",
                    schema: "public",
                    table: "comments",
                    filter: `id=eq.${commentID}`,
                },
                onCommentUpdated
            )
            .on(
                "postgres_changes",
                {
                    event: "DELETE",
                    schema: "public",
                    table: "comments",
                    filter: `id=eq.${commentID}`,
                },
                onCommentDeleted
            )
            .subscribe();
        return () => supabase.removeChannel(channelName);
    }, [commentData, onCommentDeleted, onCommentUpdated]);

// snippet from CommentItem component
// LISTEN FOR WHEN THE COMMENT IS UPDATED OR DELETED
    useEffect(() => {
        const { id: commentID } = commentData;
        const channelName = `public:comments:id=eq.${commentID}`;
        supabase
            .channel(channelName)
            .on(
                "postgres_changes",
                {
                    event: "UPDATE",
                    schema: "public",
                    table: "comments",
                    filter: `id=eq.${commentID}`,
                },
                onCommentUpdated
            )
            .on(
                "postgres_changes",
                {
                    event: "DELETE",
                    schema: "public",
                    table: "comments",
                    filter: `id=eq.${commentID}`,
                },
                onCommentDeleted
            )
            .subscribe();
        return () => supabase.removeChannel(channelName);
    }, [commentData, onCommentDeleted, onCommentUpdated]);

I just want that when the commentItem component unmounts, it should stop listening for those postgres changes on the comments table.

Unsubscribe from a realtime channel

How exactly does a client unsub from a realtime channel (Postgres CDC)?
From the docs, there is

removeChannel()

removeChannel()

which unsubs and 'removes' the channel from client.
What does the remove part mean, if multiple clients are connected to the channel, and one client does a

removeChannel()

removeChannel()

with that channels' name, does it also end the channel for the other clients?

And there is also a

supabase.channel().unsubscribe()

supabase.channel().unsubscribe()

which 'unsubscribes from server events and instructs server to terminate'...

// snippet from CommentItem component
// LISTEN FOR WHEN THE COMMENT IS UPDATED OR DELETED
    useEffect(() => {
        const { id: commentID } = commentData;
        const channelName = `public:comments:id=eq.${commentID}`;
        supabase
            .channel(channelName)
            .on(
                "postgres_changes",
                {
                    event: "UPDATE",
                    schema: "public",
                    table: "comments",
                    filter: `id=eq.${commentID}`,
                },
                onCommentUpdated
            )
            .on(
                "postgres_changes",
                {
                    event: "DELETE",
                    schema: "public",
                    table: "comments",
                    filter: `id=eq.${commentID}`,
                },
                onCommentDeleted
            )
            .subscribe();
        return () => supabase.removeChannel(channelName);
    }, [commentData, onCommentDeleted, onCommentUpdated]);

// snippet from CommentItem component
// LISTEN FOR WHEN THE COMMENT IS UPDATED OR DELETED
    useEffect(() => {
        const { id: commentID } = commentData;
        const channelName = `public:comments:id=eq.${commentID}`;
        supabase
            .channel(channelName)
            .on(
                "postgres_changes",
                {
                    event: "UPDATE",
                    schema: "public",
                    table: "comments",
                    filter: `id=eq.${commentID}`,
                },
                onCommentUpdated
            )
            .on(
                "postgres_changes",
                {
                    event: "DELETE",
                    schema: "public",
                    table: "comments",
                    filter: `id=eq.${commentID}`,
                },
                onCommentDeleted
            )
            .subscribe();
        return () => supabase.removeChannel(channelName);
    }, [commentData, onCommentDeleted, onCommentUpdated]);

I just want that when the commentItem component unmounts, it should stop listening for those postgres changes on the comments table.

Unsubscribe from a realtime channel

Unsubscribe from a realtime channel

Similar Threads

Similar Threads

Similar Threads