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.

In schemavorm ziet dit er zo uit:

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:

{"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?

Auteur: Joris Vercammen
Developer
Joris Vercammen

More insights

Codana wint Digital Champ of the year award 2022

Codana is de winnaar van de FeWeb Digital Champ award 2022

Auteur: Joris De Groot
Strategic Director and Managing Partner
Joris De Groot
FeWeb Digital Champ award Codana

De ideale eerste werkplek

Ik ben Ward Vandevoort, 22 jaar en begin november 2021 ben ik gestart bij Codana als junior backend developer. Ontdek mijn verhaal bij Codana! 

Auteur: Ward Vandevoort
Developer
Ward Vandevoort
groepsfoto

Teambuilding met internationale collega's

Een zalige teambuilding in Antwerpen!

Auteur: Noah Gillard
PHP Developer
Noah Gillard
groepsfoto codana burgerij

Het leven als React developer bij Codana: 1 jaar in dienst

“U kan bij ons aan de slag als React developer!”. Wow, zalig! Ik was natuurlijk super blij dit te horen! Maar, ik had nog nooit een lijn React geschreven.

Auteur: Thomas Timmermans
Frontend Developer
Thomas Timmermans
Ik na 1 jaar in dienst

Nova 4.0 is er!

De belangrijkste nieuwigheden uitgelicht.

Auteur: Noah Gillard
PHP Developer
Noah Gillard
Thumbnail Blog Nova 4 Release Codana Styled

Laracon Online Winter 2022

Wat zijn de key take aways?

Auteur: Tom Van den Eynden
Senior PHP developer
Tom Van den Eynden
Laracon winter 2022 Codana Banner