Realtime bij EduInsights
Met een realtime app stuur je live updates naar de browser via websockets — zonder dat de pagina hoeft te verversen. Denk aan chat, notificaties, een live scorebord of samen-werken-in-één-document.
Hoe werkt het?
Een realtime app heeft twee kanten:
- Client (browser) — verbindt via WebSocket, abonneert op kanalen en ontvangt events in realtime (met de
useChannel-hook). - Server (Next.js) — publiceert events via HTTP en ondertekent kanaal-autorisatie met HMAC (met de
pusher-instantie).
Events stuur je altijd vanaf de server; de browser ontvangt ze.
1. Een realtime app aanmaken
- Ga naar Cloud → Realtime.
- Klik op Nieuwe realtime app en geef hem een naam (bijv.
chat). - Je krijgt twee sleutels:
| Sleutel | Waar | Geheim? |
|---|---|---|
| Client-sleutel | In de browser, om te verbinden | Nee — mag publiek |
| API-sleutel | Op je server, om te publiceren en kanalen te ondertekenen | Ja — geheim houden |
Je vindt ze terug op het tabblad Gegevens.
2. Endpoints
| Wat | URL |
|---|---|
| WebSocket (browser) | wss://realtime.eduinsights.nl/ws/app/JE_CLIENT_KEY |
| Events publiceren (server) | https://realtime.eduinsights.nl/api/events |
Je hoeft deze URLs niet handmatig te gebruiken — de meegeleverde bestanden doen dat voor je.
3. Aan de slag
- Installatie — kopieer de drie bestanden en zet je omgevingsvariabelen.
- Client (browser) — events ontvangen met
useChannel. - Server (Next.js) — events publiceren vanuit Server Actions.
- Kanalen — publieke, privé- en presence-kanalen.
4. Koppelen aan een app
Koppel je realtime app aan een Cloud-app (tabblad Database/Realtime op je app) of aan een project (tabblad Delen). Bij koppeling aan een app krijgt die automatisch deze omgevingsvariabelen, precies zoals de basisbestanden ze verwachten:
| Variabele | Voor |
|---|---|
GOPUSHER_URL | Server: basis-URL om events te publiceren |
GOPUSHER_API_KEY | Server: je geheime API-sleutel |
NEXT_PUBLIC_GOPUSHER_HOST | Browser: de websocket-host |
NEXT_PUBLIC_GOPUSHER_KEY | Browser: je client-sleutel |
5. Berichten bekijken
Op het tabblad Berichten zie je live welke events er gepubliceerd worden, met hoeveel verbindingen en kanalen er actief zijn. Berichten worden 1 uur bewaard.
Meer in Realtime (WebSockets)