ターボ ストリームの仕組み (舞台裏)

この記事は元々 Rails Designer で公開されたものです

---

Turbo Streams を使用すると、Web リクエスト (コントローラー アクション) に応じてアプリの特定の部分を更新できます。これは単に Turbo Streams と呼ばれます。または、ターボ ストリーム ブロードキャストとして、バックエンド (モデル上で作成、更新、破棄するか、オブジェクトから手動で) によって WebSocket 経由で (通常は ActionCable 経由で) 起動されます。

ソースは異なりますが、両方の応答 (HTML) は同じです。 Turbo Streams がどのように機能するかを簡単に説明したいと思います。Rails と同じように、魔法は必要ありません ??。単なる古い JavaScript!

ターボ ストリームをブロードキャストするには、次のようにします:

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

コントローラーのアクション (または、それが難しい場合はコントローラーのインライン) については、

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

では、両方のオプションに対して送信される応答 (HTML) は何でしょうか?

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

これは、コントローラー アクション用に作成したターボ ストリーム レスポンスに非常によく似ています。唯一の大きな違いは、HTML の周囲にラップされている template 要素です (部分または ViewComponent から取得されます)。 template 要素は、非表示の HTML コンテンツを保持するコンテナーです。

?ブラウザの開発ツールで次のような応答を確認できます。

ターボ ストリーム要素が DOM に挿入されると、ターボが引き継ぎます。ターボストリームはカスタム要素にすぎません。ここで定義されています。次に、connectedCallback() 関数を定義していることがわかります。この関数は、要素がドキュメントに追加されるたびに呼び出されます。これはカスタム要素の機能です。

それでは、次に何が起こるのでしょうか？最も重要な部分を段階的に見ていきましょう。気を引き締めて！ ?️?

1. カスタム イベント beforeRenderEvent が送出されます;
2. このイベントは renderElement 関数を呼び出します;
3. その後、performAction が呼び出されます;
4. 定義されたアクションが呼び出されます。

最後のファイルには、Turbo Stream でサポートされているすべてのデフォルトのアクション (追加、先頭に追加、置換など) が表示されます。 JavaScript に少しでも慣れていれば、それぞれのアクションが何をしているのか簡単に理解できるはずです (そうでない場合は、JavaScript for Rails Developers を調べてください)。本質的には、削除 アクションを除きます。 template 要素内から HTML を取得し、DOM に追加します (追加、前に追加、後などのアクションに基づいて)。

この知識があれば、カスタム ターボ ストリーム要素を手動で挿入するだけで済み、Turbo がそれを取得することを認識していることがわかるかもしれません。

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

上記の HTML をコピーしてブラウザで表示するだけです。 li 要素が ul 要素に追加されていることがわかります。 ?次に、ブラウザの開発ツールを使用して、別のターボ ストリーム要素を DOM 内の任意の場所に貼り付けます:

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

かなりクールですね? Turbo はブラウザの多くの機能を使用して、誰もが好むスムーズな開発者エクスペリエンスを提供します。これで、Turbo Stream が舞台裏でどのように機能するかがわかりました!

以上がターボ ストリームの仕組み (舞台裏)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。