Real-time chat met Laravel, React & Node.js
Voor het odisee MyCompass project dat we recent hebben afgewerkt, hebben we een real-time chat gemaakt. We hebben hiervoor gebruik gemaakt van Laravel, React en Laravel echo server.
Als gebruiker kan je rechtstreeks chatten met je coach en in de wereld van vandaag moeten zo’n dingen synchroon kunnen verlopen: als je coach beschikbaar is, wil je daar rechtstreeks mee kunnen chatten zonder vertragingen. Deze gesprekken zijn vertrouwelijk, dus moeten we er natuurlijk ook voor zorgen dat dit op een veilige en betrouwbare manier gebeurt.
Daarom hebben we verschillende lagen van security ingebouwd.
De gebruiker drukt op verzenden en stuurt een POST request met de inhoud van het bericht naar de API. De API verwerkt dit bericht, slaat het op in de database en zet in een queue (wachtrij) een message met deze inhoud:
1
{"user-id": "42", "sender": "9", "content": "new-message"}.
Als de queue dan verwerkt wordt door supervisor (proces dat altijd draaiende wordt gehouden), wordt er een bericht gestuurd naar de NodeJS server.
Deze stuurt dan op zijn beurt een pushbericht over een websocket naar de browser van enkel deze ene gebruiker (42). Wanneer dat aangekomen is, vraagt de browser van die gebruiker aan de API om "new-message" berichten op te halen in het gesprek met user 9.
Omdat er enkel wordt doorgestuurd dat er een nieuw bericht is, en de inhoud van dat bericht zelf apart moet opgehaald worden, blijft dit allemaal secure. De socket krijgt dus alleen maar informatie over nieuwe messages en de inhoud daarvan blijft achter de gewone API zitten.
Door gebruik te maken van reeds bestaande packages is dit eenvoudig te implementeren. We hebben voor het NodeJS stuk alleszins geen eigen code moeten schrijven maar volledig op het reeds bestaande pakket kunnen doorbouwen. Voor het gedeelte in Laravel hebben we een custom broadcast service en een custom notification class geschreven.
Aan de React kant van de applicatie kunnen we gebruik maken van een al bestaande socket.io implementatie, dus ook daarvoor hebben we kunnen steunen op een reeds bestaande code.
Meer weten over het project?
Lees je graag meer over hoe we deze case tot een succesvol platform hebben gemaakt?
