Les WebSockets permettent à votre application d'avoir des fonctionnalités "en temps réel", où les mises à jour sont instantanées car elles sont transmises sur un canal ouvert et bidirectionnel.
Ceci est différent des applications CRUD, qui utilisent généralement des requêtes HTTP qui doivent établir une connexion, envoyer une requête, recevoir une réponse, puis fermer la connexion.
Pour utiliser WebSockets dans votre application React, vous aurez besoin d'un serveur dédié, tel qu'une application ExpressJS avec NodeJS, afin de maintenir une connexion persistante.
Malheureusement, les solutions sans serveur (par exemple, NextJS, AWS lambda) ne prennent pas nativement en charge les WebSockets. Dommage. 😞
Pourquoi pas? Eh bien, les services sans serveur s'activent et se désactivent en fonction de l'arrivée d'une demande. Avec WebSockets, nous avons besoin de cette connexion "toujours active" que seul un serveur dédié peut fournir (bien que vous puissiez payer pour des services tiers comme solution de contournement).
Heureusement, nous allons parler de deux excellentes façons d'implémenter WebSockets :
Ces méthodes vous permettent de créer des choses amusantes, comme cette application de « vote avec des amis » mise à jour instantanément que nous avons créée ici (consultez le dépôt GitHub pour cela) :
Nous travaillons dur pour vous aider à créer des applications Web performantes aussi facilement que possible, notamment en créant du contenu comme celui-ci, qui est publié chaque semaine !
Nous serions très reconnaissants si vous pouviez nous soutenir en mettant en vedette notre repo sur GitHub : https://www.github.com/wasp-lang/wasp 🙏
Pour info, Wasp = } est le seul framework React/Node fullstack open-source et entièrement serveur avec un compilateur intégré et des fonctionnalités assistées par l'IA qui vous permettent de créer votre application très rapidement.
même Ron jouerait Wasp sur GitHub 🤩
Alors, imaginez que vous êtes à une fête en train d'envoyer des SMS à un ami pour lui dire quelle nourriture apporter.
Maintenant, ne serait-il pas plus simple d'appeler votre ami au téléphone pour pouvoir parler constamment, au lieu d'envoyer des messages sporadiques ? C'est à peu près ce que sont les WebSockets dans le monde des applications Web.
Par exemple, les requêtes HTTP traditionnelles (par exemple, CRUD/RESTful) sont comme ces messages texte - votre application doit demander au serveur chaque fois qu'elle veut de nouvelles informations, tout comme vous deviez envoyer un message texte à votre ami chaque fois que vous pensiez à la nourriture. pour votre fête.
Mais avec WebSockets, une fois qu'une connexion est établie, elle reste ouverte pour une communication bidirectionnelle constante, de sorte que le serveur peut envoyer de nouvelles informations à votre application dès qu'elle devient disponible, même si le client ne l'a pas demandé.
C'est parfait pour les applications en temps réel comme les applications de chat, les serveurs de jeux ou lorsque vous suivez les cours des actions. Par exemple, des applications comme Google Docs, Slack, WhatsApp, Uber, Zoom et Robinhood utilisent toutes WebSockets pour alimenter leurs fonctionnalités de communication en temps réel.
Alors rappelez-vous, lorsque votre application et votre serveur ont beaucoup à dire, optez pour WebSockets et laissez la conversation se dérouler librement !
Si vous voulez des fonctionnalités en temps réel dans votre application, vous n'avez pas toujours besoin de WebSockets. Vous pouvez implémenter des fonctionnalités similaires en utilisant des processus gourmands en ressources, tels que :
setIntervalpour accéder périodiquement au serveur et vérifier les mises à jour.Les WebSockets, quant à eux, fournissent un canal de communication bidirectionnel (alias « full-duplex ») entre le client et le serveur.
Comme le montre l'image ci-dessus, une fois qu'une connexion est établie via une "prise de contact" HTTP, le serveur et le client peuvent échanger librement des informations instantanément avant que la connexion ne soit finalement fermée de part et d'autre.
Bien que l'introduction de WebSockets ajoute de la complexité en raison des composants asynchrones et pilotés par les événements, le choix des bibliothèques et des frameworks appropriés peut faciliter la tâche.
Dans les sections ci-dessous, nous vous montrerons deux manières d'implémenter WebSockets dans une application React-NodeJS :
Mais d'abord, voici un "avertissement" pour vous : bien qu'elles soient une excellente solution pour certains cas d'utilisation, les solutions sans serveur ne sont pas le bon outil pour ce travail.
Cela signifie que les frameworks et infrastructures populaires, comme NextJS et AWS Lambda, ne prennent pas e...
[Courte citation de 8% de l'article original]