Help with Appwrite Realtime

so i'm testing a chat app feature that i'm making and i'm trying to chat between two accounds on different devices connected to the local development server but i have to refresh to see a new message that i type on my other device

here is my realtime subscription snippet let unsubscribe; const setupRealtimeConnection = () => { return client.subscribe( [ databases.${import.meta.env.VITE_DATABASE_COMMUNITIES_ID}.collections.${ import.meta.env.VITE_COLLECTION_ID_SERVER_MESSAGES }.documents ], (response) => { const { events, payload } = response; console.log(response); scrollToBottom(); if (payload.communityId !== id) return;

            if (events.includes('databases.*.collections.*.documents.create')) {
                messages.update((msgs) => {
                    return [...msgs, payload].sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
                });
            }
        }
    );
};



onMount(async () => {
    await listCommunities();
    unsubscribe = setupRealtimeConnection();
    scrollToBottom(); // Ensure scrolling is handled properly
    getData(); // Fetch initial data
});

onDestroy(() => {
    if (unsubscribe) unsubscribe(); // Clean up the subscription on component destroy
});