Phoenix LiveView, Hooks und push_event: json_view

Phoenix LiveView ist ein leistungsstarkes Framework, das auf Elixir basiert und einen innovativen Ansatz zum Erstellen von Echtzeit-Webschnittstellen bietet, ohne dass umfangreiches Javascript erforderlich ist.

Allerdings kann sich die Integration in vorhandene clientseitige Bibliotheken, etwa für die grafische Darstellung, Visualisierung oder das Rendering, manchmal als Herausforderung erweisen.

In diesem Artikel untersuchen wir, wie wir Phoenix LiveView mit Javascript-Bibliotheken integrieren können, die direkt im DOM rendern.

Wir werden auf Hooks stoßen, die es uns ermöglichen, Javascript auf bestimmten Lebenszykluselementen für ein bestimmtes Element auszuführen, und wie diese Hooks Streams von Ereignissen ermöglichen (unter Verwendung von push_event in LiveView und pushEvent in Javascript), um bidirektional zu ermöglichen Echtzeitkommunikation zwischen Client und Server.

Hintergrund

TLDR: In Phoenix LiveView können Sie Hooks und push_event zum Pushen von Daten verwenden und die clientseitige Bibliothek das Rendern übernehmen lassen.

json-view (Demo) – das JSON-Objekte auf einer Webseite als Baum anzeigt, der erweitert und reduziert werden kann – ist ein gutes Beispiel dafür, wie einige clientseitige Javascript-Bibliotheken die Kontrolle über das Rendern im DOM und die Interaktion damit übernehmen .

Lassen Sie uns ein Beispiel durcharbeiten, wie dies mit JSON-Daten integriert werden kann, die vom (LiveView-)Server bereitgestellt werden. Als Reaktion auf ein Ereignis senden wir einige statische Daten vom Backend, diese Daten können jedoch aus jeder beliebigen Quelle stammen.

Im Folgenden wird davon ausgegangen, dass Sie ein Phoenix-Projekt mit mix phx.new und aktiviertem LiveView eingerichtet haben.

Bibliothekseinrichtung

Es gibt mehrere Möglichkeiten, ein Javascript-Paket als Teil des Javascripts der Seite zu integrieren.

Das Empfehlen eines bevorzugten Setups liegt außerhalb des Rahmens dieses Artikels, es gibt jedoch zwei Möglichkeiten:

• assets/vendor – in der typischen LiveView-Projektvorlage wird die Topbar in diesem Verzeichnis platziert und in die Einstiegspunktdatei „assets/app/app.js“ eingebunden. Dies eignet sich im Allgemeinen für kleinere, stabilere Bibliotheken, insbesondere wenn eine Einzeldateiversion der Bibliothek bereitgestellt wird.
• NPM/Yarn – Esbuild und Webpack können die referenzierte node_modules-Datei in eine einzige Distributionsdatei packen. Dies eignet sich für größere, komplexere Bibliotheken, die sich häufiger ändern.

Das Problem mit json-view

Wenn wir versuchen, die beiden Bibliotheken zu kombinieren, gibt es zwei inkompatible Rendering-Modelle.

LiveView folgt dem deklarativen Modell – Sie entwerfen die Ansicht, bestimmen, welche Daten angezeigt werden sollen, und LiveView ermittelt, welche Elemente der Seite geändert werden müssen, wenn die zugrunde liegenden Daten geändert werden.

Dies wird durch die Verwendung von Socket-Zuweisungen in render erreicht:

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

Bibliotheken wie json-view arbeiten jedoch nach dem imperativen Modell. Wir geben die Schritte an, die zum Anzeigen der Daten in Javascript erforderlich sind, außerhalb des Layouts des DOM selbst:

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'));

Diese beiden Modelle sind uneins. Wir haben scheinbar keine Möglichkeit, die beiden Methoden zum Rendern von Daten (deklarativ und imperativ) aufeinander abzustimmen, aber wir benötigen Bibliotheken wie json-view, um umfangreiche Schnittstellen auf dem Client darzustellen.

Grundsätzlich müssen wir Javascript-Code ausführen, wenn der Server eine Änderung des Seitenstatus anfordert. Werfen wir einen Blick auf Hooks, die dabei helfen, diese beiden Rendering-Modelle in Einklang zu bringen.

Hook-Setup

In LiveView sind Hooks die Möglichkeit, eine bidirektionale Kommunikation zwischen dem (Browser-)Client und dem (LiveView-)Server bereitzustellen, wobei das Kernobjekt der Kommunikation das Ereignis ist.

Hooks werden im LiveSocket definiert und mithilfe des phx-hook-Attributs an ein Element angehängt. Es gibt eine Reihe von Rückrufen – wir konzentrieren uns jedoch auf den montierten Rückruf, da wir alles andere über Ereignisse koordinieren können. Sie können auch Rückrufe für andere Lebenszyklusereignisse bereitstellen – sehen Sie sich die Dokumente an.

In einem Rückruf wie „mounted“ sendet der Hook mithilfe von this.pushEvent Ereignisse an das Backend und verarbeitet Ereignisse vom Server, indem er mithilfe von this.handleEvent einen Handler für einen bestimmten Ereignisnamen registriert.

Es ist wichtig zu beachten, dass nur ein Hook pro Element zulässig ist, sodass Sie nur über einen Ereignisstrom zwischen Client und Server nachdenken müssen.

Mit diesem Wissen im Hinterkopf definieren wir einen JsonView-Hook, der einen Ereignishandler registriert, der schließlich jsonview.render für das Element aufruft, um den Datenbaum zu rendern.

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 }, ...}
 );
...

Wir machen mehrere Dinge in diesen mehreren Codezeilen:

1. Wir definieren ein JsonViewHook-Objekt mit einer mounted-Funktion. Diese Funktion wird aufgerufen, wenn das Element mit diesem Hook im DOM gemountet wird.
2. In mounted richten wir einen Ereignis-Listener für ein benutzerdefiniertes Ereignis namens „render_json“ ein. Dieses Ereignis wird von unserem LiveView ausgelöst.
3. Wenn das Ereignis empfangen wird, erwartet es einen Daten-Parameter, der den zu rendernden JSON enthält.
4. Wir löschen den vorhandenen Inhalt des Elements.
5. Wir verwenden jsonview.create und jsonview.render, um die JSON-Daten in unser Element zu rendern.

Um diesen Hook zu verwenden, müssen wir lediglich das phx-hook-Attribut mit dem Namen des Hooks („JsonView“) zu einem Element hinzufügen:

<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", {});
}

um ein Ereignis an den LiveView-Server zu senden, das mit handle_info verarbeitet werden kann. Der entsprechende Abschnitt der LiveView-Dokumentation behandelt weitere Möglichkeiten mit this.pushEvent, einschließlich eines Szenarios, in dem eine Handlerfunktion angegeben werden kann, um eine Antwortnutzlast direkt zu verarbeiten.

Senden von Ereignissen vom Server

push_event/3 ist die Möglichkeit, ein Ereignis von LiveView an den Browser zu übertragen. Es kann jederzeit aufgerufen werden – auch im Mount –, es empfiehlt sich jedoch, sicherzustellen, dass sich die Seite und alle ihre Elemente in einem bekannten Zustand befinden, bevor diese Ereignisse gesendet werden. Andernfalls werden Ereignisse während der Seiteneinrichtung stillschweigend verworfen – ein sicherer Weg zur Unvorhersehbarkeit!

Schreiben wir eine handle_event-Klausel für ein Ereignis, das wir möglicherweise vom Client erhalten, die ein Ereignis an den Client weiterleitet:

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

Das ist es! Und auch hier gibt es Flexibilität. Durch die Registrierung von Ereignishandlern mit Namen sowohl auf dem Client als auch auf dem Server wird eine klare Trennung zwischen der Behandlung des Ereignisses und der Art und Weise, wie das Ereignis ausgelöst wird, vorgenommen.

Weitere Integration

Wir haben ein einfaches Beispiel für die Integration zwischen Client und Server gesehen. Eine übliche Erweiterung davon wäre, bestimmte Aktualisierungen auf bestimmte Elemente durch die Verwendung von Ereignisparametern und Elementattributen zu beschränken. Dies trägt dazu bei, die Menge unnötiger Ereignisse und Handlerarbeit zu reduzieren.

Diese Ereignisbehandlung kann auch für eine engere clientseitige Bibliotheksintegration mit dem Backend erweitert werden. Typischerweise geben diese Javascript-Bibliotheken beispielsweise Benutzerinteraktionsereignisse auf höherer Ebene aus. Unser Bibliotheksbeispiel, json-view, macht das nicht, aber eine Diagrammbibliothek wie chart.js schon.

Aus Sicht der Benutzerinteraktion sollte jedoch ein Roundtrip zum Server zur Verarbeitung generell vermieden werden. Normalerweise wird jede auf Ereignissen basierende Rendering-Aktualisierung von der Rendering-Bibliothek clientseitig durchgeführt.

Aber die Erfassung von Benutzeraktivitäten aus anderen Gründen ist ein häufiger Anwendungsfall. Dazu gehören Überwachung, Protokollierung und Analyse. Diese erfordern keine Antwort, daher kann pushEvent innerhalb eines Hooks ideal für diese Art der asynchronen Verarbeitung auf dem Server sein.

Abschluss

Die Integration leistungsstarker clientseitiger Javascript-Bibliotheken, die eine Kontrolle über das DOM erfordern, ist ein wesentlicher Bestandteil der Erstellung umfangreicher, dynamischer Benutzeroberflächen. Nicht alle Seitenaktualisierungen müssen in Echtzeit erfolgen. Daher bietet die Beibehaltung von LiveView eine leistungsstarke und dennoch einfache Möglichkeit, den Status anderer Seiten weiterhin zu steuern.

Wenn Sie sich mit LiveView-Hooks und den damit verbundenen Ereignissen vertraut machen, können Sie diese mit Daten integrieren, die vom Server stammen. Es ist auch wichtig zu beachten, dass nicht jede Benutzerinteraktivität einen Roundtrip zum Server erfordert und die von Ihnen erstellten Schnittstellen flexibler und reaktionsschneller sind, wenn Sie leistungsstarke Javascript-Bibliotheken verwenden.

Das obige ist der detaillierte Inhalt vonPhoenix LiveView, Hooks und push_event: json_view. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!