HackerNews

TurboはどのようにTurbo Streamsをリッスンするか

How does Turbo listen for Turbo Streams

https://ducktypelabs.com/how-does-turbo-listen-for-turbo-streams/


TurboはTurbo Streamsをどのようにリッスンしているのでしょうか?Turbo Streamは、追加されるとDOMを変更するカスタムHTML要素です。タグはアクション属性を指定することで、7つの「DOM変更」アクションのいずれかを引き起こします。例えば、ユーザーが新しい本を作成するフォームを送信すると、サーバーから新しい本のエントリを含む要素が返ります。Turboはこれを受け取り、DOMに追加してページに新しい本のHTMLを表示します。そのため、フォームが送信された際に、TurboがサーバーにどのようにTurbo Stream要素を返すよう指示するのか、またサーバーが返したTurbo Stream要素をTurboがどのように認識してDOMに追加するのかが重要な質問です。Turboは、ユーザーのブラウザで開始されると、submitイベントのリスナーを追加し、フォームが送信されるとTurbo Driveを介してそのデータをサーバーに送信します。サーバーがTurbo Streamsで応答する場合、TurboはContent-Typeヘッダーを確認し、必要に応じてDOMに追加します。このプロセスを理解することは、機能を構築する際の問題解決能力を向上させます。