Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Mário Cardoso

Min Read

18 mai 2021

WebSockets et câble d'action dans Rails 5

Comme vous le savez peut-être, Rails 5 est là et a un acolyte passionnant ! Mesdames et messieurs, joignons-nous les mains et souhaitons la bienvenue Câble d'action, le cadre de nouveauté qui intègre WebSocket communication avec Rails.

Aujourd'hui, je souhaite partager quelques réflexions sur ce framework, en commençant par WebSockets, en passant à Action Cable, puis en expliquant les problèmes auxquels les WebSockets sont la solution et l'éventail de solutions que l'on peut mettre en place.

La grande finale portera sur la structure et la dynamique de notre héros du jour, Action Cable.

blue arrow to the left
Imaginary Cloud logo

WebSockets

Que sont les WebSockets ? Si vous essayez de trouver cette réponse sur Internet, vous pouvez obtenir des déclarations telles que :

« Les WebSockets sont ces outils intéressants que les utilisateurs de Node peuvent utiliser »

ou

« J'ai entendu dire que les WebSockets sont l'avenir »

Shia Labeouf SNL

Les WebSockets sont essentiellement une autre couche de communication entre le client et le serveur mais, contrairement aux requêtes HTTP, leurs connexions sont majestueux. Cela signifie que le lien entre le client et le serveur reste constant et connecté.

Les connexions WebSocket permettent une communication simultanée et bidirectionnelle, permettant au client et au serveur d'envoyer des messages à tout moment via le canal.

Un autre avantage de l'utilisation de WebSockets est une fois la connexion établie, vous n'avez pas besoin d'échanger beaucoup de métadonnées (en-têtes HTTP). Puisqu'il y a un WebSocket par client vous n'avez pas besoin de vous identifier à chaque fois que vous envoyez des données au serveur, car le serveur sait déjà qui vous êtes car il sait qui a ouvert la chaîne.

Le dernier avantage (et évident) est que vous pouvez bénéficier de fonctionnalités réellement en temps réel, comme les salons de discussion ou les notifications, sans avoir besoin, par exemple, d'utiliser le sondage, qui ajoute des charges aux serveurs.

D'un autre côté, le gros avantage d'utiliser HTTP au lieu de WebSockets est qu'il y a beaucoup de choses déjà implémentées pour HTTP, comme la mise en cache, le routage et le multiplexage, qui ne le sont toujours pas Prêt pour WebSockets.

Câble d'action

Qu'est-ce qu'Action Cable ? Sur sa propre page Github :

Action Cable intègre parfaitement WebSockets au reste de votre application Rails. Il permet d'écrire des fonctionnalités en temps réel dans Ruby dans le même style et la même forme que le reste de votre application Rails, tout en restant évolutif et en maintenant les performances. Il s'agit d'une offre complète qui fournit à la fois un framework JavaScript côté client et un framework Ruby côté serveur. Vous avez accès à votre modèle de domaine complet écrit avec Active Record ou l'ORM de votre choix.

Ça a l'air génial. Action Cable est un ajout puissant à Rails, fournissant une interface claire à la fois pour le code Javascript côté client et pour le code Rails côté serveur. Une chose que j'ai trouvée particulièrement intéressante est que Rails 5 est livré avec Redis par défaut car Action Cable l'utilise comme service pub-sub pour les abonnés de la chaîne.

Pourquoi avons-nous besoin de WebSockets

Tout cela est très intéressant, mais en tant qu'entreprise, nous utilisons la technologie pour résoudre les problèmes de nos clients. Alors pourquoi avons-nous besoin de WebSockets et d'Action Cable ? J'ai trouvé trois raisons principales.

Le premier est quand il faut envoyer et recevoir des données rapidement avec le serveur, par exemple, dans les jeux en ligne sur navigateur qui ont besoin d'échanger plusieurs messages par seconde avec le serveur, ou des informations sur le marché boursier, en constante évolution.

Un autre est diffusion en continu. Les WebSockets sont une bonne option, même si je pense que Rails n'est pas couramment utilisé pour les applications de streaming. Cela pourrait changer dans un proche avenir avec l'aide de WebSockets et d'Action Cable.

Enfin, et ce n'est pas le moindre, éléments vivants, tels que sections de commentaires qui sont automatiquement mis à jour lorsqu'un nouveau contenu est ajouté sans actualisation de la page et, bien sûr, des salons de discussion. Ici, nous voulons que la page soit mise à jour lorsque les données changent sur le serveur sans intervention de l'utilisateur, afin de tirer le meilleur parti des capacités d'Action Cable.

Mais il existe des alternatives aux WebSockets.

Sondage est une solution populaire !

Les sondages obligent le client à demander périodiquement au serveur s'il y a de nouvelles données. L'avantage ? Il est solide comme le roc et très simple à installer. Le principal inconvénient est d'augmenter la charge des serveurs. La mise en cache HTTP est très utile pour alléger cette charge.

Les sondages sont acceptables pour des éléments tels que les sections de commentaires, mais pas pour les besoins de communication rapide. L'application de chat Basecamp, qui a utilisé un sondage en 3 secondes pendant 10 ans, en est un exemple, mais avec Basecamp 3, elle est passée à Action Cable.

Les autres options « moins populaires » sont les interrogations longues et les événements envoyés par le serveur.

Dans Sondage long le client envoie une demande au serveur pour obtenir de nouvelles données et, si le serveur possède de nouvelles données, il renvoie une réponse comme une requête HTTP normale ; sinon, il conserve la demande et complète la réponse lorsque de nouvelles données apparaissent.

Cela s'effondre rapidement si les données changent souvent. De plus, les techniques de sondage à long terme sont bien plus compliquées à mettre en œuvre que les techniques de sondage.

Événements envoyés par le serveur sont des connexions unidirectionnelles entre le serveur et le client. Non seulement ils ne disposent pas d'un support approprié, mais ils ne permettent pas non plus au client de renvoyer des données au serveur.

Comment fonctionne Action Cable

Juste pour me faire une idée d'Action Cable en action, j'ai créé une application de chat simple. Il est basé sur la connexion, dispose d'une salle pour échanger des messages et vous pouvez voir les utilisateurs en ligne. Je vais maintenant parler des principaux éléments liés à Action Cable.

Structure côté serveur :

Lorsque vous créez votre application Rails 5, vous avez maintenant un autre dossier dans le répertoire de l'application, le chaînes dossier.

Channels Folder

Dans le dossier channels, vous trouverez câble_d'application dossier qui contient le channel.rb fichier et connexion.rb dossier.

Le connexion.rb le fichier hérite de la forme Câble d'action : :Connection : :Base et il est utilisé pour l'authentification générale. Nous pouvons utiliser ce module pour interroger la base de données pour un utilisateur spécifique qui établit la connexion et nous assurer que l'utilisateur est autorisé à écouter la chaîne.

Le channel.rb hérite de ActionCable : :Channel : :Base et il est similaire à l'ApplicationController dans notre application Rails normale.

appearance_channel.rb and room_channel.rb

Ensuite, nous avons deux chaînes sous le dossier, la appearance_channel.rb et le room_channel.rb. Ce sont les chaînes que j'ai

créé. Les chaînes ont les mêmes méthodes d'abonnement et de désinscription :

  • Le abonné le callback est invoqué lorsqu'un abonnement côté client est initié ;
  • Le désabonné le callback est invoqué lorsqu'un abonnement côté client est résilié.

Appearance Channel possède également deux autres méthodes qui peuvent être invoquées par le client. Room Channel dispose d'une autre méthode, la parler méthode, qui est également utilisée par le client pour envoyer des messages au canal.

AppearanceChannel
Client Side Structure

Du côté du client, nous avons câble.coffee fichier chargé de créer la connexion entre le client et le serveur.

Channel's Subscribers

Ensuite, nous avons les abonnés de la chaîne. Dans ce cas, nous avons l'abonné d'apparence qui a rejoint la chaîne d'apparence et nous avons l'abonné de la chaîne de salle qui a rejoint la chaîne de salle.

Channel Subscription

Nous pouvons voir dans l'image ci-dessus comment se fait l'abonnement à la chaîne.
Les abonnés ont quelques méthodes en commun :

  • Le connecté la méthode est appelée lorsque l'abonnement est prêt à être utilisé sur le serveur ;

  • Le déconnecté la méthode est appelée lorsque l'abonnement a été résilié par le serveur ;

  • Et enfin le reçu méthode appelée lorsque le serveur envoie des données au client.

Chaque chaîne peut ensuite implémenter différentes méthodes qui interagissent avec la chaîne à laquelle elle est abonnée côté serveur. C'est le cas de parler, apparaître et loin méthodes qui peuvent envoyer des données et appeler les méthodes correspondantes côté serveur.

En bref

Rails est vivant et nous apporte des frameworks plus nombreux (et de meilleurs) pour nous aider à créer des produits plus efficacement.

Action Cable est l'un de ces frameworks et je crois sincèrement qu'il peut être très utile de créer des éléments dynamiques qui sont si populaires dans les applications Web actuelles.

Je suis également curieux de connaître les joyaux qui peuvent être créés à partir d'Action Cable, et j'ai hâte de voir comment la communauté adoptera ce nouvel outil.

À Imaginary Cloud nous travaillons avec un large éventail de technologies, y compris Ruby on Rails. Si vous avez besoin d'aide avec cette technologie ou des technologies similaires dans le cadre de votre projet de développement logiciel, nous avons une équipe d'experts qui vous attend ! Envoyez-nous un message ici!

Grow your revenue and user engagement by running a UX Audit! - Book a call

Vous avez trouvé cet article utile ? Ceux-ci vous plairont peut-être aussi !

blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
Mário Cardoso
Mário Cardoso

Professionnel ayant de l'expérience en génie logiciel et en systèmes d'information, spécialisé dans l'ingénierie Web complète.

Read more posts by this author

People who read this post, also found these interesting:

arrow left
arrow to the right
Dropdown caret icon