ホームページ >ウェブフロントエンド >jsチュートリアル >Phoenix LiveView、フック、push_event: json_view

Phoenix LiveView、フック、push_event: json_view

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-12-15 09:53:08347ブラウズ

Phoenix LiveView は Elixir 上に構築された強力なフレームワークであり、広範な Javascript を必要とせずにリアルタイム Web インターフェイスを構築するための革新的なアプローチを提供します。

ただし、グラフ作成、視覚化、レンダリング用のライブラリなど、既存のクライアント側ライブラリとの統合が困難になる場合があります。

この記事では、Phoenix LiveView を DOM に直接レンダリングする Javascript ライブラリと統合する方法を検討します。

フックについて説明します。これにより、指定された要素の特定のライフサイクル要素で Javascript を実行できるようになり、これらのフックが イベント のストリームをどのように有効にするか ( を使用) LiveView では Push_event、JavaScript では pushEvent) を使用して、双方向のリアルタイムを可能にします。クライアントとサーバー間の通信。

背景

TLDR: Phoenix LiveView では、フックと Push_event を使用してデータをプッシュし、クライアント側ライブラリにレンダリングを処理させることができます。

json-view (デモ) - Web ページ上の JSON オブジェクトを展開したり折りたたんだりできるツリーとして表示します。これは、一部のクライアント側 Javascript ライブラリが DOM へのレンダリングと DOM との対話を制御する方法の良い例です。 .

Phoenix LiveView, hooks and push_event: json_view

これを (LiveView) サーバーによって提供される JSON データと統合する方法の例を見てみましょう。イベントに応じてバックエンドから静的データを送信しますが、このデータは任意のソースから取得される可能性があります。

以下では、mix phx.new を使用し、LiveView を有効にして Phoenix プロジェクトを設定していることを前提としています。

ライブラリのセットアップ

JavaScript パッケージをページの Javascript の一部として組み込む方法は複数あります。

推奨設定の推奨はこの記事の範囲外ですが、主に 2 つの方法があります:

  • assets/vendor - 一般的な LiveView プロジェクト テンプレートでは、トップバーはこのディレクトリに配置され、assets/app/app.js エントリポイント ファイルに含まれます。これは、特にライブラリの単一ファイル バージョンが提供されている場合、一般に小さくて安定したライブラリに適しています。
  • NPM/Yarn - esbuild と webpack は、参照された node_modules ファイルを 1 つの配布ファイルにパックできます。これは、より頻繁に変更される、大規模で複雑なライブラリに適しています。

json-viewの問題

2 つのライブラリを結合しようとすると、互換性のないレンダリング モデルが 2 つ存在します。

LiveView は 宣言モデル に従います。ビューを設計し、どのデータを表示するかを決定すると、基礎となるデータが変更されたときに LiveView がページのどの要素を変更する必要があるかを判断します。

レンダリングでソケット割り当てを使用することでこれを実現します。

def render(assigns) do
  ~H"""
  <p>Hello <%= @name %></p>
  """
 end

ただし、json-view のようなライブラリは 命令型モデル で動作します。 DOM 自体のレイアウトの外側で、JavaScript でデータを表示するために必要な手順を指定します。

import jsonview from '@pgrabovets/json-view';

const data = '{"name": "json-view", "version": "1.0.0"}'
const tree = jsonview.create(data);
jsonview.render(tree, document.querySelector('.tree'));

これら 2 つのモデルは対立しています。データをレンダリングする 2 つの方法 (宣言型と命令型) を一致させる方法はないようですが、クライアントでリッチなインターフェイスをレンダリングするには json-view のようなライブラリが必要です。

基本的に、サーバーがページ状態の変更を要求するときに Javascript コードを実行する必要があります。これら 2 つのレンダリング モデルを調整するのに役立つ フック を見てみましょう。

フックのセットアップ

LiveView では、フック は、(ブラウザ) クライアントと (LiveView) サーバー間の双方向通信を提供する方法であり、通信の中心となるオブジェクトは イベント です。

フックは LiveSocket で定義され、phx-hook 属性を使用して要素にアタッチされます。コールバックは多数ありますが、他のすべてはイベント経由で調整できるため、マウントされたコールバックに焦点を当てます。他のライフサイクル イベントにもコールバックを指定できます - ドキュメントを確認してください。

マウントされたようなコールバック内で、フックは this.pushEvent を使用してイベントをバックエンドに送信し、this.handleEvent を使用して特定のイベント名のハンドラーを登録することでサーバーからのイベントを処理します。

要素ごとに許可されるフックは 1 つだけであることに注意することが重要です。そのため、クライアントとサーバー間のイベントの 1 つのストリームについて推論する必要があるだけです。

この知識を念頭に置いて、イベント ハンドラーを登録する JsonView フックを定義しましょう。最終的に要素に対して jsonview.render を呼び出してデータのツリーをレンダリングします。

import { Socket } from 'phoenix';
import jsonview from '@pgrabovets/json-view';

const JsonViewHook = {
  mounted() {
    this.handleEvent("render_json", ({ data }) => {
      this.el.innerHTML = "";
      const tree = jsonview.create(data);
      jsonview.render(tree, this.el);
    });
  }
}

const liveSocket = new LiveSocket(
  "/live",
  Socket,
  {hooks: { JsonView: JsonViewHook }, ...}
 );
...

これらの数行のコードでいくつかのことを実行します。

  1. mounted 関数を使用して JsonViewHook オブジェクトを定義します。この関数は、このフックを持つ要素が DOM にマウントされるときに呼び出されます。
  2. mounted 内で、「render_json」というカスタム イベントのイベント リスナーを設定します。このイベントは LiveView からトリガーされます。
  3. イベントを受信すると、レンダリングされる JSON を含む data パラメーターが期待されます。
  4. 要素の既存のコンテンツをクリアします。
  5. jsonview.createjsonview.render を使用して、JSON データを要素にレンダリングします。

このフックを使用するには、フックの名前 (「JsonView」) を持つ phx-hook 属性を要素に追加するだけです:

<div>



<h2>
  
  
  Sending events to the server
</h2>

<p>We’ll just need to trigger an event from the backend to provide this data. We’ll leave this outside the scope of this article for now - perhaps a button could trigger an event to the backend? - but you could use this.pushEvent from the mounted hook like so:<br>
</p>

<pre class="brush:php;toolbar:false">mounted() {
  this.pushEvent("send_json", {});
}

handle_info で処理できるイベントを LiveView サーバーに送信します。 LiveView ドキ​​ュメントの関連セクションでは、ハンドラー関数を指定して応答ペイロードを直接処理するシナリオなど、this.pushEvent のさらなる可能性について説明しています。

サーバーからイベントを送信する

push_event/3 は、LiveView からブラウザにイベントをプッシュする方法です。マウント時を含め、いつでも呼び出すことができますが、イベントを送信する前に、ページとそのすべての要素が既知の状態であることを確認することをお勧めします。そうしないと、ページ設定中にイベントが静かにドロップされ、予測不能への確実なルートとなります!

クライアントから受け取る可能性のあるイベントの handle_event 句を記述して、イベントをクライアントにプッシュしましょう。

def render(assigns) do
  ~H"""
  <p>Hello <%= @name %></p>
  """
 end

それだけです!そしてここにも柔軟性があります。クライアントとサーバーの両方に名前を付けてイベント ハンドラーを登録すると、イベントの処理とイベントの発生方法が明確に分離されます。

さらなる統合

クライアントとサーバー間の統合の簡単な例を見てきました。これの一般的な拡張は、イベント パラメーターと要素属性を使用して、特定の更新を特定の要素に限定することです。これは、不必要なイベントとハンドラーの作業の量を減らすのに役立ちます。

このイベント処理は、クライアント側ライブラリとバックエンドをより緊密に統合するために拡張することもできます。たとえば、通常、これらの Javascript ライブラリは、より高レベルのユーザー インタラクション イベントを発行します。私たちのライブラリ例である json-view はこれを行いませんが、chart.js のようなグラフ作成ライブラリはこれを行います。

ただし、ユーザー対話の観点から、処理のためにサーバーへのラウンドトリップは一般に避けるべきです。通常、イベントに基づくレンダリングの更新は、クライアント側のレンダリング ライブラリによって処理されます。

しかし、他の理由でユーザーアクティビティをキャプチャすることは一般的な使用例です。これには、監視、ログ記録、分析が含まれます。これらは応答を必要としないため、フック内からの PushEvent はサーバー上のこのタイプの非同期処理に最適です。

結論

DOM の制御を必要とする強力な Javascript クライアント側ライブラリを統合することは、リッチで動的なユーザー インターフェイスを作成する上で重要な部分です。すべてのページ更新がリアルタイムである必要はないため、LiveView を保持すると、他のページの状態を引き続き制御するための強力かつ簡単な方法が提供されます。

LiveView フックとそれに関連するイベントに慣れると、これらをサーバーからのデータと統合できるようになります。また、すべてのユーザーの対話操作でサーバーとの往復が必要なわけではないこと、また、強力な Javascript ライブラリを使用すると、構築するインターフェイスの柔軟性と応答性が向上することにも注意することが重要です。

以上がPhoenix LiveView、フック、push_event: json_viewの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。