Développe ta MESSAGERIE en TEMPS RÉEL avec Socket.io

Merci ! Partagez avec vos amis !

Vous avez aimé cette vidéo, merci de votre vote !

Ajoutées 1 année by admin

25 Vues

Nous allons utiliser la librairie Socket.io pour activer la communication en temps réelle dans notre API NestJS. Côté serveur, nous devons écrire la logique dans un nouveau type de fichier : le Gateway. La documentation de NestJS nous permet facilement de commencer l'implémentation. Ensuite, nous envoyons un évènement (ou message) à notre application frontend, qui devra s'inscrire aux messages entrants.

Nous testons également l'intégration avec Postman.

Côté client, nous mettons en place un contexte de React avec createContext et useContext, pour utiliser notre socket dans n'importe quel composant de notre application. Ensuite, à chaque communication entrante (envoyée depuis notre API), nous mettons à jour notre tableau de messages dans un useState. Pour cela nous utilisons useEffect (pour s'inscrire aux messages entrants).

00:00 Introduction
00:18 Résumé
01:10 Implémentation de socket.io (côté serveur)
02:20 Test de l'implémentation sur Postman
02:55 Envoi du premier message (API)
04:15 Réception d'un message (côté serveur)
05:15 Réponse du serveur au client (Postman)
06:45 Sauvegarde du chat en base de données
10:00 Implémentation du tchat (côté client)
11:22 Envoi des messages mis à jour (côté serveur)
14:05 Test de l'intégration sur Postman
16:03 Création du hook useSocket.tsx (côté client)

Lien du repo (API) : https://github.com/Varkoff/nestjs-chat
Lien du repo (client) : https://github.com/Varkoff/nestjs-chat-front

Blog : https://varkoff.fr

Je partage tout sur twitter ! : https://twitter.com/Varkoffs
Connecte-toi sur LinkedIn : https://www.linkedin.com/in/virgile-rietsch