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

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

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

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

背景

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

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

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

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

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

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

推奨設(shè)定の推奨はこの記事の範(fàn)囲外ですが、主に 2 つの方法があります:

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

json-viewの問題

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

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

レンダリングでソケット割り當(dāng)てを使用することでこれを?qū)g現(xiàn)します。

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

ただし、json-view のようなライブラリは 命令型モデル で動作します。 DOM 自體のレイアウトの外側(cè)で、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 のようなライブラリが必要です。

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

フックのセットアップ

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

フックは LiveSocket で定義され、phx-hook 屬性を使用して要素にアタッチされます。コールバックは多數(shù)ありますが、他のすべてはイベント経由で調(diào)整できるため、マウントされたコールバックに焦點を當(dāng)てます。他のライフサイクル イベントにもコールバックを指定できます - ドキュメントを確認(rèn)してください。

マウントされたようなコールバック內(nèi)で、フックは 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 }, ...}
 );
...

これらの數(shù)行のコードでいくつかのことを?qū)g行します。

1. mounted 関數(shù)を使用して JsonViewHook オブジェクトを定義します。この関數(shù)は、このフックを持つ要素が DOM にマウントされるときに呼び出されます。
2. mounted 內(nèi)で、「render_json」というカスタム イベントのイベント リスナーを設(shè)定します。このイベントは LiveView からトリガーされます。
3. イベントを受信すると、レンダリングされる JSON を含む data パラメーターが期待されます。
4. 要素の既存のコンテンツをクリアします。
5. jsonview.create と jsonview.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 ドキ??ュメントの関連セクションでは、ハンドラー関數(shù)を指定して応答ペイロードを直接処理するシナリオなど、this.pushEvent のさらなる可能性について説明しています。

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

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

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

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

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

さらなる統(tǒng)合

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

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

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

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

結(jié)論

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

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

以上がPhoenix LiveView、フック、push_event: json_viewの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。