Comment fonctionnent les flux Turbo (en coulisses)

Cet article a été initialement publié sur Rails Designer

---

Turbo Streams vous permet de mettre à jour des parties spécifiques de votre application sur demande Web (action du contrôleur), appelée simplement Turbo Streams. Ou en tant que Diffusions Turbo Stream lorsqu'elles sont déclenchées par votre back-end (lors de la création, de la mise à jour ou de la destruction du modèle ou manuellement à partir de n'importe quel objet) via des websockets, généralement via ActionCable.

Bien que la source soit différente, la réponse (HTML) pour les deux est la même. Je veux expliquer rapidement comment fonctionnent les Turbo Streams, pour que vous compreniez qu'il n'y a, tout comme avec Rails, aucune magie impliquée ??. Tout simplement du vieux JavaScript !

Pour diffuser un Turbo Stream, faites quelque chose comme ceci :

class Resource < ApplicationRecord
  after_create_commit -> { broadcast_append_to "resources" }
end

Et pour les actions du contrôleur (ou en ligne dans le contrôleur, si c'est votre problème) :

<turbo-stream action="append" target="resources">
  <%= render @resource %>
</turbo-stream>

Alors, quelle est la réponse (HTML) envoyée pour les deux options ?

<turbo-stream action="append" target="resources">
  <template>
    <!-- HTML content of the Resource -->
  </template>
</turbo-stream>

Cela ressemble énormément à la réponse Turbo Stream que vous créez pour les actions du contrôleur ! La seule grande différence est l'élément template enroulé autour du HTML (provenant d'un partiel ou d'un ViewComponent). L'élément template est un conteneur destiné à contenir le contenu HTML masqué.

? Vous pouvez voir des réponses comme celles-ci dans les outils de développement de votre navigateur.

Une fois l'élément turbo stream injecté dans le DOM, Turbo prend le relais. turbo-stream n'est rien de plus qu'un élément personnalisé. C'est défini ici. Vous pouvez le voir définir à son tour une fonctionconnectedCallback(). Cette fonction est appelée chaque fois que l'élément est ajouté au document ; c'est une caractéristique des éléments personnalisés.

Alors, que se passe-t-il ensuite ? Passons en revue les parties les plus importantes, étape par étape. Préparez-vous ! ?️?

1. un événement personnalisé, beforeRenderEvent, est distribué ;
2. cet événement appelle la fonction renderElement ;
3. puis performAction est appelé ;
4. l'action définie est alors appelée.

Dans ce dernier fichier, vous pouvez voir toutes les actions par défaut prises en charge pour Turbo Stream (ajouter, pré-ajouter, remplacer, etc.). Si vous êtes, même un peu, familier avec JavaScript, vous devriez facilement comprendre ce que fait chaque action distincte (sinon ; consultez JavaScript pour les développeurs Rails ?). Essentiellement, à l'exception de l'action supprimer ; récupérez le HTML à partir de l'élément template et ajoutez-le au DOM (en fonction de l'action ; ajouter, pré-ajouter, après, etc.).

Avec cette connaissance, vous constaterez peut-être que vous pouvez simplement insérer manuellement cet élément de flux turbo personnalisé, et Turbo sait le récupérer.

class Resource < ApplicationRecord
  after_create_commit -> { broadcast_append_to "resources" }
end

Copiez simplement le code HTML ci-dessus et affichez-le dans le navigateur. Vous verrez l’élément li ajouté à l’élément ul. ? Ensuite, à l'aide des outils de développement de votre navigateur, collez un autre élément turbo-stream n'importe où dans le DOM :

<turbo-stream action="append" target="resources">
  <%= render @resource %>
</turbo-stream>

Plutôt cool, non ? Turbo utilise de nombreuses fonctionnalités du navigateur pour offrir cette expérience de développement fluide que nous aimons tous. Vous savez maintenant comment fonctionne Turbo Stream dans les coulisses !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!