How to create fake real-time with polling and invalidateAll in Svelte and SvelteKit with a database (Supabase) or without a database?

[Tyjust31]

First of all, I am currently building a SaaS application, and I am using the best language and framework, Svelte. Supabase has a good CLI, but it can be complicated at times with triggers, RLS, etc., when creating an app. There's also the real-time feature to avoid reloading all the data, but real-time in general can be expensive with all the requests from Appwrite, Pocketbase, and so on. My structure is nested with multiple foreign keys, so I'm looking for a system to implement "fake real-time." Many didn't have a solution for this, but I researched and found one. I want to create a tutorial on GitHub for Svelte.

[Tyjust31]

First, we will create a table in the database of your choice. You can either use a folder api/counter/+layout.ts or place the file in the same folder as +layout.svelte.ts. For those who are using a database, here is the SQL for creating the table: you can take this simple exemple for creating your own polling

[Tyjust31]

CREATE TABLE public.counter ( id BIGINT GENERATED BY DEFAULT AS IDENTITY NOT NULL, created_at TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT NOW(), num NUMERIC NULL, CONSTRAINT counter_pkey PRIMARY KEY (id) ) TABLESPACE pg_default;

[Tyjust31]

// src/routes/+layout.ts

`
export async function load({ locals: { supabase }, depends }) {

   let { data: counter, error } = await supabase.from('counter').select('num');

if (error) {
    console.error('Erreur lors de la récupération du compteur:', error);
    return {
        counter: 0
    };
}

if (!counter || counter.length === 0) {
    return {
        counter: 0
    };
}
 //  depends('supabase:counter');   if you use invalidate
console.log('Compteur récupéré avec succès:', counter[0].num);

return {
    counter: counter[0].num
};

}`

[Tyjust31]

+page.svelte

`<script lang="ts">
import { onDestroy } from 'svelte';
import { invalidate, invalidateAll } from '$app/navigation';

// Récupérer les données depuis les props
let { data } = $props();
let counter = $state(data.counter);

// Variable pour stocker l'intervalle
let interval: NodeJS.Timeout | undefined;



// Fonction pour démarrer le polling
function startPollinge() {
	// Afficher l'animation de chargement
	

	// Arrêter l'intervalle existant si nécessaire
	if (interval) {
		clearInterval(interval);
	}

	// Créer un nouvel intervalle qui s'exécute toutes les 1 seconde
	interval = setInterval(async () => {
		try {
			// Invalider les données pour forcer un rechargement
			await invalidateAll();
		} catch (error) {
			console.error("Erreur lors de l'invalidation des données:", error);
		}
	}, 1000); // 1000ms = 1 seconde

	// Arrêter le polling après 4 secondes
	setTimeout(stopPolling, 1000); // 4000ms = 4 secondes
}





// Fonction pour démarrer le polling
function startPolling() {
	// Arrêter l'intervalle existant si nécessaire
	if (interval) {
		clearInterval(interval);
	}

	// Créer un nouvel intervalle qui s'exécute toutes les 5 secondes
	interval = setInterval(async () => {
		// Invalider les données pour forcer un rechargement
		await invalidateAll();
	}, 6000); // 5000ms = 5 secondes
}

// Fonction pour arrêter le polling
function stopPolling() {
	if (interval) {
		clearInterval(interval);
		interval = undefined;
	}
	

	
}

// Démarrer automatiquement le polling au montage du composant
$effect(() => {
startPolling();

});

// Nettoyer l'intervalle quand le composant est détruit
onDestroy(() => {
	stopPolling();
});

// Surveiller les changements de data.counter
$effect(() => {
	counter = data.counter;
});

</script>

// src/routes/+page.svelte

real-time data managementl

<h2>Compteur actuel : {counter}</h2>

<div class="controls">
	<button onclick={startPollinge}> Démarrer l'actualisation automatique </button>
   
	

	<button onclick={stopPolling} > Arrêter l'actualisation </button>
</div>

<style> .controls { margin-top: 1rem; display: flex; gap: 1rem; } button { padding: 0.5rem 1rem; border: 1px solid #ccc; border-radius: 4px; background: #f0f0f0; cursor: pointer; } button:hover { background: #e0e0e0; } </style>

`