Real-time Push Notificaties op jouw website

Op steeds meer websites wordt er gebruik gemaakt van real-time notificaties. Dit zijn berichten die vanaf de server naar jou worden gestuurd wanneer je op de hoogte moet zijn van een belangrijk bericht. Dit kan op elk moment gebeuren (real-time) zonder dat de pagina opnieuw herladen moet worden. Heel handig dus!

Voorbeelden

Als je ooit Facebook of de web versie van Whatsapp hebt gebruikt, weet je waarschijnlijk wel wat er bedoelt wordt. Je Facebook vriend heeft een nieuw bericht op jouw timeline gezet, en jij krijgt er meteen een notificatie van. Je contact persoon op Whatsapp stuurt je een bericht, en je kan meteen zien wie jou een bericht stuurt, en de inhoud van het bericht. Ook kun je bepalen wat er gebeurt wanneer de gebruiker op een notificatie klikt. Bijvoorbeeld, je kunt de gebruiker naar een bepaalde pagina sturen.

Ondersteuning

De meest moderne browsers (Chrome, Firefox, Opera & Internet Explorer) ondersteunen deze technologie tegenwoordig. Wanneer de gebruiker op jouw website komt, krijg de gebruiker een melding of hij/zij meldingen wilt ontvangen. De gebruiker kan deze dan accepteren of blokkeren.

Werking

Een groot deel van alle websites die real-time notificaties hebben, gebruikt NodeJS (https://nodejs.org/en/). Dit is een gratis programma dat geïnstalleerd kan worden op de server, en gebruikt wordt om Javascript code uit te voeren. Er zijn talloze packages beschikbaar om gebruik van te maken. Denk bijvoorbeeld aan MYSQL, een package om via Javascript database gegevens op te halen, te bewerken, verwijderen etc. Deze packages zijn allemaal open-source en redelijk tot goed gedocumenteerd.

Push!

Om een redelijk beeld te krijgen over hoe de push notificaties precies werken, is het makkelijk om dit stap voor stap uit te leggen:

1. Op de server waar de website op draait moet NodeJS geïnstalleerd zijn. Ook moet er een package genoemd Socket.io (http://socket.io/) geïnstalleerd zijn voor NodeJS. Vervolgens moet jouw zelfgemaakte Javascript code uitgevoerd worden.
2. Een gebruiker komt op een pagina van jouw website.
3. Er wordt vanaf Gebruiker1 een ‘pakketje’ gestuurd naar de server. Dit pakketje wordt ook wel een TCP Socket genoemd, vandaar dat Socket.io nodig is. Dit pakketje heeft een label, bijvoorbeeld UserConnected, en bevat nodige gebruikersinformatie zoals ID,USERNAME & SOCKETID.
4. Het pakketje “UserConnected” komt nu aan op de server. Op de server kun je dit pakketje uitlezen. Op dit moment is het handig om deze gebruiker op te slaan in een lijst van actieve gebruikers.
5. Op de server wordt er nu elke minuut gekeken of er nieuwe belangrijke berichten zijn.
6. Er is een belangrijk bericht! De server gaat door de lijst van gebruikers en zoekt voor welke gebruikers dit bericht bestemd is. Op de server wordt vervolgens weer een pakketje gestuurd met label “UserMessage” naar de bestemde gebruikers.
7. De gebruiker krijg het pakketje “UserMessage” binnen, en het bericht wordt vervolgens getoond voor de gebruiker.

Hoe veilig is dit?

Als het gaat om overdragen van gevoelige informatie, is het uiteraard belangrijk dat het goed beveiligd is. Wat de gebruiker bijvoorbeeld kan doen, is de ID die de gebruiker mee stuurt in het pakketje naar de server veranderen. De gebruiker krijgt dan informatie binnen die bestemd zijn voor andere gebruikers.

Je zou hiervoor natuurlijk op de server nog eens de gebruiker kunnen valideren. In plaats van dat de gebruiker een ID & Username mee stuurt in een pakketje, stuurt de gebruiker zijn Username & Password. Op de server worden deze gegevens nog eens in de database gecontroleerd. Zie dit als een login.

Wat je hier bijvoorbeeld ook tegen kan doen, is een moeilijke encryptie schrijven die de UserID & Password samenvoegt, en deze vervolgens via het pakketje mee sturen naar de server. Dit kunnen andere gebruikers niet verkrijgen tenzij ze jouw encryptie algoritme weten.

 

Koen Baas
Qlic