Kanalen
Realtime ondersteunt drie soorten kanalen. Het type wordt bepaald door de naam (de prefix).
| Type | Prefix | Voor |
|---|---|---|
| Publiek | (geen) | Open data |
| Privé | private- | Alleen voor toegestane gebruikers |
| Presence | presence- | Privé + je ziet wie er online is |
Publieke kanalen
Iedereen met de client-sleutel kan zich abonneren. Geen autorisatie nodig.
ts// Elke naam zonder prefix is publiek pusher.subscribe("chat"); pusher.subscribe("notifications"); pusher.subscribe("scores");
Privé-kanalen
Kanalen die beginnen met private- vereisen server-side autorisatie. De client roept automatisch je auth-endpoint aan.
ts// Client-side await pusher.subscribePrivate("private-gebruiker-123"); // Server-side (app/api/pusher/auth/route.ts) — automatisch aangeroepen const auth = pusher.authenticate(socket_id, channel_name);
Gebruik privé-kanalen als je wilt bepalen wie er mag luisteren, bijvoorbeeld voor persoonlijke notificaties. De toegangscontrole doe je in je auth-route — zie Server.
Presence-kanalen
Kanalen die beginnen met presence- zijn als privé-kanalen, maar houden ook bij wie er online is.
ts// Client-side: abonneer met user info await pusher.subscribePrivate( "presence-lobby", "/api/pusher/auth", { user_id: "42", user_info: { naam: "Bas" } }, );
Je ontvangt automatisch deze events:
pusher:subscription_succeeded— lijst van alle huidige ledenpusher:member_added— iemand komt erbijpusher:member_removed— iemand gaat weg
Leden ontvangen
tspusher.on("presence-lobby", "pusher:subscription_succeeded", (data) => { console.log("Online:", data.presence.count); console.log("Leden:", data.presence.hash); // { "42": { naam: "Bas" }, "7": { naam: "Lisa" } } }); pusher.on("presence-lobby", "pusher:member_added", (data) => { console.log("Erbij:", data.user_id, data.user_info); }); pusher.on("presence-lobby", "pusher:member_removed", (data) => { console.log("Weg:", data.user_id); });
Auth-endpoint voor presence
Het auth-endpoint moet de channel_data meesturen. pusher.authenticate() doet dit automatisch zodra je het meegeeft:
ts// app/api/pusher/auth/route.ts import { NextRequest, NextResponse } from "next/server"; import { pusher } from "@/lib/go-pusher-server"; export async function POST(req: NextRequest) { const { socket_id, channel_name, channel_data } = await req.json(); // Controleer of de gebruiker ingelogd is... const auth = pusher.authenticate(socket_id, channel_name, channel_data); return NextResponse.json(auth); }
Events ontvangen en publiceren
Alle kanaaltypen ontvangen events op dezelfde manier (met useChannel of pusher.on), en events worden altijd server-side gepubliceerd:
ts// Server (Server Action of Route Handler) import { pusher } from "@/lib/go-pusher-server"; await pusher.publish("mijn-kanaal", "mijn-event", { bericht: "Hallo wereld!" });
Meer in Realtime (WebSockets)