Phoenix LiveView, cangkuk dan push_event: json_view

Phoenix LiveView ialah rangka kerja berkuasa yang dibina pada Elixir, dan menawarkan pendekatan inovatif untuk membina antara muka web masa nyata tanpa memerlukan Javascript yang meluas.

Walau bagaimanapun, penyepaduan dengan perpustakaan sisi klien sedia ada, seperti yang digunakan untuk membuat grafik, visualisasi atau rendering, kadangkala boleh membuktikan satu cabaran.

Dalam artikel ini, kami akan meneroka cara kami boleh menyepadukan Phoenix LiveView dengan perpustakaan Javascript yang menjadikan DOM secara langsung.

Kami akan menemui cangkuk, yang membolehkan kami menjalankan Javascript pada elemen kitaran hayat tertentu untuk elemen tertentu dan cara cangkuk ini mendayakan aliran acara (menggunakan push_event dalam LiveView dan pushEvent dalam Javascript) untuk membenarkan komunikasi masa nyata dua arah antara pelanggan dan pelayan.

Latar belakang

TLDR: Dalam Phoenix LiveView, anda boleh menggunakan cangkuk dan push_event untuk menolak data dan meminta pustaka pihak pelanggan mengendalikan pemaparan.

json-view (demo) - yang memaparkan objek JSON pada halaman web sebagai pepohon yang boleh dikembangkan dan diruntuhkan - ialah contoh yang baik tentang cara sesetengah perpustakaan Javascript sisi klien mengawal rendering ke DOM dan interaksi dengannya .

Mari kita lihat contoh cara menyepadukan ini dengan data JSON yang disediakan oleh pelayan (LiveView). Kami akan menghantar beberapa data statik dari bahagian belakang sebagai tindak balas kepada peristiwa, tetapi data ini boleh datang daripada mana-mana sumber.

Yang berikut akan menganggap anda telah menyediakan projek Phoenix menggunakan mix phx.new, dengan LiveView didayakan.

Persediaan perpustakaan

Terdapat pelbagai cara untuk menggabungkan pakej Javascript sebagai sebahagian daripada Javascript halaman.

Mengsyorkan persediaan pilihan adalah di luar skop artikel ini, tetapi terdapat dua cara utama:

• aset/vendor - dalam templat projek LiveView biasa, bar atas diletakkan dalam direktori ini dan disertakan dalam fail titik masuk assets/app/app.js. Ini sesuai untuk perpustakaan yang lebih kecil dan lebih stabil secara umum, terutamanya jika satu versi fail pustaka disediakan.
• NPM/Yarn - esbuild dan webpack boleh membungkus fail node_modules yang dirujuk ke dalam satu fail pengedaran. Ini sesuai untuk perpustakaan yang lebih besar dan lebih kompleks yang berubah dengan lebih kerap.

Masalah dengan json-view

Terdapat dua model pemaparan yang tidak serasi apabila kami cuba menggabungkan kedua-dua perpustakaan.

LiveView mengikut model deklaratif - anda mereka bentuk paparan, menentukan data yang perlu dipaparkan dan LiveView menentukan elemen halaman yang perlu diubah apabila data asas ditukar.

Ia mencapai ini dengan menggunakan penetapan soket dalam pemaparan:

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

Walau bagaimanapun, perpustakaan seperti json-view berfungsi pada model imperatif. Kami menentukan langkah yang diperlukan untuk memaparkan data dalam Javascript, di luar reka letak DOM itu sendiri:

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

Kedua-dua model ini bertentangan. Kami nampaknya tidak mempunyai cara untuk memadankan dua kaedah pemaparan data (deklaratif dan imperatif), tetapi kami memerlukan perpustakaan seperti json-view untuk memaparkan antara muka yang kaya pada klien.

Pada asasnya - kita perlu menjalankan kod Javascript apabila pelayan menggesa perubahan keadaan halaman. Mari lihat cangkuk, yang membantu menyelaraskan kedua-dua model pemaparan ini.

Persediaan cangkuk

Dalam LiveView, cangkuk ialah cara untuk menyediakan komunikasi dua arah antara klien (penyemak imbas) dan pelayan (LiveView), dengan objek teras komunikasi ialah acara.

Cangkuk ditakrifkan dalam LiveSocket dan dilampirkan pada elemen menggunakan atribut phx-hook. Terdapat beberapa panggilan balik - tetapi kami akan menumpukan pada panggilan balik yang dipasang, kerana kami boleh menyelaraskan semua perkara lain melalui acara. Anda juga boleh membekalkan panggilan balik untuk acara kitaran hayat yang lain - semak dokumen.

Dalam panggilan balik seperti dipasang, cangkuk menghantar acara ke hujung belakang menggunakan this.pushEvent dan mengendalikan acara daripada pelayan dengan mendaftarkan pengendali untuk nama acara tertentu menggunakan this.handleEvent.

Adalah penting untuk ambil perhatian bahawa hanya satu cangkuk dibenarkan bagi setiap elemen, jadi anda hanya perlu membuat alasan tentang satu aliran acara antara pelanggan dan pelayan.

Dengan mengambil kira pengetahuan itu - mari kita tentukan cangkuk JsonView yang mendaftarkan pengendali acara, yang akhirnya memanggil jsonview.render pada elemen untuk memaparkan pepohon data.

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

Kami melakukan beberapa perkara dalam beberapa baris kod ini:

1. Kami mentakrifkan objek JsonViewHook dengan fungsi dilekapkan. Fungsi ini akan dipanggil apabila elemen dengan cangkuk ini dipasang dalam DOM.
2. Di dalam dilekapkan, kami menyediakan pendengar acara untuk acara tersuai yang dipanggil "render_json". Acara ini akan dicetuskan daripada LiveView kami.
3. Apabila acara diterima, ia menjangkakan parameter data yang mengandungi JSON akan dipaparkan.
4. Kami mengosongkan kandungan unsur yang sedia ada.
5. Kami menggunakan jsonview.create dan jsonview.render untuk memaparkan data JSON ke dalam elemen kami.

Untuk menggunakan cangkuk ini - kita hanya perlu menambah atribut phx-hook dengan nama cangkuk ("JsonView") pada elemen:

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

untuk menghantar acara ke pelayan LiveView yang boleh dikendalikan dengan handle_info. Bahagian yang berkaitan dalam dokumentasi LiveView merangkumi lebih banyak kemungkinan dengan this.pushEvent, termasuk senario di mana fungsi pengendali boleh ditentukan untuk mengendalikan muatan balasan secara langsung.

Menghantar acara dari pelayan

push_event/3 ialah cara untuk menolak acara daripada LiveView ke penyemak imbas. Ia boleh dipanggil pada bila-bila masa - termasuk dalam mount - walaupun amalan yang baik adalah memastikan halaman dan semua elemennya berada dalam keadaan yang diketahui sebelum menghantar acara ini. Jika tidak - anda akan mempunyai acara yang digugurkan secara senyap semasa persediaan halaman - laluan yang pasti kepada ketidakpastian!

Mari kita tulis klausa handle_event untuk acara yang mungkin kami terima daripada pelanggan, yang menolak acara kepada pelanggan:

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

Itu sahaja! Dan terdapat fleksibiliti di sini juga. Mendaftarkan pengendali acara dengan nama pada kedua-dua pelanggan dan pelayan menandakan pemisahan yang jelas antara pengendalian acara dan cara acara itu dibangkitkan.

Penyepaduan selanjutnya

Kami telah melihat contoh mudah penyepaduan antara pelanggan dan pelayan. Sambungan biasa ini adalah untuk merangkumi kemas kini tertentu kepada elemen tertentu, melalui penggunaan parameter acara dan atribut elemen. Ini membantu mengurangkan jumlah acara yang tidak perlu dan kerja pengendali.

Pengendalian acara ini juga boleh dikembangkan untuk penyepaduan perpustakaan sisi pelanggan yang lebih ketat dengan bahagian belakang. Sebagai contoh, biasanya perpustakaan Javascript ini memancarkan peristiwa interaksi pengguna peringkat lebih tinggi. Contoh perpustakaan kami, json-view, tidak melakukan ini, tetapi perpustakaan carta seperti chart.js melakukannya.

Walau bagaimanapun, dari sudut interaksi pengguna, perjalanan pergi balik ke pelayan untuk pemprosesan harus dielakkan secara amnya. Biasanya, sebarang kemas kini pemaparan berdasarkan acara akan dikendalikan oleh bahagian pelanggan perpustakaan pemaparan.

Tetapi menangkap aktiviti pengguna atas sebab lain ialah kes penggunaan biasa. Ini termasuk pemantauan, pembalakan dan analisis. Ini tidak memerlukan respons, jadi pushEvent dari dalam cangkuk boleh sesuai untuk jenis pemprosesan tak segerak pada pelayan ini.

Kesimpulan

Menyepadukan perpustakaan bahagian klien Javascript yang berkuasa yang memerlukan kawalan ke atas DOM ialah bahagian penting dalam mencipta antara muka pengguna yang kaya dan dinamik. Tidak semua kemas kini halaman perlu dalam masa nyata, oleh itu mengekalkan LiveView menawarkan cara yang berkuasa namun mudah untuk terus mengawal keadaan halaman lain.

Membiasakan diri dengan cangkuk LiveView dan acara berkaitannya membolehkan penyepaduan ini dengan data yang berasal dari pelayan mungkin. Penting juga untuk ambil perhatian bahawa bukan semua interaktiviti pengguna memerlukan perjalanan pergi balik ke pelayan, dan antara muka yang anda bina akan menjadi lebih fleksibel dan responsif apabila anda menggunakan perpustakaan Javascript yang berkuasa.

Atas ialah kandungan terperinci Phoenix LiveView, cangkuk dan push_event: json_view. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!