Notificatiecentrum

Voor een van onze opdrachtgevers hebben we een notificatiecentrum gebouwd. Hiermee worden gebruikers sneller op de hoogte gesteld van nieuwe gebeurtenissen of belangrijke informatie.

Hoe het werkt?

Het notificatiecentrum werkt net zoals het notificatiecentrum in Facebook. Simpel, snel en overzichtelijk.

Het notificatiecentrum bestaat uit meerdere componenten:

• Een component dat real-time verbinding maakt met de eindgebruiker.
• Een component dat notificaties aanmaakt.
• Een component dat notificaties verstuurt naar de eindgebruiker.

Voordat de gebruiker notificaties kan ontvangen, moet er eerst een real-time verbinding gemaakt worden met de notificatieserver. Real-time verbinding wil zeggen dat we een directe 1-op-1 verbinding hebben met de gebruiker. De gebruikers die verbonden zijn, ontvangen live hun notificaties.

Maar wat als de gebruiker niet verbonden is?

Wij slaan de notificaties op, zodat de gebruikers altijd toegang hebben tot hun notificaties, zelfs als ze niet verbonden zijn. 

Infrastructuur

Het notificatiecentrum heeft een eigen infrastructuur voor het afhandelen van notificaties. Deze structuur ziet er als volgt uit: 

1. Website inladen
Als eerste wordt de website ingeladen en getoond aan de gebruiker.
Parallel hieraan start proces 2.

2. Gegevens gebruiker ophalen
We halen de gegevens van de gebruiker op en deze geven we mee aan de website.

3. Real-time verbinding
Als de website klaar is met laden, gaan we een real-time verbinding maken met de notificatieserver. Zodra we een notificatie versturen, kan de verbonden gebruiker deze direct ontvangen, zonder zijn pagina te verversen.

4. Nieuwe notificatie
Vanuit de programmatuur kunnen wij een notificatie versturen naar de gebruiker. We geven de opdracht aan de notificatieserver om de notificatie te versturen via de real-time verbinding naar de gebruiker.

5. Notificatie tonen
De gebruiker ontvangt een melding (de notificatie). Het belletje gaat oplichten, zodat de gebruiker weet dat er een nieuwe notificatie is.

Notificatie verzenden

Nu je weet hoe de infrastructuur eruit ziet, ben je vast nieuwsgierig hoe dit in de code gebeurt. Met het onderstaande stukje PHP-code kunnen we een notificatie verzenden:

Notification::text(‘Hallo nieuwe notificatie!’)->send($user)

$user is een object (samenhang van verschillende eigenschappen), oftewel, de gebruiker. 

Notificatie tonen

Zodra we een notificatie hebben ontvangen, wordt de onderstaande Javascript-code uitgevoerd:

// show the notification dot
showNotificationsDot();

// add notification to list
addNotification(notification);

Door showNotificationsDot() aan te roepen, wordt het groene bolletje getoond. De notificatie voegen we toe aan de lijst door addNotification(notification) aan te roepen. Hier geven we de notificatie aan mee.