1. 1

   liveNow asks WordPlus Cloud for the streams live now, and keeps those of lessons, lesson: and a number, with how many watch each.

   export async function liveNow(): Promise<Map<string, number>> {
       const live = new Map<string, number>();
       for (const stream of await realtime.listStreams()) {
           // Live now: …
           const lesson = lessonIn(stream.name);
           if (lesson) live.set(lesson, stream.viewers);
       }
       return live;
   }

2. 2

   The home page lists them, by their title and teacher from the database, made for each request, as what is live is of this moment.

   async function LiveLessons() {
       await connection();
       const live = await liveNow();
       const lessons = await lessonsIn([...live.keys()]);
       if (lessons.length === 0) return null;
       // … a card for each, with LiveMark and how many watch it
   }

3. 3

   The list keeps itself current. Every page joins the room live, a visitor's too. When a lesson goes live or ends, WordPlus Cloud tells this server by webhook, the server tells the room, and the page asks for its lists again, with no reload.

   export function LiveNow() {
       const router = useRouter();
       useRoom('live', { changed: () => router.refresh() });
       return null;
   }

4. 4

   All together, as this page was made:

   // The home page, for …:
   // app/(site)/page.tsx
       const live = await liveNow();
   
   // lib/realtime.ts
       for (const stream of await realtime.listStreams()) {
           const lesson = lessonIn(stream.name);
           if (lesson) live.set(lesson, stream.viewers);
       // … live: …
   
   // app/(site)/page.tsx
       const lessons = await lessonsIn([...live.keys()]);
       // …

Every line above is the site's own, with some left out. The whole code, a file at a time: Build a live lessons site with Next.js