Live Updates med Polling

Modulsmål 🎯

Efter denna modul kan du:

• ✅ Förstå olika sätt att få realtidsdata
• ✅ Implementera automatic refresh i din app
• ✅ Experimentera med polling vs andra metoder
• ✅ Välja rätt teknik för rätt situation

Varför realtidsdata? 🤔

Tänk på Discord, Instagram eller live-sport. Data uppdateras konstant utan att du behöver ladda om sidan. Nu ska vi lära oss hur det fungerar!

Två sätt att få "realtidsdata" (andra sätt senare i kursen) 🔄

Metod	Vad händer?	Bra för	Dåligt för
Short Polling	Frågar servern ofta "finns det något nytt?"	Enkla appar	Många användare
Long Polling	Håller frågan öppen tills något nytt kommer	Medelstora appar	Komplicerat

Projekt: Lägg till realtid i din Forum-app! 📱

Vi börjar enkelt och bygger vidare steg för steg.

Experiment 1: Automatic refresh med invalidateAll() 🔄

Uppgift: Få din forum-lista att uppdateras automatiskt var 5:e sekund.

I din src/routes/forums/+page.svelte:

<script>
  import { browser } from '$app/environment';
  import { onDestroy } from 'svelte';
  import { invalidateAll } from '$app/navigation';
  
  export let data;
  
  // Din kod här!
  // Tips: 
  // - Använd setInterval() för att köra något regelbundet
  // - Använd invalidateAll() för att ladda om all data
  // - Kom ihåg att städa upp med clearInterval()
  // - Kontrollera att du är i browser miljön först
  
</script>

<!-- Din befintliga forum-lista här -->

Testa det:

1. Öppna din forum-app i två browser-tabs
2. Skapa ett nytt forum i en tab
3. Vänta 5 sekunder - syns det i andra tabben?

Reflektera:

• Vad händer med nätverkstrafiken?
• Hur ofta uppdateras det verkligen?
• Är detta en bra lösning för 1000 användare?

Experiment 2: Egen API endpoint för updates 📊

Problem: invalidateAll() hämtar ALL data igen. Det är slöseri!

Uppgift: Skapa en egen endpoint som bara returnerar det du behöver.

Skapa src/routes/api/forum-count/+server.ts:

import { json } from '@sveltejs/kit';
import { prisma } from '$lib';
// Din kod här
// Tips: Returnera bara antalet forum, eller senaste uppdateringstid

Uppdatera din +page.svelte:

<script>
  export let data;
  let liveCount = data.forums.length;
  
  // Funktion som hämtar från din nya API
  async function checkForUpdates() {
    // Din kod här
    // Tips: fetch('/api/forum-count') och uppdatera liveCount
  }
  
  // Kör checkForUpdates() regelbundet
</script>

<h1>Forum ({liveCount} totalt)</h1>
<!-- Resten av din kod -->

Jämför:

• Är detta snabbare än invalidateAll()?
• Vad händer om antalet är samma?
• Hur skulle du bara uppdatera när det faktiskt ändrats?

Experiment 3: Optimistic Updates 🚀

Problem: Du måste vänta 5 sekunder för att se dina egna ändringar!

Uppgift: Uppdatera UI direkt när du skapar nytt forum, INNAN servern svarar.

<script>
  export let data;
  let forums = data.forums; // Local copy
  
  async function createForum(formData) {
    // 1. Lägg till forum i lokal lista DIREKT
    const tempForum = {
      id: 'temp-' + Date.now(),
      name: formData.get('name'),
      description: formData.get('description'),
      _isTemporary: true
    };
    
    forums = [...forums, tempForum];
    
    // 2. Skicka till server
    try {
      // Din fetch/form kod här
      // Om framgång: ta bort temp och lägg till riktig data
      // Om fel: ta bort temp och visa fel
    } catch (error) {
      // Ta bort det temporära forumet om det misslyckas
    }
  }
</script>

<!-- Visa temporary forums med annan styling? -->
{#each forums as forum}
  <div class:temporary={forum._isTemporary}>
    {forum.name}
  </div>
{/each}

Testa och reflektera:

• Känns appen snabbare?
• Vad händer om servern tar lång tid?
• Hur skulle du hantera fel?

Praktiska övningar 💪

Övning 1: Live message counter

Lägg till en räknare som visar antal meddelanden i varje forum i realtid.

Tips:

• Skapa /api/message-count/[forum] endpoint
• Uppdatera var 3:e sekund
• Visa bara när det ändrats

Övning 2: "Someone is typing..."

Implementera en "X skriver just nu..." funktion.

Tips:

• Visa när någon skriver i meddelandeformuläret
• Använd input events och timers
• Ta bort efter 3 sekunder utan aktivitet

Övning 3: Live user counter

Visa hur många som är "online" just nu.

Tips:

• Skicka en "heartbeat" var 30:e sekund
• Räkna användare som varit aktiva senaste minuten
• Visa som "👥 3 online"

Tekniska utmaningar att utforska 🧪

1. Performance testing

// Mät hur lång tid requests tar
console.time('api-request');
await fetch('/api/forum-count');
console.timeEnd('api-request');

2. Error handling

Vad händer när:

• Nätverket försvinner?
• Servern är nere?
• Din timer fortsätter köra fast sidan är borta? Är detta möjligt? (TESTA!)

3. Battery impact

• Hur påverkar konstant polling batteritid?
• Kan du minska frekvensen när sidan inte är synlig?

// Experimentera med Page Visibility API
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    // Minska polling
  } else {
    // Öka polling
  }
});

Diskussionsfrågor 🤔

1. Discord vs Email: Varför behöver Discord realtidsdata men email inte?

2. Kostnad vs Nytta: När är det värt att implementera realtidsdata?

3. Användarupplevelse: Märker användare skillnaden mellan 1s, 5s och 30s uppdateringar?

4. Skalning: Vad händer om 10,000 personer kollar samma forum samtidigt?

Vanliga fallgropar ⚠️

❌ Glömmer att städa upp

<!-- BAD: Timer fortsätter köra -->
<script>
  setInterval(() => fetchData(), 1000);
</script>

<!-- GOOD: Städar upp -->
<script>
  import { onDestroy } from 'svelte';
  
  const timer = setInterval(() => fetchData(), 1000);
  onDestroy(() => clearInterval(timer));
</script>

❌ Pollar för ofta

// BAD: 10 requests per sekund!
setInterval(fetchData, 100);

// GOOD: Rimlig frekvens
setInterval(fetchData, 5000);

❌ Inte kontrollerar browser miljö

<!-- BAD: Kraschar på servern -->
<script>
  setInterval(() => {}, 1000);
</script>

<!-- GOOD: Bara i browser -->
<script>
  import { browser } from '$app/environment';
  
  if (browser) {
    setInterval(() => {}, 1000);
  }
</script>

Ditt uppdrag 🎯

Välj EN av dessa och implementera den i din forum-app:

1. Live forum counter - visa antal forum som uppdateras live
2. Recent activity feed - "Forum 'Gaming' skapades för 2 min sedan"
3. Active users indicator - visa vilka forum som har aktivitet
4. Auto-refresh för meddelanden - nya meddelanden dyker upp automatiskt

Begränsningar:

• Max 1 request per 3 sekunder
• Måste hantera fel graciöst
• Måste städa upp timers

Nästa steg 🚀

Efter att du experimenterat med realtidsdata, nästa modul handlar om användarautentisering - att hålla koll på vem som är vem!

Resurser för djupdyk 📚

• MDN WebSockets: developer.mozilla.org/en-US/docs/Web/API/WebSockets_API
• Page Visibility API: developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
• SvelteKit Invalidation: kit.svelte.dev/docs/modules#$app-navigation-invalidateall